/* nomnetic.com holding site (NOM-103). Tokens only: colors, type, spacing and radii come from tokens.css,
   which also switches light and dark with the system setting. */
@font-face{font-family:"Archivo";font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url("/fonts/Archivo-Variable-latin.woff2") format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url("/fonts/Archivo-Variable-latin-ext.woff2") format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:light dark}
body{margin:0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;background:var(--color-bg-canvas);color:var(--color-text-primary);
 font-family:var(--font-sans);font-size:var(--type-body-l-size);line-height:var(--type-body-l-line)}
a{color:var(--color-text-link);text-underline-offset:0.2em}
a:focus-visible,.button:focus-visible{outline:var(--size-stroke-focus) solid var(--color-border-focus);outline-offset:var(--space-1);border-radius:var(--radius-xs)}
img{display:block;max-width:100%;height:auto}

.bar{width:100%;max-width:var(--size-layout-content-max);margin:0 auto;padding:0 var(--size-layout-gutter-compact);display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
.top{padding:var(--space-5) 0}
.brand{display:inline-flex;min-height:var(--size-touch-min);align-items:center}
.brand img{width:calc(var(--space-24) + var(--space-16));height:auto}

.button{display:inline-flex;align-items:center;justify-content:center;min-height:var(--size-control-button-lg);padding:0 var(--space-8);border-radius:var(--radius-full);
 background:var(--color-accent-default);color:var(--color-text-on-accent);text-decoration:none;font-size:var(--type-label-l-size);line-height:var(--type-label-l-line);font-weight:var(--type-label-l-weight)}
.button:hover{background:var(--color-accent-pressed)}
.button.small{min-height:var(--size-touch-min);padding:0 var(--space-5);font-size:var(--type-label-m-size);line-height:var(--type-label-m-line)}

/* Home: independent sections (hero, saying, product, plans). Each section owns its layout. */
.wrap{width:100%;max-width:var(--size-layout-content-max);margin:0 auto;padding:0 var(--size-layout-gutter-compact)}
.kicker{margin:0 0 var(--space-3);color:var(--color-accent-soft-text);font-size:var(--type-label-m-size);line-height:var(--type-label-m-line);font-weight:var(--type-label-m-weight);letter-spacing:var(--type-caption-tracking);text-transform:uppercase}
.fine{margin:var(--space-4) 0 0;color:var(--color-text-tertiary);font-size:var(--type-body-s-size);line-height:var(--type-body-s-line)}
.center{text-align:center}
h2{margin:0;font-size:var(--type-title-l-size);line-height:var(--type-title-l-line);font-weight:var(--type-display-weight);font-stretch:var(--type-title-l-width);letter-spacing:var(--type-title-l-tracking);text-wrap:balance}
h3{margin:var(--space-5) 0 var(--space-2);font-size:var(--type-title-m-size);line-height:var(--type-title-m-line);font-weight:var(--type-title-m-weight);font-stretch:var(--type-title-m-width);letter-spacing:var(--type-title-m-tracking)}
.section-head{max-width:var(--size-layout-reading-max);margin-bottom:var(--space-10)}
.section-head p:not(.kicker){margin:var(--space-4) 0 0;color:var(--color-text-secondary)}

/* A real screenshot in a plain device frame: the frame is drawn here; the image is untouched. */
.device{margin:0;padding:var(--space-2);border-radius:calc(var(--radius-xl) + var(--space-2));background:var(--color-bg-inverse);box-shadow:var(--shadow-3)}
.device img{width:100%;border-radius:var(--radius-xl)}
/* The inverse surface flips to light in dark mode; a phone bezel should stay dark, so dark mode uses the raised surface with a hairline edge. */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .device{background:var(--color-bg-raised);box-shadow:0 0 0 var(--size-stroke-border) var(--color-border-strong),var(--shadow-3)}}
:root[data-theme="dark"] .device{background:var(--color-bg-raised);box-shadow:0 0 0 var(--size-stroke-border) var(--color-border-strong),var(--shadow-3)}

.button.secondary{background:transparent;color:var(--color-text-primary);border:var(--size-stroke-border) solid var(--color-border-strong)}
.button.secondary:hover{background:var(--color-bg-pressed)}

