/* Brazier Labs · Product-led studio website. See DESIGN.md. */
@font-face {
  font-family:Inter;
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('/assets/fonts/inter-var-latin.woff2') format('woff2');
}

:root {
  color-scheme:light;
  --navy:#07192c;
  --navy-2:#102941;
  --navy-3:#19394f;
  --ink:#132b42;
  --ink-2:#486078;
  --ink-3:#5b7084;
  --ember:#ec6726;
  --ember-ink:#b74716;
  --ember-lift:#ff9c68;
  --ember-soft:#fff0e8;
  --paper:#fff;
  --paper-2:#f5f8fb;
  --paper-3:#edf2f7;
  --line:#e2e9f0;
  --line-2:#c6d2df;
  --on-navy:#b6c9d9;
  --on-navy-2:#a7bbcd;
  --sans:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --max:1200px;
  --gutter:40px;
  --header-h:84px;
  --sy:112px;
  --measure:68ch;
  --r:8px;
  --r-lg:16px;
}

* ,*::before,*::after {
  box-sizing:border-box;
}

html {
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:108px;
}

body {
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  color:var(--ink);
  background:#fff;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}

main {
  flex:1;
  min-width:0;
}

img {
  max-width:100%;
  height:auto;
}

button,a {
  -webkit-tap-highlight-color:transparent;
}

button {
  font:inherit;
}

button,a,input {
  touch-action:manipulation;
}

a {
  color:var(--ember-ink);
  text-decoration:none;
}

a:hover {
  color:var(--ink);
}

a:focus-visible,button:focus-visible {
  outline:3px solid #1d75d4;
  outline-offset:5px;
}

::selection {
  background:#ffd2b9;
  color:var(--navy);
}

h1,h2,h3,h4 {
  margin:0;
  color:var(--ink);
  line-height:1.1;
  font-weight:600;
  letter-spacing:-.045em;
  text-wrap:balance;
}

h1 {
  font-size:clamp(44px,5.5vw,72px);
}

h2 {
  font-size:clamp(32px,3.6vw,48px);
}

h3 {
  font-size:22px;
  letter-spacing:-.025em;
}

h4 {
  font-size:18px;
  letter-spacing:-.02em;
}

p,ul,ol,dl {
  margin:0 0 1.2em;
}

address {
  font-style:normal;
}

li {
  margin-bottom:.4em;
}

.container {
  width:100%;
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--gutter);
}

section {
  padding:var(--sy) 0;
}

.eyebrow {
  margin:0 0 22px;
  color:var(--ember-ink);
  font-size:14px;
  font-weight:600;
  letter-spacing:.01em;
  line-height:1.45;
}

.lead {
  max-width:58ch;
  color:var(--ink-2);
  font-size:20px;
  line-height:1.6;
}

.muted {
  color:var(--ink-3);
}

.small {
  font-size:14px;
}

.narrow {
  max-width:54ch;
}

.data {
  font-variant-numeric:tabular-nums;
}

.updated {
  font-size:14px;
  color:var(--ink-3);
}

.num {
  font-size:14px;
  color:var(--ember-ink);
  font-weight:600;
}

.skip-link {
  position:fixed;
  left:-100%;
  top:10px;
  z-index:100;
  background:#fff;
  padding:12px 20px;
  border:2px solid var(--ink);
}

.skip-link:focus {
  left:12px;
}

/* Compact shared navigation */
.site-header {
  position:sticky;
  top:0;
  z-index:40;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid rgba(226,233,240,.7);
}

.header-inner {
  min-height:var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  position:relative;
}

.brand {
  display:inline-flex;
  align-items:center;
  flex:none;
}

.brand-lockup {
  width:144px;
  height:auto;
  display:block;
}

.site-nav {
  display:flex;
  align-items:center;
  gap:30px;
  margin-left:auto;
  margin-right:34px;
}

.site-nav a {
  color:var(--ink);
  font-size:14px;
  font-weight:550;
  line-height:1.4;
  padding:10px 0;
}

.site-nav a:hover,.site-nav a[aria-current=page] {
  color:var(--ember-ink);
}

.site-nav a[aria-current=page] {
  text-decoration:underline;
  text-underline-offset:8px;
  text-decoration-thickness:2px;
}

.site-nav .nav-mail {
  display:none;
}

.nav-burger {
  display:none;
  border:0;
  background:transparent;
  color:var(--ink);
  cursor:pointer;
}

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  min-height:48px;
  padding:12px 21px;
  border:1px solid transparent;
  border-radius:999px;
  background:var(--ink);
  color:#fff;
  font-size:15px;
  line-height:1.4;
  font-weight:600;
  transition:background .18s,transform .18s;
}

.btn:hover {
  background:#284b68;
  color:#fff;
  transform:translateY(-1px);
}

.btn span,.text-link span {
  display:inline-block;
  transition:transform .18s;
}

.btn:hover span,.text-link:hover span {
  transform:translateX(3px);
}

.nav-cta {
  min-height:39px;
  padding:9px 17px;
  font-size:14px;
  gap:16px;
  white-space:nowrap;
}

.btn-secondary {
  background:transparent;
  color:var(--ink);
  border-color:var(--line-2);
}

.btn-secondary:hover {
  background:var(--paper-2);
  color:var(--ink);
}

.btn-ember {
  background:var(--ember);
  color:var(--navy);
}

.btn-ghost {
  background:var(--ink);
  color:#fff;
}

.actions {
  display:flex;
  gap:28px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:28px;
}

.text-link {
  display:inline-flex;
  align-items:center;
  gap:15px;
  font-size:15px;
  font-weight:600;
  color:var(--ink);
  line-height:1.5;
}

.text-link:hover {
  color:var(--ember-ink);
}