.home{background:var(--color-bg-canvas)}
.hero{padding:var(--space-6) 0 var(--space-16);background:radial-gradient(90% 70% at 85% 10%,var(--color-accent-soft),transparent 70%)}
.hero-grid{display:grid;gap:var(--space-12);align-items:center}
.hero h1{margin:0;font-size:var(--type-title-l-size);line-height:var(--type-title-l-line);font-weight:var(--type-display-weight);font-stretch:var(--type-title-l-width);letter-spacing:var(--type-title-l-tracking);text-wrap:balance}
.lede{margin:var(--space-5) 0 0;max-width:var(--size-layout-sheet-max);color:var(--color-text-secondary)}
.actions{margin-top:var(--space-8);display:flex;flex-wrap:wrap;gap:var(--space-3)}
.hero-shot{width:78%;max-width:calc(var(--space-24) * 3.5);margin:0 auto}

.band{padding:var(--space-16) 0;background:var(--color-bg-surface);border-block:var(--size-stroke-border) solid var(--color-border-subtle)}
.saying-grid{display:grid;gap:var(--space-12);align-items:center}
.saying-copy h2{margin-bottom:var(--space-8)}
.chat{margin:0;display:grid;gap:var(--space-3);padding:var(--space-6);border-radius:var(--radius-lg);background:var(--color-bg-canvas);border:var(--size-stroke-border) solid var(--color-border-subtle)}
.msg{margin:0;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);font-size:var(--type-body-m-size);line-height:var(--type-body-m-line);max-width:90%}
.msg.you{justify-self:end;background:var(--color-accent-default);color:var(--color-text-on-accent);border-bottom-right-radius:var(--radius-xs)}
.msg.them{justify-self:start;background:var(--color-bg-surface);color:var(--color-text-primary);border:var(--size-stroke-border) solid var(--color-border-subtle);border-bottom-left-radius:var(--radius-xs)}
.tool{margin:var(--space-1) 0 0;color:var(--color-text-tertiary);font-size:var(--type-caption-size);line-height:var(--type-caption-line);font-weight:var(--type-caption-weight)}
.chat figcaption{margin-top:var(--space-2);padding-top:var(--space-3);border-top:var(--size-stroke-border) solid var(--color-border-subtle);color:var(--color-text-tertiary);font-size:var(--type-body-s-size);line-height:var(--type-body-s-line)}
.hosts{list-style:none;margin:var(--space-6) 0 0;padding:0;display:grid;gap:var(--space-3)}
.hosts li{color:var(--color-text-secondary);font-size:var(--type-body-m-size);line-height:var(--type-body-m-line)}
.hosts strong{display:block;color:var(--color-text-primary);font-size:var(--type-label-l-size);line-height:var(--type-label-l-line);font-weight:var(--type-label-l-weight)}
.saying-shot{width:72%;max-width:calc(var(--space-24) * 3);margin:0 auto}

.product{padding:var(--space-16) 0}
.trio{display:grid;gap:var(--space-12)}
.tile .device{width:72%;max-width:calc(var(--space-24) * 3);margin:0 auto}
.tile h3,.tile p{max-width:calc(var(--space-24) * 3.5);margin-left:auto;margin-right:auto}
.tile p{margin-top:0;color:var(--color-text-secondary);font-size:var(--type-body-m-size);line-height:var(--type-body-m-line)}

.plans{display:grid;gap:var(--space-5)}
.plan{display:flex;flex-direction:column;padding:var(--space-8);border-radius:var(--radius-lg);background:var(--color-bg-canvas);border:var(--size-stroke-border) solid var(--color-border-default)}
.plan.pro{border:var(--size-stroke-focus) solid var(--color-accent-default)}
.plan h3{margin:0}
.plan-line{margin:var(--space-1) 0 var(--space-6);color:var(--color-text-secondary)}
.amount{margin:0;font-size:var(--type-display-size);line-height:var(--type-display-line);font-weight:var(--type-display-weight);font-stretch:var(--type-display-width);letter-spacing:var(--type-display-tracking)}
.amount span{font-size:var(--type-body-m-size);font-weight:var(--font-weight-regular);font-stretch:var(--font-width-normal);letter-spacing:0;color:var(--color-text-secondary)}
.alt{margin:var(--space-1) 0 0;color:var(--color-text-secondary);font-size:var(--type-body-m-size)}
.plan ul{flex:1;margin:var(--space-6) 0 var(--space-8);padding:0;list-style:none;display:grid;gap:var(--space-3);align-content:start}
.plan li{padding-left:var(--space-6);position:relative;font-size:var(--type-body-m-size);line-height:var(--type-body-m-line)}
.plan li::before{content:"";position:absolute;left:0;top:calc(var(--type-body-m-line) / 2 - var(--space-1));width:var(--space-2);height:var(--space-2);border-radius:var(--radius-full);background:var(--color-accent-default)}
.plan .button{align-self:flex-start}