.status-dot {
  width:7px;
  height:7px;
  flex:none;
  display:inline-block;
  border-radius:50%;
  background:var(--ember);
}

/* Hero: a single composition, with the product in the first viewport. */
.hero {
  padding:0;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:linear-gradient(110deg,#fff 35%,#f7fbff 80%);
}

.hero::after {
  content:'';
  position:absolute;
  z-index:-1;
  inset:0;
  max-width:1120px;
  margin:auto;
  border-inline:1px solid rgba(215,226,237,.4);
  pointer-events:none;
}

.hero-spectrum {
  position:absolute;
  z-index:-2;
  left:45%;
  top:-220px;
  width:100%;
  height:690px;
  transform:rotate(-16deg);
  background:radial-gradient(ellipse at 20% 0,#eee9fd 0,transparent 54%),radial-gradient(ellipse at 90% 18%,#68c1f8 0,transparent 47%),radial-gradient(ellipse at 65% 78%,#ffbd83 0,transparent 52%),linear-gradient(110deg,#f4ccbb,#f47845 60%,#ffb471);
  opacity:.84;
}

.hero-grid {
  display:grid;
  grid-template-columns:1.02fr 1fr;
  gap:14px;
  min-height:720px;
  align-items:center;
  position:relative;
}

.hero-copy {
  padding:54px 0 66px;
  position:relative;
  z-index:4;
}

.studio-status {
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:var(--ink);
  font-size:13px;
  font-weight:550;
  margin-bottom:32px;
  line-height:1.5;
}

.studio-status>span:last-child {
  margin-left:8px;
}

.hero h1 {
  font-size:clamp(66px,6.5vw,88px);
  line-height:1.01;
  letter-spacing:-.067em;
  font-weight:650;
  max-width:7.2em;
  text-wrap:initial;
}

.hero h1 span {
  color:var(--ember-ink);
}

.hero-description {
  margin:28px 0 0;
  max-width:440px;
  color:var(--ink-2);
  font-size:19px;
  line-height:1.65;
  letter-spacing:-.02em;
}

.hero-note {
  margin:29px 0 0;
  color:var(--ink-3);
  font-size:13px;
}

.hero-visual {
  height:640px;
  position:relative;
  align-self:end;
  min-width:0;
}

.hero-phone {
  position:absolute;
  top:60px;
  left:8px;
  width:280px;
  padding:6px;
  background:#fff;
  border:1px solid #dfe6ef;
  border-radius:31px;
  box-shadow:0 35px 70px -20px #122d5555,0 4px 10px #15294014;
  transform:rotate(-5deg);
  z-index:2;
}

.hero-phone img {
  display:block;
  width:100%;
  border-radius:24px;
}

.hero-report {
  position:absolute;
  width:290px;
  left:238px;
  top:95px;
  background:#fff;
  box-shadow:0 22px 60px -16px #2b3e6d44;
  border:1px solid #e5eaf0;
  border-radius:14px;
  transform:rotate(5deg);
  overflow:hidden;
  padding:19px;
}

.mini-product {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:13px;
  font-weight:600;
}

.mini-product img {
  border-radius:7px;
}

.mini-product>span {
  margin-left:auto;
  color:#8391a1;
}

.mini-report-head {
  padding:25px 0 18px;
}

.mini-report-head>span {
  display:block;
  font-size:9px;
  font-weight:600;
  letter-spacing:1.4px;
  color:#687b91;
}

.mini-report-head strong {
  display:block;
  font-size:27px;
  line-height:1.13;
  letter-spacing:-1px;
  font-weight:600;
  margin-top:10px;
}

.report-photo {
  width:100%;
  height:155px;
  object-fit:cover;
  display:block;
  border-radius:7px;
}

.report-observation {
  padding:13px 0 0;
}

.report-observation strong,.report-observation>span:last-child {
  display:block;
  font-size:12px;
  margin-top:8px;
}

.report-observation>span:last-child {
  font-size:10px;
  color:#67798d;
  margin-top:2px;
}

.open-badge {
  font-size:9px;
  font-weight:600;
  background:#fff0ee;
  color:#b23129;
  padding:3px 7px;
  border-radius:4px;
}

.hero-readout {
  position:absolute;
  z-index:3;
  left:205px;
  top:456px;
  width:327px;
  background:#fff;
  box-shadow:0 22px 50px -20px #0b354b55;
  border:1px solid #dfedf0;
  border-radius:13px;
  padding:18px;
  display:flex;
  align-items:center;
  gap:13px;
  transform:rotate(-2deg);
}

.readout-symbol {
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  background:#e1f0f4;
  color:#0f6e8c;
  border-radius:8px;
  font-size:23px;
}

.hero-readout div>span {
  font-size:10px;
  display:block;
  color:#536b7c;
}

.hero-readout strong {
  font-size:27px;
  line-height:1.4;
  letter-spacing:-1px;
  font-weight:600;
  white-space:nowrap;
}

.hero-readout small {
  font-size:11px;
  letter-spacing:0;
  font-weight:500;
}

.hero-readout svg {
  width:73px;
  margin-left:auto;
  flex:none;
}

.hero-caption {
  position:absolute;
  bottom:29px;
  left:36px;
  color:var(--ink-3);
  font-size:12px;
  margin:0;
}

/* A quiet product directory, not a feed of articles. */
.product-rail {
  border-block:1px solid var(--line);
  background:#fff;
}

.rail-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
}

.rail-grid>a {
  display:flex;
  align-items:center;
  padding:31px 24px;
  gap:17px;
  color:var(--ink);
  border-right:1px solid var(--line);
  transition:background .18s;
}

.rail-grid>a:first-child {
  padding-left:0;
}

.rail-grid>a:last-child {
  border-right:0;
}

.rail-grid>a:hover {
  background:var(--paper-2);
}

.rail-grid img {
  width:44px;
  height:44px;
  border-radius:10px;
}

.rail-grid strong {
  display:block;
  font-size:17px;
  font-weight:600;
  letter-spacing:-.025em;
}

.rail-grid small {
  display:block;
  font-size:12px;
  color:var(--ink-3);
  margin-top:1px;
}

.rail-arrow {
  margin-left:auto;
  color:#6d8296;
  font-size:18px;
}

/* Product showroom */
.product-suite {
  position:relative;
  background:var(--navy);
  color:var(--on-navy);
  padding:110px 0 84px;
  overflow:hidden;
}

.suite-intro {
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:100px;
  align-items:end;
  margin-bottom:44px;
}

.suite-intro h2 {
  color:#fff;
  font-size:42px;
  letter-spacing:-.045em;
  line-height:1.15;
}

.suite-intro>.eyebrow,.product-suite .eyebrow {
  color:#ff9c68;
}

.suite-intro>p {
  margin:0 0 4px;
  font-size:17px;
  max-width:38ch;
}

.product-tabs {
  display:none;
  border-bottom:1px solid #294055;
  gap:34px;
  margin-bottom:20px;
}

.products-enhanced .product-tabs {
  display:flex;
}

.product-tabs button {
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  color:#aec0d0;
  background:transparent;
  border:0;
  border-bottom:3px solid transparent;
  padding:15px 0 19px;
  font-size:15px;
  font-weight:550;
  cursor:pointer;
}

.product-tabs button[aria-selected=true] {
  color:#fff;
  border-bottom-color:#ff9963;
}

.product-tabs button:hover {
  color:#fff;
}

.product-tabs img {
  width:26px;
  height:26px;
  border-radius:6px;
}

.product-tabs button:focus-visible {
  outline-color:#ff9963;
}

.product-pane[hidden] {
  display:none;
}

.pane-grid {
  display:grid;
  grid-template-columns:1fr 1.07fr;
  gap:75px;
  align-items:center;
  min-height:600px;
}

.product-copy {
  padding:38px 0;
}

.product-identity {
  display:flex;
  align-items:center;
  gap:14px;
  color:var(--ink);
  font-size:23px;
  font-weight:600;
  letter-spacing:-.04em;
  margin-bottom:33px;
}

.product-identity img {
  width:43px;
  height:43px;
  border-radius:10px;
}

.product-suite .product-identity {
  color:#fff;
}

.product-copy .eyebrow {
  margin-bottom:13px;
  font-size:13px;
}

.product-copy h3,.product-copy h2 {
  font-size:42px;
  line-height:1.12;
  letter-spacing:-.045em;
  margin-bottom:24px;
}

.product-suite .product-copy h3 {
  color:#fff;
}

.product-copy>p:not(.eyebrow):not(.availability) {
  font-size:17px;
  line-height:1.7;
  max-width:43ch;
  color:var(--ink-2);
}

.product-suite .product-copy>p:not(.eyebrow):not(.availability) {
  color:var(--on-navy);
}

.feature-list {
  list-style:none;
  padding:0;
  margin:26px 0;
  font-size:14px;
  line-height:1.6;
}

.feature-list li {
  padding-left:22px;
  position:relative;
  margin-bottom:10px;
}

.feature-list li::before {
  content:'✓';
  position:absolute;
  left:0;
  color:#2683c8;
}

.product-suite .feature-list li::before {
  color:#81beec;
}

.availability {
  font-size:14px;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin:25px 0 20px;
  color:var(--ink-3);
}

.availability .status-dot {
  width:6px;
  height:6px;
}

.platform {
  padding-left:10px;
  border-left:1px solid var(--line-2);
  margin-left:3px;
}

.product-suite .availability {
  color:#a7bccc;
}

.product-suite .platform {
  border-color:#496176;
}

.product-suite .text-link {
  color:#ffac7f;
}

.product-suite .text-link:hover {
  color:#fff;
}

.product-policy {
  display:block;
  font-size:13px;
  text-decoration:underline;
  text-underline-offset:4px;
  margin-top:18px;
}

.product-display {
  margin:0;
  position:relative;
  min-width:0;
  height:588px;
  isolation:isolate;
  display:grid;
  place-items:center;
  overflow:hidden;
}

.display-grid {
  position:absolute;
  inset:30px 0 60px;
  background:radial-gradient(ellipse at center,#4978b13b,transparent 66%);
  z-index:-1;
}

.display-grid::before {
  content:'';
  position:absolute;
  inset:30px 8px;
  border:1px solid #344b6555;
  transform:skewY(-12deg);
  background-image:linear-gradient(#3047614d 1px,transparent 1px),linear-gradient(90deg,#3047614d 1px,transparent 1px);
  background-size:50px 50px;
  mask-image:linear-gradient(transparent,#000 20%,#000 70%,transparent);
}

.screen-frame {
  width:257px;
  border-radius:25px;
  padding:5px;
  background:#fff;
  border:1px solid #ced8e3;
  box-shadow:0 25px 70px -15px #0007;
  transform:rotate(5deg);
  position:relative;
  left:25px;
}

.screen-frame img {
  display:block;
  width:100%;
  border-radius:20px;
}

.result-callout {
  position:absolute;
  top:309px;
  left:5px;
  min-width:230px;
  border-radius:12px;
  padding:20px 24px;
  background:#fff;
  box-shadow:0 18px 50px -15px #07182777;
  color:var(--ink);
  transform:rotate(-4deg);
  border:1px solid #dfe9f1;
}

.readout-label {
  display:block;
  font-size:9px;
  font-weight:600;
  letter-spacing:1.2px;
  color:#557089;
}

.result-callout strong {
  display:block;
  font-size:43px;
  font-weight:600;
  letter-spacing:-2px;
  line-height:1.3;
  padding:4px 0;
}

.result-callout strong small {
  font-size:18px;
  font-weight:500;
  letter-spacing:-.5px;
  color:#678098;
}

.readout-foot {
  display:block;
  font-size:10px;
  color:#5c7186;
}

.product-display figcaption {
  position:absolute;
  bottom:3px;
  left:0;
  right:0;
  text-align:center;
  font-size:12px;
  color:#9db2c6;
}

.product-pane+.product-pane {
  border-top:1px solid #263e53;
  margin-top:40px;
  padding-top:40px;
}

.products-enhanced .product-pane {
  margin:0;
  border:0;
  padding:0;
}

/* Studio principles and contact */
.principles-section {
  background:#fff;
}

.principles-heading {
  max-width:580px;
  margin-bottom:57px;
}

.principles-heading h2 {
  margin-bottom:22px;
}

.principles-heading>p:last-child {
  font-size:18px;
  color:var(--ink-2);
  margin-bottom:0;
}

.principles-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:42px;
}

.principles-grid>div {
  border-left:1px solid var(--line);
  padding-left:24px;
}

.principle-symbol {
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  color:#c44e19;
  font-size:30px;
  margin:0 0 21px;
  font-weight:500;
}

.principles-grid h3 {
  font-size:18px;
  letter-spacing:-.025em;
  margin-bottom:16px;
}

.principles-grid p {
  font-size:16px;
  color:var(--ink-2);
  margin:0;
  max-width:30ch;
}

.studio-section {
  background:#f5f8fb;
  border-block:1px solid var(--line);
}

.studio-grid,.contact-grid,.release-grid {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:100px;
  align-items:center;
}

.studio-grid h2 {
  font-size:42px;
}

.studio-grid>div>p:not(.eyebrow),.contact-grid>div>p:not(.eyebrow),.release-grid>div>p:not(.eyebrow) {
  color:var(--ink-2);
  font-size:18px;
}

.contact-section {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:105px 0 112px;
}

.contact-section::before {
  content:'';
  position:absolute;
  z-index:-1;
  right:-300px;
  bottom:-320px;
  width:900px;
  height:540px;
  transform:rotate(-18deg);
  background:radial-gradient(ellipse,#ffdbbe,#fff4ec 47%,transparent 70%);
}

.contact-grid h2 {
  font-size:60px;
}

.contact-address {
  display:block;
  color:var(--ink-3);
  font-size:14px;
  margin-top:18px;
}

.site-footer {
  background:var(--paper-2);
  border-top:1px solid var(--line);
  padding:65px 0 28px;
}

.footer-grid {
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:70px;
}

.legal-block .brand {
  margin-bottom:22px;
}

.legal-block .brand-lockup {
  width:132px;
  height:auto;
}

.legal-block address {
  font-size:13px;
  color:var(--ink-3);
  line-height:1.8;
}

.legal-block p {
  font-size:13px;
  margin:13px 0 0;
}

.footer-col h2 {
  font-size:14px;
  font-weight:600;
  letter-spacing:0;
  margin:0 0 22px;
}

.footer-col ul {
  list-style:none;
  padding:0;
  margin:0;
}

.footer-col li {
  margin-bottom:8px;
}

.footer-col a {
  display:inline-block;
  color:var(--ink-2);
  font-size:14px;
  padding:3px 0;
}

.footer-col a:hover {
  color:var(--ember-ink);
}

.footer-bottom {
  margin-top:52px;
  padding-top:22px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:30px;
  color:var(--ink-3);
  font-size:12px;
  line-height:1.7;
}

.footer-bottom p {
  margin:0;
}

.footer-bottom p:last-child {
  max-width:55ch;
}

/* Apps: long-form product presentations with room for real screenshots later. */
.page-head {
  padding:90px 0 70px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(120deg,#f5f8fb,#fff 75%);
}

.page-head h1 {
  margin:0 0 26px;
  max-width:18ch;
}

.page-head .lead {
  margin:0;
}

.page-head .eyebrow {
  margin-bottom:25px;
}

.apps-head {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding-bottom:0;
}

.apps-head::before {
  content:'';
  position:absolute;
  z-index:-1;
  top:-170px;
  left:64%;
  width:900px;
  height:600px;
  transform:rotate(-18deg);
  background:radial-gradient(ellipse at 70% 30%,#acd8f3,transparent 65%),linear-gradient(45deg,#ffd5bd,#fff0e6 30%,#f0f2ff);
  opacity:.8;
}

.apps-head h1 {
  font-size:80px;
  line-height:1.03;
  letter-spacing:-.06em;
}

.preview-notice {
  display:flex;
  gap:10px;
  align-items:baseline;
  font-size:13px;
  color:var(--ink-3);
  max-width:660px;
  margin:25px 0 50px;
}

.preview-notice .status-dot {
  position:relative;
  top:-1px;
}

.app-jump {
  display:flex;
  gap:40px;
  border-top:1px solid var(--line);
  padding:22px 0;
}

.app-jump a {
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--ink);
  font-size:14px;
  font-weight:600;
}

.app-jump img {
  width:28px;
  height:28px;
  border-radius:6px;
}

.app-jump a>span {
  margin-left:12px;
  color:var(--ink-3);
}

.product-chapter {
  padding:78px 0;
  border-bottom:1px solid var(--line);
}

.chapter-grid {
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:90px;
  align-items:center;
}

.product-chapter:nth-of-type(2) {
  background:var(--paper-2);
}

.product-chapter:nth-of-type(2) .product-copy {
  order:2;
}

.product-chapter .product-display {
  border-radius:24px;
  background:linear-gradient(145deg,#edf5ff,#cfe5fb);
  height:590px;
}

.product-chapter.teal .product-display {
  background:linear-gradient(145deg,#eaf6f7,#c9e3e8);
}

.product-chapter.violet .product-display {
  background:linear-gradient(145deg,#f1f1ff,#dbe7fb);
}

.product-chapter .display-grid::before {
  border-color:#bfd3e9;
  background-image:linear-gradient(#aac8df40 1px,transparent 1px),linear-gradient(90deg,#aac8df40 1px,transparent 1px);
}

.product-chapter .product-display figcaption {
  color:#526c86;
  bottom:16px;
}

.product-chapter .result-callout {
  left:17px;
  box-shadow:0 18px 50px -20px #122d5544;
}

.product-chapter .screen-frame {
  box-shadow:0 25px 50px -15px #183e6755;
}

.release-section {
  background:var(--navy);
  color:var(--on-navy);
}

.release-section h2 {
  color:#fff;
  font-size:42px;
}

.release-section .eyebrow {
  color:#ffac7f;
}

.release-grid>div>p:not(.eyebrow) {
  color:var(--on-navy);
}

.release-section .text-link {
  color:#ffac7f;
}

/* Company, contact and legal content. All entity records remain intact. */
.rows {
  display:grid;
}

.row {
  display:grid;
  grid-template-columns:270px minmax(0,1fr);
  gap:80px;
  padding:46px 0;
  border-top:1px solid var(--line);
}

.row:first-child {
  padding-top:0;
  border:0;
}

.row:last-child {
  padding-bottom:0;
}

.row>h2 {
  font-size:24px;
  letter-spacing:-.035em;
  max-width:15ch;
  line-height:1.3;
}

.row>div>:last-child {
  margin-bottom:0;
}

.prose {
  font-size:17px;
  line-height:1.8;
  max-width:var(--measure);
}

.prose p,.prose li {
  color:var(--ink-2);
}

.prose h2 {
  font-size:28px;
  margin:1.8em 0 .75em;
}

.prose h2:first-child {
  margin-top:0;
}

.prose h3 {
  font-size:21px;
  margin:1.5em 0 .7em;
}

.prose ul,.prose ol {
  padding-left:1.2em;
}

.prose a,.note a {
  text-decoration:underline;
  text-underline-offset:3px;
}

.prose strong {
  color:var(--ink);
  font-weight:600;
}

.prose .data {
  color:var(--ink);
}

.factlist,.record {
  margin:20px 0 26px;
  border-top:1px solid var(--line);
}

.factlist>div,.record>div {
  display:grid;
  grid-template-columns:180px minmax(0,1fr);
  gap:30px;
  padding:18px 0;
  border-bottom:1px solid var(--line);
}

.factlist dt,.record dt {
  font-size:14px;
  color:var(--ink-3);
  font-weight:500;
}

.factlist dd,.record dd {
  margin:0;
  color:var(--ink);
  font-size:16px;
}

.record {
  border-top:2px solid var(--ink);
}

.legal {
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:90px;
  align-items:start;
}

.toc {
  position:sticky;
  top:115px;
}

.toc h2 {
  font-size:14px;
  letter-spacing:0;
  margin-bottom:20px;
}

.toc ol {
  list-style:none;
  padding:0;
  margin:0;
  border-top:1px solid var(--line);
}

.toc li {
  margin:0;
}

.toc a {
  display:block;
  padding:10px 0;
  border-bottom:1px solid var(--line);
  font-size:13px;
  color:var(--ink-2);
  line-height:1.5;
}

.toc a:hover {
  color:var(--ember-ink);
}

.note {
  padding:22px 26px;
  background:var(--paper-2);
  border-left:3px solid var(--ember);
  border-radius:0 8px 8px 0;
}

.note>:last-child {
  margin-bottom:0;
}

.prose .note {
  margin:28px 0;
  font-size:16px;
}

.band {
  background:var(--paper-2);
}

.split {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
}

.split p {
  color:var(--ink-2);
}

.section-head {
  margin-bottom:38px;
  max-width:68ch;
}

.section-head h2 {
  margin-bottom:20px;
}

.pillars {
  display:grid;
  grid-template-columns:repeat(var(--cols,3),1fr);
  gap:32px;
}

.pillar {
  border-top:1px solid var(--line);
  padding:24px 0;
}

.pillar .num {
  display:block;
  margin-bottom:20px;
}

.pillar h3 {
  margin-bottom:16px;
}

.pillar p {
  color:var(--ink-2);
  font-size:16px;
}

.cta {
  background:var(--navy);
  padding:50px;
  border-radius:18px;
}

.cta-grid {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:60px;
  align-items:center;
}

.cta h2 {
  color:#fff;
  margin-bottom:22px;
}

.cta p {
  color:var(--on-navy);
}

.cta .eyebrow {
  color:#ffac7f;
}

.cta a:not(.btn) {
  color:#ffac7f;
}

.cta .btn {
  background:#fff;
  color:var(--ink);
}

.app-list {
  display:grid;
  gap:24px;
}

.app {
  border-top:1px solid var(--line);
  padding:24px 0;
}

.app h3 {
  margin-bottom:18px;
}

.app dl {
  display:grid;
  grid-template-columns:140px 1fr;
  gap:8px;
}

.app dd {
  margin:0;
}

.todo {
  background:#fff0cf;
  padding:3px 7px;
  border:1px solid #db9d19;
}

/* Reduced motion, zoom and small screens. */
html.telegram-ios {
  scroll-padding-top:24px;
}

html.telegram-ios .site-header {
  position:relative;
}

@media(min-width:1440px) {
  .hero-spectrum {
    top:-210px;
    height:720px;
  }
  .hero-grid {
    min-height:760px;
  }
  .hero-visual {
    height:670px;
  }
  .hero-phone {
    width:290px;
  }
  .hero-report {
    top:107px;
  }
  .hero-readout {
    top:478px;
  }
}

@media(max-width:1100px) {
  :root {
    --gutter:32px;
    --sy:90px;
  }
  .hero-grid {
    min-height:690px;
  }
  .hero h1 {
    font-size:72px;
  }
  .hero-visual {
    height:615px;
  }
  .hero-phone {
    width:258px;
    left:0;
    top:55px;
  }
  .hero-report {
    left:195px;
    width:263px;
    top:95px;
  }
  .hero-readout {
    left:141px;
    top:449px;
    width:300px;
  }
  .hero-caption {
    left:16px;
    bottom:33px;
  }
  .hero-copy {
    padding-top:43px;
  }
  .hero-description {
    font-size:17px;
  }
  .site-nav {
    gap:24px;
    margin-right:0;
  }
  .suite-intro {
    gap:60px;
  }
  .pane-grid,.chapter-grid {
    gap:45px;
  }
  .product-copy h3,.product-copy h2 {
    font-size:36px;
  }
  .product-display {
    height:565px;
  }
  .screen-frame {
    width:246px;
  }
  .result-callout {
    left:0;
    min-width:215px;
    padding:17px 19px;
  }
  .studio-grid,.contact-grid,.release-grid {
    gap:60px;
  }
  .row {
    gap:50px;
  }
  .legal {
    gap:60px;
  }
  .hero .actions {
    gap:20px;
  }
  .hero .btn,.hero .text-link {
    font-size:14px;
  }
  .hero .btn {
    gap:15px;
    padding-inline:18px;
  }
}

@media(max-width:900px) {
  .hero h1 {
    font-size:64px;
  }
  .hero-grid {
    grid-template-columns:1fr 1fr;
    min-height:650px;
    gap:0;
  }
  .hero-visual {
    height:580px;
  }
  .hero-phone {
    width:238px;
    top:74px;
    left:3px;
  }
  .hero-report {
    left:148px;
    width:233px;
    top:110px;
    padding:15px;
  }
  .mini-report-head strong {
    font-size:24px;
  }
  .report-photo {
    height:134px;
  }
  .hero-readout {
    left:93px;
    top:444px;
    width:278px;
    padding:13px;
  }
  .hero-readout svg {
    width:57px;
  }
  .hero-readout strong {
    font-size:23px;
  }
  .hero-caption {
    font-size:12px;
    bottom:20px;
  }
  .studio-status {
    font-size:12px;
    gap:7px;
  }
  .hero-description {
    font-size:16px;
  }
  .hero-note {
    font-size:12px;
  }
  .site-nav {
    gap:19px;
  }
  .brand-lockup {
    width:126px;
  }
  .header-inner {
    gap:20px;
  }
  .rail-grid>a {
    padding:25px 15px;
    gap:10px;
  }
  .rail-grid img {
    width:36px;
    height:36px;
  }
  .rail-grid strong {
    font-size:15px;
  }
  .rail-grid small {
    font-size:12px;
  }
  .rail-arrow {
    display:none;
  }
  .suite-intro h2 {
    font-size:36px;
  }
  .suite-intro {
    gap:40px;
  }
  .suite-intro>p {
    font-size:16px;
  }
  .pane-grid {
    gap:20px;
    grid-template-columns:1fr 1fr;
  }
  .product-copy h3 {
    font-size:33px;
  }
  .product-copy>p:not(.eyebrow):not(.availability) {
    font-size:16px;
  }
  .result-callout {
    min-width:190px;
    left:0;
    top:328px;
  }
  .result-callout strong {
    font-size:36px;
  }
  .readout-foot {
    font-size:9px;
  }
  .screen-frame {
    left:20px;
    width:231px;
  }
  .product-tabs {
    gap:28px;
  }
  .principles-grid {
    gap:28px;
  }
  .principles-grid>div {
    padding-left:19px;
  }
  .studio-grid,.contact-grid,.release-grid {
    gap:45px;
  }
  .studio-grid h2 {
    font-size:36px;
  }
  .chapter-grid {
    gap:38px;
  }
  .product-chapter .product-display {
    height:555px;
  }
  .product-chapter .result-callout {
    left:5px;
  }
  .row {
    grid-template-columns:220px 1fr;
    gap:40px;
  }
  .legal {
    grid-template-columns:185px 1fr;
    gap:45px;
  }
  .footer-grid {
    gap:40px;
  }
}

@media(max-width:767px) {
  :root {
    --gutter:24px;
    --header-h:72px;
    --sy:76px;
  }
  html {
    scroll-padding-top:95px;
  }
  .header-inner {
    position:static;
    gap:18px;
  }
  .brand-lockup {
    width:127px;
  }
  .nav-cta {
    margin-left:auto;
    min-height:36px;
    font-size:12px;
    padding:9px 14px;
    gap:12px;
  }
  .nav-burger {
    display:flex;
    align-items:center;
    justify-content:center;
    order:10;
    width:44px;
    height:44px;
    margin-right:-10px;
    flex:none;
  }
  .nav-burger span,.nav-burger span::before,.nav-burger span::after {
    display:block;
    width:21px;
    height:2px;
    background:currentColor;
    position:relative;
  }
  .nav-burger span::before,.nav-burger span::after {
    content:'';
    position:absolute;
    left:0;
    top:-6px;
  }
  .nav-burger span::after {
    top:6px;
  }
  .nav-burger[aria-expanded=true] span {
    background:transparent;
  }
  .nav-burger[aria-expanded=true] span::before {
    top:0;
    transform:rotate(45deg);
  }
  .nav-burger[aria-expanded=true] span::after {
    top:0;
    transform:rotate(-45deg);
  }
  .site-nav {
    position:absolute;
    inset:100% 0 auto;
    background:#fff;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    margin:0;
    padding:12px var(--gutter) 25px;
    border-bottom:1px solid var(--line);
    box-shadow:0 20px 30px #0e293018;
    visibility:hidden;
    max-height:calc(100dvh - 72px);
    overflow:auto;
  }
  .site-nav a {
    display:block;
    font-size:19px;
    padding:14px 0;
    border-bottom:1px solid var(--line);
  }
  .site-nav .nav-mail {
    display:block;
    font-size:14px;
    color:var(--ember-ink);
    border:0;
    padding-top:22px;
  }
  .nav-burger[aria-expanded=true]~.site-nav {
    visibility:visible;
  }
  html:not(.nav-enhanced) .header-inner {
    flex-wrap:wrap;
  }
  html:not(.nav-enhanced) .site-nav {
    position:static;
    visibility:visible;
    order:20;
    width:100%;
    box-shadow:none;
    border:0;
    padding:0 0 15px;
  }
  html:not(.nav-enhanced) .nav-burger {
    display:none;
  }
  .hero-grid {
    grid-template-columns:1fr;
    min-height:auto;
  }
  .hero-copy {
    padding:40px 0 0;
  }
  .hero h1 {
    font-size:clamp(59px,11vw,80px);
    max-width:none;
    line-height:1.02;
  }
  .hero h1 br:nth-child(2) {
    display:none;
  }
  .hero h1 span {
    display:block;
  }
  .hero-description {
    font-size:17px;
    margin-top:26px;
  }
  .studio-status {
    font-size:12px;
    margin-bottom:24px;
    gap:8px;
  }
  .hero-note {
    font-size:12px;
    margin-top:23px;
  }
  .hero .actions {
    gap:25px;
  }
  .hero-spectrum {
    left:18%;
    top:480px;
    width:160%;
    height:375px;
    transform:rotate(-17deg);
    opacity:.8;
  }
  .hero-visual {
    height:593px;
    width:100%;
    max-width:450px;
    justify-self:center;
    align-self:center;
    margin-top:22px;
  }
  .hero-phone {
    left:15px;
    top:40px;
    width:250px;
  }
  .hero-report {
    top:81px;
    left:198px;
    width:243px;
  }
  .hero-readout {
    top:441px;
    left:135px;
    width:290px;
    padding:16px;
  }
  .hero-readout svg {
    width:56px;
  }
  .hero-caption {
    bottom:14px;
    left:16px;
    font-size:12px;
  }
  .hero::after {
    display:none;
  }
  .rail-grid {
    grid-template-columns:1fr;
  }
  .rail-grid>a,.rail-grid>a:first-child {
    padding:20px 0;
    border-right:0;
    border-bottom:1px solid var(--line);
    gap:17px;
  }
  .rail-grid>a:last-child {
    border-bottom:0;
  }
  .rail-grid img {
    width:39px;
    height:39px;
  }
  .rail-grid strong {
    font-size:16px;
  }
  .rail-grid small {
    font-size:12px;
  }
  .rail-arrow {
    display:block;
    margin-left:auto;
  }
  .product-suite {
    padding:75px 0 60px;
  }
  .suite-intro {
    grid-template-columns:1fr;
    gap:24px;
    margin-bottom:31px;
  }
  .suite-intro h2 {
    font-size:35px;
  }
  .suite-intro>p {
    max-width:45ch;
    font-size:16px;
  }
  .product-tabs {
    gap:24px;
    overflow-x:auto;
    scrollbar-width:none;
    margin-bottom:0;
  }
  .product-tabs button {
    font-size:12px;
    gap:7px;
    padding:14px 0;
    flex:none;
  }
  .product-tabs img {
    width:22px;
    height:22px;
  }
  .pane-grid,.chapter-grid {
    grid-template-columns:1fr;
    gap:0;
  }
  .product-copy {
    padding:35px 0 0;
  }
  .product-identity {
    margin-bottom:26px;
    font-size:23px;
  }
  .product-copy h3,.product-copy h2 {
    font-size:36px;
  }
  .product-copy>p:not(.eyebrow):not(.availability) {
    max-width:43ch;
    font-size:17px;
  }
  .feature-list {
    font-size:14px;
  }
  .availability {
    font-size:12px;
    line-height:1.8;
  }
  .product-display {
    height:560px;
    width:100%;
    max-width:470px;
    margin:25px auto 0;
  }
  .screen-frame {
    width:250px;
    left:27px;
  }
  .result-callout {
    left:max(0px,calc(50% - 210px));
    top:326px;
    min-width:220px;
    padding:19px 24px;
  }
  .result-callout strong {
    font-size:41px;
  }
  .readout-label {
    font-size:9px;
  }
  .readout-foot {
    font-size:10px;
  }
  .product-display figcaption {
    bottom:0;
    font-size:12px;
  }
  .principles-heading h2 {
    font-size:38px;
  }
  .principles-heading>p:last-child {
    font-size:17px;
  }
  .principles-heading {
    margin-bottom:40px;
  }
  .principles-grid {
    grid-template-columns:1fr;
    gap:34px;
  }
  .principles-grid>div {
    padding-left:22px;
  }
  .principle-symbol {
    margin-bottom:14px;
  }
  .principles-grid h3 {
    font-size:19px;
    margin-bottom:11px;
  }
  .principles-grid p {
    max-width:42ch;
    font-size:16px;
  }
  .studio-grid,.contact-grid,.release-grid {
    grid-template-columns:1fr;
    gap:30px;
  }
  .studio-grid h2,.release-grid h2 {
    font-size:36px;
  }
  .studio-grid>div>p:not(.eyebrow),.contact-grid>div>p:not(.eyebrow),.release-grid>div>p:not(.eyebrow) {
    font-size:17px;
  }
  .contact-section {
    padding:76px 0;
  }
  .contact-grid h2 {
    font-size:49px;
  }
  .contact-grid {
    gap:27px;
  }
  .footer-grid {
    grid-template-columns:1fr 1fr;
    gap:38px;
  }
  .legal-block {
    grid-column:1/-1;
  }
  .footer-col h2 {
    margin-bottom:16px;
  }
  .footer-bottom {
    flex-direction:column;
    gap:16px;
    margin-top:30px;
  }
  .site-footer {
    padding:50px 0 25px;
  }
  .page-head {
    padding:58px 0 48px;
  }
  .page-head h1 {
    font-size:46px;
  }
  .page-head .lead {
    font-size:18px;
  }
  .apps-head {
    padding-bottom:0;
  }
  .apps-head h1 {
    font-size:65px;
  }
  .apps-head::before {
    left:67%;
    opacity:.55;
  }
  .preview-notice {
    font-size:13px;
    margin:25px 0 33px;
    align-items:flex-start;
    line-height:1.6;
  }
  .preview-notice .status-dot {
    margin-top:8px;
  }
  .app-jump {
    gap:16px;
    flex-wrap:wrap;
    justify-content:space-between;
    padding:20px 0;
  }
  .app-jump a {
    font-size:12px;
    gap:8px;
  }
  .app-jump img {
    width:24px;
    height:24px;
  }
  .app-jump a>span {
    display:none;
  }
  .product-chapter {
    padding:36px 0 60px;
  }
  .product-chapter .product-copy {
    padding-top:20px;
  }
  .product-chapter:nth-of-type(2) .product-copy {
    order:0;
  }
  .product-chapter .product-display {
    height:575px;
    margin-top:39px;
  }
  .product-chapter .result-callout {
    left:10px;
  }
  .row {
    grid-template-columns:1fr;
    gap:20px;
    padding:34px 0;
  }
  .row>h2 {
    max-width:none;
    font-size:25px;
  }
  .prose {
    font-size:16px;
  }
  .prose h2 {
    font-size:25px;
  }
  .record>div,.factlist>div {
    grid-template-columns:1fr;
    gap:6px;
  }
  .legal {
    grid-template-columns:1fr;
    gap:35px;
  }
  .toc {
    position:static;
  }
  .toc ol {
    columns:2;
    column-gap:25px;
  }
  .toc li {
    break-inside:avoid;
  }
  .toc a {
    font-size:12px;
  }
  .split,.cta-grid {
    grid-template-columns:1fr;
    gap:30px;
  }
  .pillars {
    grid-template-columns:1fr;
  }
  .cta {
    padding:29px;
  }
  .note {
    padding:20px;
  }
  .app dl {
    grid-template-columns:1fr;
  }
  .app dd {
    margin-bottom:14px;
  }
}

@media(max-width:399px) {
  :root {
    --gutter:20px;
  }
  .nav-cta {
    display:none;
  }
  .nav-burger {
    margin-left:auto;
  }
  .hero h1 {
    font-size:59px;
  }
  .hero-visual {
    height:545px;
    margin-top:27px;
  }
  .hero-phone {
    left:6px;
    width:229px;
  }
  .hero-report {
    left:164px;
    top:83px;
    width:226px;
  }
  .hero-readout {
    left:92px;
    top:410px;
    width:282px;
  }
  .hero-caption {
    font-size:12px;
    left:7px;
    bottom:12px;
  }
  .hero .actions {
    gap:20px;
  }
  .hero .btn {
    font-size:13px;
    padding-inline:16px;
    gap:13px;
  }
  .hero .text-link {
    font-size:13px;
    gap:10px;
  }
  .studio-status {
    font-size:12px;
  }
  .product-tabs {
    gap:17px;
  }
  .product-tabs button {
    font-size:12px;
    gap:6px;
  }
  .product-tabs img {
    width:20px;
    height:20px;
  }
  .suite-intro h2 {
    font-size:32px;
  }
  .app-jump {
    gap:14px;
    justify-content:flex-start;
  }
  .app-jump a {
    font-size:12px;
  }
  .app-jump img {
    width:21px;
    height:21px;
  }
  .screen-frame {
    width:229px;
    left:22px;
  }
  .product-display {
    height:530px;
  }
  .product-chapter .product-display {
    height:550px;
  }
  .product-display .result-callout {
    min-width:204px;
    left:0;
    top:321px;
    padding:17px 20px;
  }
  .availability .platform {
    border:0;
    margin:0;
    padding-left:14px;
    width:100%;
  }
  .feature-list {
    font-size:13px;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
  }
  .btn:hover,.btn:hover span,.text-link:hover span {
    transform:none;
  }
}

@media print {
  .site-header,.product-tabs,.skip-link,.hero-spectrum,.nav-cta,.actions {
    display:none!important;
  }
  body {
    color:#000;
    background:#fff;
    font-size:11pt;
  }
  section {
    padding:25px 0;
  }
  .container {
    padding:0;
  }
  .hero-grid,.pane-grid,.chapter-grid,.studio-grid,.contact-grid,.release-grid,.row,.legal {
    display:block;
  }
  .hero h1 {
    font-size:40pt;
  }
  .hero-visual {
    display:none;
  }
  .product-suite,.release-section {
    background:#fff;
    color:#000;
  }
  .product-suite h2,.product-suite .product-copy h3,.product-suite .product-identity,.release-section h2 {
    color:#000;
  }
  .product-pane[hidden] {
    display:block;
  }
  .product-display {
    break-inside:avoid;
  }
  .site-footer {
    background:#fff;
  }
  .product-copy {
    break-inside:avoid;
  }
  .product-tabs {
    display:none;
  }
  .toc {
    position:static;
  }
  .btn {
    border:1px solid #000;
    background:#fff;
    color:#000;
  }
}