.foot{padding:var(--space-6) 0 var(--space-8);border-top:var(--size-stroke-border) solid var(--color-border-subtle);color:var(--color-text-tertiary);font-size:var(--type-body-s-size);line-height:var(--type-body-s-line)}
.foot .bar{flex-wrap:wrap}
.foot nav{display:flex;gap:var(--space-2)}
.foot a,.foot .link{display:inline-flex;align-items:center;min-height:var(--size-touch-min);padding:0 var(--space-2);color:var(--color-text-secondary);font-size:var(--type-label-m-size);font-weight:var(--type-label-m-weight)}

/* Privacy and Terms: a reading column. */
.reading{flex:1;width:100%;max-width:calc(var(--size-layout-reading-max) + 2 * var(--size-layout-gutter-compact));margin:0 auto;padding:var(--space-8) var(--size-layout-gutter-compact) var(--space-16)}
.reading h1{margin:0 0 var(--space-3);font-size:var(--type-title-l-size);line-height:var(--type-title-l-line);font-weight:var(--type-title-l-weight);font-stretch:var(--type-title-l-width);letter-spacing:var(--type-title-l-tracking)}
.reading h1+p{margin-top:0;color:var(--color-text-secondary);font-size:var(--type-body-m-size);line-height:var(--type-body-m-line)}
.reading h2{margin:var(--space-10) 0 var(--space-3);font-size:var(--type-title-m-size);line-height:var(--type-title-m-line);font-weight:var(--type-title-m-weight);font-stretch:var(--type-title-m-width)}
.reading p,.reading li{color:var(--color-text-primary)}
.reading ul,.reading ol{padding-left:var(--space-6)}
.reading li{margin:var(--space-3) 0}
.reading ol>li::marker{color:var(--color-text-tertiary);font-weight:var(--font-weight-semibold)}
.missing{text-align:center;align-content:center;display:grid}

@media (min-width:768px){
 .bar{padding:0 var(--size-layout-gutter-medium)}
 .wrap{padding:0 var(--size-layout-gutter-medium)}
 .hero h1{font-size:var(--type-display-size);line-height:var(--type-display-line);letter-spacing:var(--type-display-tracking);font-stretch:var(--type-display-width)}
 h2{font-size:var(--type-display-size);line-height:var(--type-display-line);letter-spacing:var(--type-display-tracking);font-stretch:var(--type-display-width)}
 .plans{grid-template-columns:1fr 1fr}
 .trio{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-8)}
 .tile .device{width:100%}
 .reading h1{font-size:var(--type-display-size);line-height:var(--type-display-line);font-weight:var(--type-display-weight);font-stretch:var(--type-display-width);letter-spacing:var(--type-display-tracking)}
}
@media (min-width:1024px){
 .bar{padding:0 var(--size-layout-gutter-expanded)}
 .wrap{padding:0 var(--size-layout-gutter-expanded)}
 .hero{padding:var(--space-12) 0 var(--space-20)}
 .hero-grid,.saying-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--space-16)}
 .hero-shot,.saying-shot{width:100%}
 .band,.product{padding:var(--space-24) 0}
 .trio{gap:var(--space-12)}
}
@media (prefers-reduced-motion:no-preference){.button{transition:background-color var(--duration-fast) var(--ease-standard)}}

/* NOM-111: the website analytics notice. Shown only where consent is asked for, until a choice is made. */
.foot .link{background:none;border:0;cursor:pointer;font-family:inherit}
.consent{position:fixed;left:var(--space-4);right:var(--space-4);bottom:var(--space-4);z-index:10;max-width:var(--size-layout-sheet-max);margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-4);padding:var(--space-4) var(--space-5);border-radius:var(--radius-lg);background:var(--color-bg-raised);color:var(--color-text-primary);border:var(--size-stroke-border) solid var(--color-border-subtle);box-shadow:var(--shadow-3)}
.consent p{margin:0;flex:1 1 240px;font-size:var(--type-body-s-size);line-height:var(--type-body-s-line)}
.consent a{color:var(--color-text-link)}
.consent-actions{display:flex;gap:var(--space-2)}