@charset "utf-8";
/* ==========================================================================
   Navis Dash — site stylesheet
   Rebuilt from the Figma file as a fluid, flow-based responsive system.
   The Figma artboard is a fixed 1440px canvas of absolutely-positioned
   layers. Nothing here is absolutely positioned for layout: every section
   is flex or grid, every size is fluid, and the designed 1440px view is
   simply the widest state of the same system.

   Breakpoints
     ≥1240   full designed layout
     1024    condensed desktop
     900     tablet — pill nav becomes a drawer
     720     large phone — grids collapse to one column
     460     small phone
   ========================================================================== */

/* --------------------------------------------------------------- 1. Fonts */
@font-face{font-family:Outfit;src:url(../fonts/outfit-latin-300-normal.woff2)format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:Outfit;src:url(../fonts/outfit-latin-400-normal.woff2)format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Outfit;src:url(../fonts/outfit-latin-500-normal.woff2)format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Outfit;src:url(../fonts/outfit-latin-600-normal.woff2)format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Outfit;src:url(../fonts/outfit-latin-700-normal.woff2)format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Outfit;src:url(../fonts/outfit-latin-800-normal.woff2)format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url(../fonts/instrument-serif-latin-400-normal.woff2)format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url(../fonts/instrument-serif-latin-400-italic.woff2)format('woff2');font-weight:400;font-style:italic;font-display:swap}

/* -------------------------------------------------------------- 2. Tokens */
:root{
  /* ink + surfaces */
  --ink:#22282b;          /* footer / navbar / logo type            */
  --ink-2:#2e2e2e;        /* headings                               */
  --ink-3:#14161b;        /* button type on light                   */
  --body:#616161;         /* body copy                              */
  --muted:#8a8f92;
  --line:#e8e8e8;
  --page:#ffffff;
  --page-2:#f7f8f9;
  --panel:#f6f6f6;

  /* brand */
  --red:#e74328;
  --red-55:#e23950;
  --pink:#f0a4c1;
  --pink-hot:#f7a9cf;      /* button hover fill                       */
  --blue-hot:#cfe9f8;      /* light button hover fill                 */
  --pink-2:#e98ab8;
  --lime:#b3d23b;
  --yellow:#f7d85e;
  --amber:#fcd34d;
  --chartreuse:#dfe456;

  /* tinted surfaces, straight from the file */
  --t-pink:#ffe7f6;
  --t-pink-2:#fbdae3;
  --t-blue:#cce1fe;
  --t-blue-2:#cbe9ff;
  --t-blue-3:#e0f2fe;
  --t-green:#e1f1c0;
  --t-yellow:#fef3c7;
  --t-cream:#fef5ce;
  --t-cyan:#cfeff4;
  --t-coral:#ffb298;
  --t-lav:rgba(220,220,228,.5);

  /* card inks used on the About mosaic */
  --ink-name:#e5cd68;
  --ink-quiet:#f5acd9;
  --ink-honest:#83bee9;
  --ink-own:#a1c557;
  --ink-small:#de7856;

  /* metrics
     The artboard is drawn at 1440. On a real 14" laptop that scale reads
     shouty, so the whole system is stepped down by --ui and the column is
     narrower than the drawn 1196, which leaves the page margins the design
     never had to think about. Set --ui:1 and the widths below back to
     1196/1376/1218 to return to the literal artboard. */
  --ui:.84;               /* global scale against the 1440 artboard  */
  --w-page:1060px;        /* editorial column   (drawn 1196)         */
  --w-wide:1180px;        /* footer shell       (drawn 1376)         */
  --w-head:1120px;        /* header shell       (drawn 1218)         */
  --head-h:clamp(62px,5.9vw,84px);
  --gutter:clamp(20px,4.6vw,64px);
  --radius-card:24px;
  --radius-shell:clamp(24px,3vw,46px);

  /* fluid type — the drawn size times --ui is the ceiling */
  --fs-display:clamp(2.35rem,6.1vw,calc(5.05rem * var(--ui)));   /* → 67.8 */
  --fs-h1:clamp(1.95rem,4.35vw,calc(4.625rem * var(--ui)));      /* → 62.2 */
  --fs-h2:clamp(1.8rem,3.7vw,calc(4.625rem * var(--ui)));        /* → 62.2 */
  --fs-h3:clamp(1.5rem,2.7vw,calc(2.8125rem * var(--ui)));       /* → 37.8 */
  --fs-lead:clamp(1rem,1.62vw,calc(1.75rem * var(--ui)));        /* → 23.5 */
  --fs-body:clamp(.9375rem,1.1vw,calc(1.25rem * var(--ui)));     /* → 16.8 */
  --fs-sm:clamp(.875rem,1vw,calc(1rem * var(--ui)));

  --shadow-card:4px 8px 30px rgba(183,183,183,.25);
  --shadow-lift:0 18px 52px -10px rgba(0,0,0,.21);
  --shadow-dark:0 18px 52px -10px rgba(0,0,0,.38);
}

/* --------------------------------------------------------------- 3. Reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--page);color:var(--body);
  font-family:Outfit,'Segoe UI',system-ui,-apple-system,sans-serif;
  font-size:var(--fs-body);line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:#fff;padding:12px 20px;border-radius:0 0 12px 0}
.skip:focus{left:0}

/* ------------------------------------------------------ 4. Layout helpers */
.wrap{width:100%;max-width:calc(var(--w-page) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--wide{max-width:calc(var(--w-wide) + var(--gutter)*2)}
.wrap--head{max-width:calc(var(--w-head) + var(--gutter)*2)}
.section{padding-block:clamp(28px,5.7vw,62px)}
.section--tight{padding-block:clamp(24px,4.3vw,48px)}
/* sections whose decorative stroke runs off the page keep it off the scrollbar */
.section--clip{overflow:hidden}
.stack{display:flex;flex-direction:column}
.center{text-align:center;margin-inline:auto}

/* --------------------------------------------------------- 5. Typography */
.serif{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400}
.display{
  font-size:var(--fs-display);line-height:1;letter-spacing:-.02em;
  font-weight:700;color:var(--ink);text-transform:capitalize;text-wrap:balance;
}
.h1{font-size:var(--fs-h1);line-height:1;letter-spacing:0;font-weight:700;color:var(--ink-2);text-wrap:balance}
.h2{font-size:var(--fs-h2);line-height:1;letter-spacing:0;font-weight:700;color:var(--ink-2);text-wrap:balance}
.h3{font-size:var(--fs-h3);line-height:1.05;font-weight:600;color:var(--ink-2);text-wrap:balance}
.lead{font-size:var(--fs-lead);line-height:1.5;color:var(--body);text-wrap:pretty}
.small{font-size:var(--fs-sm);line-height:1.5}
.eyebrow{font-size:clamp(.625rem,.9vw,.75rem);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}

/* the marker-pen highlight behind a phrase */
.mark{position:relative;display:inline;padding:0 .1em;border-radius:8px;
  background:linear-gradient(180deg,transparent 20%,var(--mark,var(--t-yellow)) 20%,var(--mark,var(--t-yellow)) 97%,transparent 97%);
  box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* pills */
.pill{display:inline-flex;align-items:center;justify-content:center;
  padding:.34em 1.15em;border-radius:99px;font-size:clamp(.9375rem,1.63vw,calc(1.75rem * var(--ui)));
  font-weight:400;line-height:1.5;color:#fff}
.pill--red{background:var(--red)}
.pill--pink{background:var(--pink-2)}
.pill--lime{background:var(--lime)}
.pill--blue{background:var(--t-blue-3);color:var(--ink-2)}
.pill--amber{background:var(--amber);color:#000;font-size:1rem;padding:4px 12px}
.pill--tint{background:var(--t-yellow);color:var(--ink-2);font-size:clamp(.9375rem,1.3vw,1.125rem);padding:.55em 1.4em}

/* ------------------------------------------------------------ 6. Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:56px;padding:16px 24px;border-radius:188px;border:0;cursor:pointer;
  font-size:16px;font-weight:600;line-height:24px;position:relative;overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease;white-space:nowrap;
}
.btn svg{width:24px;height:24px;flex:none}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}

.btn--dark{
  color:#fff;box-shadow:var(--shadow-dark);transition:transform .18s ease,box-shadow .18s ease,
    background-color .2s ease,color .2s ease;
  background:radial-gradient(ellipse 92.86% 68.28% at 50.28% 92.86%,#727272 0%,#282828 50%,#111111 100%);
}
.btn--dark::before{content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:0 8px 18px -2px rgba(255,255,255,.28) inset;pointer-events:none;
  transition:opacity .18s ease}
.btn--dark::after{content:"";position:absolute;left:6px;right:6px;top:40%;bottom:6px;
  border-radius:80px;mix-blend-mode:lighten;pointer-events:none;transition:opacity .18s ease;
  background:linear-gradient(180deg,rgba(17,17,17,.8),rgba(17,17,17,.4))}
.btn--dark:hover{background:var(--pink-hot);color:var(--ink-3);
  box-shadow:0 18px 46px -14px rgba(247,169,207,.6)}
.btn--dark:hover::before,.btn--dark:hover::after{opacity:0}

.btn--light{
  color:var(--ink-3);box-shadow:var(--shadow-lift);
  border:1px solid var(--yellow);
  background:linear-gradient(170.45deg,rgba(247,216,94,.28) 0%,rgba(248,191,213,.28) 34%,rgba(207,239,244,.28) 68%,rgba(205,239,225,.28) 100%),rgba(255,255,255,.9);
}
.btn--light:hover{background:var(--blue-hot);border-color:var(--pink);
  box-shadow:0 18px 46px -16px rgba(34,40,43,.24)}
.btn--ink{background:var(--ink-2);color:#fff;border-radius:99px;min-height:58px}
.btn--ghost{background:transparent;border:1px solid var(--ink);color:var(--ink);min-height:50px;
  border-radius:100px;font-size:14px;font-weight:500;transition:background-color .18s ease,transform .18s ease}
.btn--ghost:hover{background:var(--pink-hot);color:var(--ink)}
.btn--block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:clamp(16px,3vw,40px);justify-content:center}
.btn-row--phone{display:none;margin-top:clamp(22px,6vw,30px)}
@media (max-width:760px){.btn-row--phone{display:flex}}

/* ------------------------------------------------------- 7. Announcement */
/* The bar scrolls. Two identical sets slide -50% of the track, so the second
   lands exactly where the first began and the loop has no seam. The whole bar
   is the link — a moving target is hard to hit otherwise. */
.announce{background:var(--ink);color:rgba(255,255,255,.85);min-height:40px;
  display:flex;align-items:center;overflow:hidden;
  font-size:clamp(.75rem,1.2vw,1rem);line-height:1.4}
.ticker{display:block;width:100%;padding-block:9px;color:inherit;text-decoration:none;
  -webkit-tap-highlight-color:transparent}
.ticker__track{display:flex;width:max-content;
  animation:ticker 18s linear infinite;will-change:transform}
.ticker__set{display:flex;align-items:center;white-space:nowrap}
.ticker__item{padding-inline:clamp(12px,1.6vw,22px)}
.ticker__item b{font-weight:600;color:#fff}
.ticker__sep{color:var(--lime);font-size:.8em;opacity:.9;transform:translateY(-1px)}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Hold it still so a line can be read, and while a finger is on it. */
.announce:hover .ticker__track,
.ticker:focus-visible .ticker__track,
.ticker:active .ticker__track{animation-play-state:paused}
.ticker:focus-visible{outline:2px solid var(--lime);outline-offset:-3px}
@media (hover:hover){.ticker:hover .ticker__item b{color:var(--lime)}}
/* No motion: hold still and show only the line that matters. Children run
   item, separator, item, … so keeping the first three keeps the news and the
   offer; the rest would be a wall of text nobody asked to read. */
@media (prefers-reduced-motion:reduce){
  .ticker__track{animation:none;width:100%;justify-content:center;flex-wrap:wrap}
  .ticker__set + .ticker__set{display:none}
  .ticker__set{white-space:normal;justify-content:center;text-align:center}
  .ticker__set > :nth-child(n+4){display:none}
}

/* ------------------------------------------------------------ 8. Header
   In the file the navbar floats on the hero wash — no bar, no rule. It only
   grows a surface once the page has scrolled away from that backdrop.
   -------------------------------------------------------------------------- */
.header{position:sticky;top:0;z-index:60;background:transparent;
  transition:background-color .25s ease,box-shadow .25s ease,backdrop-filter .25s ease}
/* The file gives the navbar no surface at all. On scroll it does not grow a
   bar across the page — it lifts off the top edge and becomes a floating pane
   of glass, the way everything else here sits on the page. */
.header{padding-top:0;padding-inline:var(--gutter);
  transition:padding-top .28s cubic-bezier(.22,.9,.3,1)}
.header.is-stuck{padding-top:clamp(8px,1vw,14px)}
.header__inner{border-radius:100px;
  max-width:var(--w-wide);margin-inline:auto;
  padding-inline:clamp(14px,1.6vw,22px);
  transition:background-color .28s ease,box-shadow .28s ease,border-color .28s ease,
             backdrop-filter .28s ease;
  border:1px solid transparent}
.header.is-stuck .header__inner{
  background:rgba(255,255,255,.42);border-color:rgba(255,255,255,.6);
  backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);
  box-shadow:0 14px 40px -18px rgba(34,40,43,.28),0 1px 2px rgba(34,40,43,.05)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .header.is-stuck .header__inner{background:rgba(255,255,255,.93)}
}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:var(--head-h)}
/* the header floats over whatever the page opens with, so the first section
   of a page that is not the hero has to carry the header's height plus the
   clearance the artboard leaves under it */
main{margin-top:calc(-1 * var(--head-h))}
main > .section:first-child{padding-top:calc(var(--head-h) + clamp(40px,5.6vw,86px))}

.brand{display:inline-flex;align-items:center;gap:6px;flex:none}
.brand__mark{width:clamp(38px,3.5vw,50px);height:auto;flex:none}
.brand__text{font-size:clamp(1.125rem,1.67vw,1.5rem);font-weight:700;color:var(--ink);
  text-transform:capitalize;line-height:.87;letter-spacing:-.02em;
  transition:opacity .22s ease,max-width .3s ease,margin .3s ease}
/* once the page is moving, the phone header keeps the mark and drops the word */
@media (max-width:900px){
  .header.is-stuck .brand__text{opacity:0;max-width:0;margin-left:-6px;overflow:hidden;
    pointer-events:none}
}
.brand__text .serif{font-weight:400}

/* Navbar — 525x48 pill, 40px home chip outlined in #ecd9b1 */
.nav{display:flex;align-items:center;justify-content:space-between;
  width:525px;max-width:100%;height:48px;padding:0 26px 0 6px;
  background:var(--ink);border:1px solid rgba(255,255,255,.08);border-radius:100px}
.nav__item{position:relative;display:inline-flex;align-items:center}
.nav a{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:16px;line-height:20px;letter-spacing:-.01em;text-transform:capitalize;
  color:rgba(255,255,255,.7);transition:color .15s}
.nav a:hover,.nav a[aria-current]{color:#fff}
.nav svg{width:20px;height:20px;flex:none}
.nav__item--on{width:94px;height:40px;border-radius:100px;border:1px solid #ecd9b1}
.nav__item--on a{width:100%;height:100%}

.header__cta{display:flex;align-items:center;gap:12px;flex:none}
/* the trigger wears the same dark pill as the desktop navbar, and folds
   into a cross while the menu is open */
.burger{display:none;width:48px;height:48px;border-radius:100px;border:1px solid rgba(255,255,255,.08);
  background:var(--ink);align-items:center;justify-content:center;cursor:pointer;padding:0;
  transition:transform .2s ease}
.burger:active{transform:scale(.94)}
.burger span{display:block;width:17px;height:1.5px;background:#fff;position:relative;border-radius:2px;
  transition:background-color .2s ease}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:17px;height:1.5px;
  background:#fff;border-radius:2px;transition:transform .28s cubic-bezier(.22,.9,.3,1)}
.burger span::before{top:-5.5px}
.burger span::after{top:5.5px}
.burger[aria-expanded=true] span{background:transparent}
.burger[aria-expanded=true] span::before{transform:translateY(5.5px) rotate(45deg)}
.burger[aria-expanded=true] span::after{transform:translateY(-5.5px) rotate(-45deg)}

/* drawer — a floating panel in the footer's language: dark shell, cream chip
   on the page you are on, lime accents, the CTA reversed out */
.drawer{position:fixed;inset:0;z-index:80;background:rgba(18,20,22,.5);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;visibility:hidden;transition:opacity .28s ease,visibility .28s}
.drawer.is-open{opacity:1;visibility:visible}
.drawer__panel{position:absolute;right:clamp(10px,2.4vw,18px);top:clamp(10px,2.4vw,18px);
  bottom:clamp(10px,2.4vw,18px);width:min(88vw,392px);
  background:var(--ink);color:#fff;border-radius:clamp(22px,4vw,30px);
  padding:clamp(18px,3.4vw,24px) clamp(18px,3.4vw,26px) clamp(20px,3.4vw,26px);
  display:flex;flex-direction:column;overflow-y:auto;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.5);
  transform:translateX(16px) scale(.97);opacity:0;
  transition:transform .34s cubic-bezier(.22,.9,.3,1),opacity .28s ease}
.drawer.is-open .drawer__panel{transform:none;opacity:1}

.drawer__head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.drawer__logo{display:inline-flex;align-items:center;gap:6px}
.drawer__logo img{width:34px;height:auto}
.drawer__logo b{font-size:1.0625rem;font-weight:700;color:#fff;letter-spacing:-.02em;line-height:1}
.drawer__logo .serif{font-weight:400}
.drawer__close{width:40px;height:40px;border-radius:100px;flex:none;cursor:pointer;padding:0;
  border:1px solid rgba(255,255,255,.16);background:transparent;
  display:grid;place-items:center;transition:background-color .18s ease}
.drawer__close:hover{background:rgba(255,255,255,.08)}
.drawer__close span{display:block;width:14px;height:1.5px;background:#fff;border-radius:2px;
  transform:rotate(45deg);position:relative}
.drawer__close span::after{content:"";position:absolute;inset:0;background:#fff;border-radius:2px;
  transform:rotate(-90deg)}

.drawer__nav{display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  margin-top:clamp(26px,6vw,40px)}
.drawer__link{display:inline-flex;align-items:center;padding:10px 0;
  font-size:clamp(1.5rem,6vw,1.875rem);font-weight:600;line-height:1.25;
  color:rgba(255,255,255,.72);letter-spacing:-.01em;transition:color .16s ease}
.drawer__link:hover{color:#fff}
.drawer__link--on{color:#fff}
.drawer__link--on span{border-bottom:2px solid #ecd9b1;padding-bottom:2px}

.drawer__cta{margin-top:auto;width:100%;min-height:52px}
.drawer__foot{margin-top:clamp(18px,4vw,26px);padding-top:clamp(16px,3.4vw,22px);
  border-top:1px solid rgba(255,255,255,.1);
  display:flex;flex-direction:column;gap:14px}
.drawer__mail{font-size:.9375rem;color:rgba(255,255,255,.6);letter-spacing:-.01em}
.drawer__mail:hover{color:#fff}
.drawer__foot .socials a{width:42px;height:42px}
.drawer__foot .socials img{width:20px;height:20px}

@media (max-width:1080px){
  .nav{width:auto;gap:clamp(16px,2.6vw,40px);padding:0 20px 0 6px}
}
@media (max-width:900px){
  .nav{display:none}
  .burger{display:inline-flex}
  .header__cta .btn--ghost{display:none}
}

/* --------------------------------------------------------------- 9. Hero
   The backdrop is the Figma hero stage — the rotated collage container with
   its gradient wash and five upright panels, the dashed rules, the colour
   burn and the four soft vertical shades — composited from the file's own
   layers at 1440x1081 and flattened to one image. Everything above it (type,
   buttons, the white falloff) is live, so it stays sharp and reflows.
   -------------------------------------------------------------------------- */
.hero{position:relative;isolation:isolate;background:#fff;overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero__stage{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
  /* The drawn composition is centred on 54.5% of the artboard, not 50%, so a
     plain centre-crop leaves a wash gap on the left and slices the cards on
     the right. This nudge centres the composition instead of the canvas; once
     the picture is wide enough not to crop, it has no effect. */
  object-position:calc(50% - 46px) 100%}
.hero__wash{display:none}
.hero__shot{display:none}

/* Rectangle 161125534 — the white falloff over the lower third */
.hero__fade{position:absolute;left:0;right:0;bottom:0;height:max(240px,42%);
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.55) 34%,
    rgba(255,255,255,.92) 58%,#fff 74%,#fff 100%)}
/* the last inch settles on the page's own white, not a tone near it */
.hero__foot{position:absolute;left:0;right:0;bottom:-1px;height:90px;
  background:linear-gradient(180deg,rgba(255,255,255,0),#fff 62%,#fff)}

.hero__inner{position:relative;z-index:1;display:flex;flex-direction:column;
  align-items:center;text-align:center;gap:25px;
  padding-inline:var(--gutter);
  padding-block:clamp(84px,9.4vw,calc(162px * var(--ui)))
               clamp(300px,calc(88px + 33.64vw),673px)}
.hero__type{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%}
/* eyebrow sits 24px above the headline; the stack below it is 16px */
.hero__tag{display:inline-flex;align-items:center;gap:6px;margin-bottom:8px;
  font-size:clamp(.6875rem,.85vw,.75rem);font-weight:500;line-height:1.4;
  color:var(--ink);text-transform:uppercase}
.hero__tag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red);flex:none}
.hero__title{max-width:11ch;font-size:var(--fs-display);letter-spacing:-.03em;line-height:1}
.hero__sub{max-width:33.94em;opacity:.8;color:var(--ink);
  font-size:clamp(.9375rem,1.11vw,1rem);line-height:1.5}
.hero__ctas{gap:clamp(14px,2.8vw,40px)}

/* --- very wide screens: the backdrop covers, so past about 1500 the image
   scales by width until the hero window only shows the empty wash above the
   panels. Capping how wide the picture may grow — and giving the hero a floor
   tied to that picture's shape — keeps the whole composition on screen. The
   band either side of the capped image is the page's own wash, and the image
   feathers into it. --- */
@media (min-width:1025px){
  /* the band either side is the average of the image's own edges, and the
     picture feathers into it over a tenth of its width */
  .hero__bg{background:linear-gradient(180deg,#fefefd 0%,#faf6ef 46%,#f8f2ea 74%,#fdfcfb 100%)}
  .hero__stage{left:50%;width:min(100%,1740px);transform:translateX(-50%);
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%)}
}

/* --- narrow: the drawn collage stops reading once it is cropped to a
   phone, so the wash carries the backdrop and the dashboard it was made of
   comes back full width, under the buttons, where it can be looked at. --- */
@media (max-width:760px){
  /* buttons, eyebrow and picture all come down a size on a phone */
  .btn{min-height:48px;padding:12px 20px;font-size:.9375rem;gap:8px}
  .btn svg{width:20px;height:20px}
  .hero__tag{font-size:.625rem;letter-spacing:.01em;gap:5px;margin-bottom:6px}
  .hero__tag::before{width:6px;height:6px}
  .hero__stage{display:none}
  .hero__wash{display:block;position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;object-position:50% 0}
  .hero__inner{padding-block:clamp(58px,12vw,88px) 0}
  .hero__fade{height:46%;
    background:linear-gradient(180deg,rgba(255,255,255,0) 0%,#fff 62%,#fff 100%)}
  /* the shot runs to both edges and dissolves into the page, so what comes
     next reads as continuing out of it rather than starting after it */
  /* .hero__inner is a centred flex column, so a calc(50% - 50vw) breakout is
     re-centred by flex and lands half a gutter to the left. Stretching the
     item and using symmetric negative margins is immune to that, and needs no
     vw unit, so a scrollbar cannot skew it either. */
  .hero__shot{display:block;position:relative;align-self:stretch;width:auto;
    margin:clamp(20px,5vw,32px) calc(-1 * var(--gutter)) 0;
    max-height:38vh;
    border-radius:clamp(12px,3.4vw,18px) clamp(12px,3.4vw,18px) 0 0;
    overflow:hidden;background:#f6f7f9}
  .hero__shot img{width:100%;height:auto}
  .hero__shot::after{content:"";position:absolute;left:0;right:0;bottom:0;height:62%;
    background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.82) 46%,#fff 88%)}
  .numbers{margin-top:clamp(-104px,-24vw,-56px)}
}

/* --------------------------------------------------------- 10. Numbers bar
   Numbers Section — 1320 wide, sitting 23px over the foot of the hero. */
.numbers{position:relative;z-index:2;margin-top:-23px;
  padding-bottom:clamp(12px,2.2vw,30px)}
.numbers .wrap{max-width:calc(1320px * var(--ui) + var(--gutter)*2)}
.numbers__inner{display:grid;grid-template-columns:repeat(4,auto);justify-content:center;
  align-items:flex-start;gap:clamp(20px,8.2vw,118px);
  background:rgba(242,242,242,.2);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid var(--yellow);border-radius:clamp(24px,3.1vw,45px);
  box-shadow:4px 8px 30px rgba(183,183,183,.25);
  padding:27px clamp(22px,5.6vw,80px);text-align:center;color:var(--ink)}
.numbers__inner>div{display:flex;flex-direction:column;align-items:center;gap:12px}
/* the four stats arrive one after another once the bar comes into view */
.numbers__inner>div{opacity:0;transform:translateY(16px) scale(.94)}
.numbers.is-in .numbers__inner>div{opacity:1;transform:none;
  transition:opacity .5s ease,transform .62s cubic-bezier(.22,1.2,.36,1)}
.numbers.is-in .numbers__inner>div:nth-child(1){transition-delay:.06s}
.numbers.is-in .numbers__inner>div:nth-child(2){transition-delay:.19s}
.numbers.is-in .numbers__inner>div:nth-child(3){transition-delay:.32s}
.numbers.is-in .numbers__inner>div:nth-child(4){transition-delay:.45s}
.numbers b{font-variant-numeric:tabular-nums}
.numbers b{font-size:clamp(1.6rem,2.15vw,calc(2.29rem * var(--ui)));font-weight:700;line-height:1.21}
.numbers span{font-size:clamp(.8125rem,.9vw,calc(.954rem * var(--ui)));font-weight:400;line-height:1.5}
/* tablet keeps the row but pulls into a pill; a phone stacks it */
@media (max-width:980px){
  .numbers__inner{gap:clamp(12px,2.4vw,26px);border-radius:999px;
    padding:20px clamp(16px,2.6vw,30px)}
  .numbers b{font-size:1.625rem}
  .numbers span{font-size:.75rem;line-height:1.35;white-space:nowrap}
}
@media (max-width:640px){
  .numbers__inner{display:grid;grid-template-columns:minmax(0,1fr);
    gap:22px;border-radius:28px;padding:26px 22px}
  .numbers b{font-size:1.75rem}
  .numbers span{font-size:.875rem}
}

/* ------------------------------------------------- 10. Section furniture */
.head{display:flex;flex-direction:column;align-items:center;gap:clamp(10px,1vw,14px);
  text-align:center;margin-inline:auto}
.head .lead{max-width:40.8em;margin-top:clamp(16px,3.4vw,49px)}

/* The two grey washes on the artboard (Rectangle 161125539): white at the
   top, settling on #f2f2f2. The section that follows each one carries the
   step back to white, so the band has an edge in the file but not a seam. */
.band{background:linear-gradient(180deg,#fff 8.5%,#f2f2f2 100%)}
.band--b{background:linear-gradient(180deg,#fff 20%,#f2f2f2 100%)}
.band-out{background:linear-gradient(180deg,#f2f2f2 0,#fff 130px)}

/* ---------------------------------------------------------- 11. Benefits
   Four picture-cards, exactly as drawn: a 1220 frame of two equal columns,
   the left one carrying the 459 and 475 tall cards, the right one a single
   947 card that stretches to meet them. Each card is a size container, and
   everything inside it is measured in cqw — one hundred of them is the
   card's own width — so a card scales as one drawing rather than reflowing
   piece by piece. The clamp() line above each cqw rule is the fallback.
   -------------------------------------------------------------------------- */
.benefits{display:grid;grid-template-columns:1fr 1fr;gap:13px;align-items:stretch}
.benefits__col{display:flex;flex-direction:column;gap:13px}
.benefits .bcard--fore{grid-column:1 / -1}

.bcard{position:relative;overflow:hidden;isolation:isolate;border-radius:24px;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  container-type:inline-size}
.bcard__tex{position:absolute;inset:0;z-index:-1;mix-blend-mode:soft-light;pointer-events:none;
  background:url(../img/tex-misty.jpg) no-repeat;background-size:257% 166%;background-position:54.6% 7.3%}
.bcard__h,.bcard__p{max-width:calc(100% - 32px)}
.bcard__h{font-weight:600;color:var(--ink-2);line-height:1;letter-spacing:-.01em;
  font-size:clamp(1.6rem,3.13vw,2.8125rem)}
.bcard__h b{font-weight:800}
.bcard__p{color:var(--body);line-height:1.5;font-size:clamp(.875rem,1.11vw,1rem)}
.bcard__art{position:absolute;inset:0;z-index:-1;pointer-events:none}
.bcard__shot{position:absolute;max-width:none;height:auto}

/* --- Never miss a task · #fce6af, 602x459 ---------------------------- */
.bcard--tasks{background:#fce6af;border:1px solid #f1daa0;
  box-shadow:4px 8px 80px rgba(157,157,157,.55);aspect-ratio:602/459}
.bcard--tasks .bcard__h{margin-top:clamp(22px,2.8vw,40px)}
.bcard--tasks .bcard__p{margin-top:clamp(8px,1vw,14px);width:400px}
.bcard--tasks .bcard__shot--week{left:31.63%;top:79.75%;width:45.5%;
  transform:translate(-50%,-50%) rotate(-6.01deg);filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}
.bcard--tasks .bcard__shot--dead{left:68.51%;top:84.83%;width:45.08%;
  transform:translate(-50%,-50%) rotate(6.41deg);filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}

/* --- More than 25+ currencies · #ffd4ea, 602x475 --------------------- */
.bcard--cur{background:#ffd4ea;border:1px solid #f4bcd9;
  box-shadow:4px 8px 80px rgba(157,157,157,.55);aspect-ratio:602/475}
.bcard--cur .bcard__tex{background-size:257% 160%;background-position:54.6% 7.7%}
.bcard--cur .bcard__h{margin-top:clamp(34px,5.2vw,75px)}
.bcard--cur .bcard__p{margin-top:clamp(12px,1.4vw,20px);width:338px}
.bcard__strip{position:absolute;left:8.83%;top:65.68%;width:82.35%;height:auto;max-width:none;
  filter:drop-shadow(0 41px 88px rgba(0,0,0,.04))}

/* --- See Your Real Rate · #cce1fe, stretches to 947 ------------------ */
.bcard--rate{background:#cce1fe;border:1px solid #a2c2e7;
  box-shadow:4px 8px 15px rgba(183,183,183,.25);justify-content:flex-start;margin-right:20px}
.bcard--rate::before{content:"";position:absolute;inset:0;z-index:-2;opacity:.59;
  background:url(../img/tex-ridge.jpg) no-repeat;background-size:570% 222%;background-position:66.2% 18.2%}
.bcard--rate .bcard__h{font-size:clamp(1.5rem,2.95vw,2.647rem);margin-top:44.2%}
.bcard--rate .bcard__p{margin-top:clamp(6px,.7vw,10px);width:369px}
.bcard--rate .bcard__shot--ret{left:19.08%;top:45.2%;width:63.05%;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}
.bcard--rate .bcard__shot--lab{left:10.95%;top:57.56%;width:79.21%;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}

/* --- Eight weeks ahead · #b7e7cc, 1196x416 --------------------------- */
.bcard--fore{background:#b7e7cc;border:1px solid #9bd2a2;
  box-shadow:4px 8px 30px rgba(183,183,183,.25);padding-bottom:4.1%}
.bcard--fore .bcard__tex{background-size:206% 291%;background-position:56.4% 17.1%}
.bcard--fore .bcard__h{font-size:clamp(1.5rem,3.13vw,2.8125rem);margin-top:5.27%}
.bcard--fore .bcard__p{margin-top:2%;width:802px;font-size:clamp(.9375rem,1.39vw,1.25rem)}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1vw,12px);
  width:min(100%,852px);margin-top:4.6%}
.tiles img{width:100%;border-radius:14px}

/* the card's own metrics, resolved against the card instead of the page */
@supports (width:1cqw){
  .bcard__h,.bcard__p{max-width:92cqw}
  .bcard__h{font-size:7.48cqw}
  .bcard__p{font-size:2.66cqw}
  .bcard--tasks .bcard__h{margin-top:6.65cqw}
  .bcard--tasks .bcard__p{margin-top:2.33cqw;width:66.45cqw}
  .bcard--cur .bcard__h{margin-top:12.46cqw}
  .bcard--cur .bcard__p{margin-top:3.32cqw;width:56.15cqw}
  .bcard--rate .bcard__h{font-size:7.26cqw;margin-top:44.2cqw}
  .bcard--rate .bcard__p{margin-top:1.65cqw;width:63.24cqw}
  .bcard--fore .bcard__h{font-size:3.76cqw;margin-top:5.27cqw}
  .bcard--fore .bcard__p{margin-top:2cqw;width:67.06cqw;font-size:1.67cqw}
  .tiles{margin-top:4.6cqw;width:71.24cqw}
}

/* --- tablet: the drawn column heights stop making sense, but a single file
   of four full-width cards is enormous. The pair in the left column joins the
   grid instead, so all four sit as a 2x2 bento. -------------------------- */
@media (max-width:980px){
  .benefits{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,16px)}
  .benefits__col{display:contents}
  .benefits .bcard--fore{grid-column:auto}
  .bcard--tasks,.bcard--cur{aspect-ratio:auto;padding-bottom:54%}
  .bcard--rate{margin-right:0;padding-bottom:58%}
  .bcard--rate .bcard__h{margin-top:12%}
  .bcard--fore{padding-bottom:clamp(20px,3vw,28px)}
  .bcard--fore .bcard__h{margin-top:6.65%}
  .tiles{grid-template-columns:repeat(2,1fr)}
  @supports (width:1cqw){
    .bcard--rate .bcard__h{margin-top:12cqw}
    .bcard--fore .bcard__h{font-size:7.48cqw;margin-top:6.65cqw}
    .bcard--fore .bcard__p{font-size:2.66cqw;width:84cqw}
    .tiles{width:76cqw;margin-top:5cqw}
  }
}
@media (max-width:620px){
  .benefits{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .bcard{border-radius:18px;padding-bottom:clamp(18px,5vw,24px)}
  .bcard--tasks,.bcard--cur,.bcard--rate{padding-bottom:clamp(18px,5vw,24px)}
  .bcard--rate .bcard__h{margin-top:8%}
  /* the panels inside are unreadable at this size — colour and copy carry it */
  .bcard__art,.bcard__strip,.bcard--fore .tiles{display:none}
  /* the cards are ~170-230 wide here, so this last step is in absolute sizes:
     cqw would put the copy at 7px */
  .bcard__h,.bcard__p{max-width:calc(100% - 18px);width:auto}
  .bcard__h,.bcard--rate .bcard__h,.bcard--fore .bcard__h{
    font-size:clamp(1rem,4.2vw,1.1875rem);line-height:1.1;
    margin-top:clamp(14px,4vw,18px)}
  /* the per-card widths are two-class selectors, so unsetting them needs to
     be too or the copy stays pinned to the drawn 400/338/369 measure */
  .bcard--tasks .bcard__p,.bcard--cur .bcard__p,
  .bcard--rate .bcard__p,.bcard--fore .bcard__p{
    font-size:clamp(.78rem,3vw,.875rem);line-height:1.45;
    margin-top:clamp(6px,2vw,9px);width:auto}
}
/* under 360 a two-up measure is four words a line — one column instead */
@media (max-width:359px){
  .benefits{grid-template-columns:minmax(0,1fr)}
  .bcard__h{font-size:1.375rem}
  .bcard__p{font-size:.9375rem}
}

@media (max-width:520px){.tiles{grid-template-columns:repeat(2,1fr)}}

/* -------------------------------------------------------- 12. The index */
/* The Index — three columns of 34px rows, 76px apart, numbers in the
   file's own pink / blue / gold rotation. */
.index-stack{gap:0}
/* The drawn 385px column pitch leaves a lot of air to the right of the last
   name, which reads as the block sitting off-centre. The columns are pulled
   in to the width the names actually need and the group is centred. */
.index-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:clamp(20px,2.4vw,34px);row-gap:clamp(10px,1.7vw,25px);
  width:min(100%,900px);margin-inline:auto;justify-content:center;
  margin-top:clamp(30px,4.9vw,70px)}
.index-item{display:grid;grid-template-columns:clamp(38px,4.55vw,65.6px) 1fr;align-items:baseline}
.index-item b{font-size:clamp(1.15rem,1.98vw,calc(2.126rem * var(--ui)));font-weight:600;line-height:1.5;flex:none;
  font-variant-numeric:tabular-nums}
.index-item span{font-size:clamp(1.15rem,1.98vw,calc(2.126rem * var(--ui)));font-weight:600;line-height:1.5;color:var(--body)}
.i-pink{color:#ffbdd4}.i-blue{color:#a5c4f0}.i-gold{color:#f0c876}
/* the product page draws a line of description under each name */
.index-item--desc{align-items:start}
.index-item--desc h3{font-size:clamp(1.15rem,1.98vw,calc(2.126rem * var(--ui)));font-weight:600;
  line-height:1.5;color:var(--body)}
.index-item--desc p{font-size:clamp(.8125rem,.93vw,calc(1rem * var(--ui)));line-height:1.5;color:var(--body);
  max-width:217px;margin-top:2px}
.index-more{margin-top:clamp(28px,4vw,58px)}
.index-stack .btn-row{margin-top:clamp(24px,3vw,43px)}
@media (max-width:860px){
  .index-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;
    width:min(100%,600px)}
}
@media (max-width:460px){.index-grid{grid-template-columns:1fr;width:min(100%,340px)}}

/* ------------------------------------------------------- 12b. Also inside
   The features that never got a section of their own. Same three-column
   rhythm as the index, but each entry carries a paragraph, so the cards get
   a hairline and a little air rather than sitting on the page bare. */
.also{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.8vw,26px);width:min(100%,var(--w-page));margin-inline:auto}
.also__item{background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:clamp(18px,1.9vw,26px)}
.also__item h3{font-size:clamp(1rem,1.35vw,calc(1.375rem * var(--ui)));font-weight:700;
  color:var(--ink-2);line-height:1.25}
.also__item p{font-size:clamp(.8125rem,.96vw,calc(1rem * var(--ui)));line-height:1.55;
  color:var(--body);margin-top:clamp(6px,.7vw,10px)}
@media (max-width:860px){.also{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.also{grid-template-columns:1fr;width:min(100%,420px)}}

/* ----------------------------------------------------- 13. Intelligence
   Four 327x163 tiles in two staggered columns — the right one riding 43px
   higher, exactly as they sit on the artboard. Icon and title, nothing else.
   -------------------------------------------------------------------------- */
.intel{display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(16px,2.02vw,29px) clamp(16px,2.02vw,29px);
  width:min(100%,calc(683px * var(--ui)));margin:clamp(30px,4.7vw,67px) auto 0}
.intel>:nth-child(2),.intel>:nth-child(4){transform:translateY(clamp(-43px,-3vw,0px))}
.icard{border-radius:clamp(18px,1.98vw,28.4px);
  padding:8.3% 8.7% 8.3%;container-type:inline-size;
  display:flex;flex-direction:column;align-items:flex-start}
.icard--cream{background:#fcf2e5}
.icard--blue{background:#ecf6ff}
.icard--pink{background:#fff3fe}
.icard--green{background:#e7efd6}
.icard h3{font-weight:700;color:var(--ink-2);line-height:1;letter-spacing:-.01em;
  font-size:clamp(1.15rem,1.8vw,calc(1.938rem * var(--ui)));width:52%;min-width:9ch;
  margin-top:clamp(6px,.72vw,10.3px);padding-bottom:6%}
.icard__glyph{width:9.88%;aspect-ratio:1;min-width:26px;border-radius:16%;background:#fff;
  display:grid;place-items:center;flex:none}
/* Only "Needs your attention" is the pulse dot; the other three carry their
   own mark from the file. Both sit at the drawn 13/32.3 of the chip. */
.icard__glyph img{width:40%;height:40%;display:block}
.icard__glyph i{width:68%;height:68%;border-radius:32%;
  background:rgba(255,255,255,.66);border:.4px solid rgba(255,255,255,.78);
  box-shadow:inset 0 .4px 0 .8px rgba(255,255,255,.96);
  display:grid;place-items:center}
.icard__glyph i::after{content:"";width:32%;height:32%;border-radius:50%;background:var(--red-55);
  box-shadow:0 0 0 2.35px rgba(226,57,80,.18),0 0 0 4.7px rgba(226,57,80,.08)}
.intel__cta{margin-top:clamp(32px,4.4vw,63px)}

/* --- the product page's own set. The file draws four 327x297 cards
   overlapping in a tilted row, which only works where there is a pointer to
   straighten one with. So the tilt, the overlap and the hover are a
   pointer-only flourish; a touch screen gets the same four cards straight,
   full size and readable with nothing to discover. ---------------------- */
.icards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,2vw,24px);align-items:start;
  margin-top:clamp(34px,4.6vw,66px)}
.icard2{border-radius:28.42px;padding:clamp(18px,2vw,28px);
  display:flex;flex-direction:column;align-items:flex-start;position:relative;
  container-type:inline-size;transform-origin:center;
  transition:transform .34s cubic-bezier(.22,.9,.3,1),box-shadow .34s ease}
.icard2:nth-child(1){background:#fcf2e5}
.icard2:nth-child(2){background:#ecf6ff}
.icard2:nth-child(3){background:#fff3fe}
.icard2:nth-child(4){background:#e7efd6}
.icard2 h3{font-weight:700;color:var(--ink-2);line-height:1;letter-spacing:-.01em;
  font-size:clamp(1.15rem,1.66vw,calc(1.938rem * var(--ui)));width:52%;min-width:9ch;
  margin-top:clamp(8px,.72vw,10.3px)}
.icard2 .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:clamp(12px,1.2vw,17px);
  padding-bottom:clamp(8px,.8vw,11px);width:100%;
  border-bottom:1px solid rgba(46,46,46,.25)}
.icard2 .chips span{background:#fff;border-radius:3.17px;padding:3px 7px;
  font-size:clamp(.6875rem,.88vw,.793rem);line-height:1.3;color:var(--ink-2);white-space:nowrap}
.icard2 > p{font-size:clamp(.8125rem,.99vw,.888rem);line-height:1.35;color:var(--ink-2);
  margin-top:clamp(8px,.8vw,11px)}
@supports (width:1cqw){
  .icard2 h3{font-size:8.4cqw}
  .icard2 .chips span{font-size:3.6cqw}
  .icard2 > p{font-size:4cqw}
}
@media (max-width:760px){
  .icards{gap:10px;margin-top:clamp(24px,6vw,34px)}
  .icard2{border-radius:18px;padding:14px 14px 18px}
  .icard2 h3{font-size:1.0625rem;line-height:1.15;width:auto;min-width:0;margin-top:10px}
  .icard2 .chips{margin-top:10px;padding-bottom:9px;gap:5px}
  .icard2 .chips span{font-size:.6875rem;padding:2px 6px}
  .icard2 > p{font-size:.8125rem;line-height:1.45;margin-top:9px}
  .icard2 .icard__glyph{width:24px;min-width:24px}
}
@media (max-width:560px){
  .icards{grid-template-columns:minmax(0,1fr)}
}

/* the drawn arrangement, for anyone holding a pointer */
@media (hover:hover) and (min-width:981px){
  .icards{display:flex;padding-block:clamp(16px,2.6vw,38px);margin-top:clamp(34px,4.6vw,66px)}
  .icard2{flex:1 1 0;min-width:0;padding:clamp(16px,1.8vw,26px);
    margin-left:clamp(-30px,-1.8vw,-12px)}
  .icard2:first-child{margin-left:0}
  .icard2:nth-child(1){transform:rotate(-6.52deg);z-index:1}
  .icard2:nth-child(2){transform:rotate(7.3deg);z-index:2}
  .icard2:nth-child(3){transform:rotate(-8.4deg);z-index:3}
  .icard2:nth-child(4){transform:rotate(8.7deg);z-index:4}
  .icard2:hover,.icard2:focus-within{
    transform:rotate(0deg) scale(1.09);z-index:9;
    box-shadow:0 26px 60px -18px rgba(34,40,43,.3),0 2px 8px rgba(34,40,43,.06)}
  @supports (width:1cqw){
    .icard2 h3{font-size:9.49cqw}
    .icard2 .chips span{font-size:3.88cqw}
    .icard2 > p{font-size:4.35cqw}
  }
}

/* the landing page's flat tiles lift a little on hover too */
.icard{transition:transform .3s cubic-bezier(.22,.9,.3,1),box-shadow .3s ease}
.icard:hover{transform:translateY(-4px) scale(1.03);
  box-shadow:0 20px 44px -18px rgba(34,40,43,.24)}

/* ------------------------------------------------------ 14. Whole model
   Frame 40896 — a 1196x711 pair: the photo at 567 wide on the left, the
   #dfe456 panel filling the rest. Panel type is #163300; the badge and the
   icon pill sit on the photo at the drawn offsets.
   -------------------------------------------------------------------------- */
.model{display:grid;grid-template-columns:567fr 629fr;border-radius:18px;overflow:hidden;
  align-items:stretch;container-type:inline-size}
.model__art{position:relative;background:#fbf7f8;overflow:hidden;
  container-type:inline-size;aspect-ratio:567/711}
.model__art>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.model__badge{position:absolute;left:4.95%;top:3.75%;z-index:2;
  background:#dfe456;color:#010c1a;border-radius:35px;padding:1.6% 2.24%;
  font-size:clamp(.75rem,1.26vw,1.133rem);font-weight:400;line-height:normal;white-space:nowrap}
.model__icons{position:absolute;left:4.31%;bottom:3.5%;z-index:2;
  display:flex;align-items:center;gap:2.56cqw;
  background:#f3f3f3;border-radius:99px;padding:1.92cqw 2.56cqw}
.model__icons li{display:block;width:11.98cqw;min-width:22px;flex:none}
.model__icons img{width:100%;height:auto}
.model__copy{background:#dfe456;color:#163300;
  padding:clamp(24px,3.79vw,45.3px);display:flex;flex-direction:column;
  gap:clamp(28px,7.35vw,88px)}
.model__h{font-weight:700;line-height:1;letter-spacing:-.01em;color:#163300;
  font-size:clamp(2rem,4.55vw,3.398rem)}
.model__h .serif{font-weight:400}
.model__body{margin-top:auto;font-size:clamp(.9375rem,1.82vw,1.359rem);line-height:1.5}
.model__body p{margin-bottom:1.5em}
.model__list{display:flex;flex-direction:column;list-style:disc;padding-left:1.5em}
.model__list li{display:list-item}

/* .model__art is the nearer container for the badge and icon pill (567 wide);
   .model itself (1196) governs the copy panel. */
@supports (width:1cqw){
  .model__badge{font-size:3.2cqw;border-radius:6.22cqw}
  .model__copy{padding:3.79cqw;gap:7.35cqw}
  .model__h{font-size:4.545cqw}
  .model__body{font-size:1.818cqw}
}

@media (max-width:860px){
  .model{grid-template-columns:1fr}
  .model__art{aspect-ratio:16/11}
  .model__art>img{object-position:center 26%}
  .model__copy{gap:clamp(22px,4vw,34px)}
  .model__h{font-size:clamp(2rem,7vw,3rem)}
  .model__body{font-size:clamp(.9375rem,2.6vw,1.125rem);margin-top:0}
  @supports (width:1cqw){
    .model__badge{font-size:clamp(.75rem,2.6cqw,1.133rem)}
    .model__copy{padding:clamp(24px,5cqw,48px);gap:clamp(22px,4cqw,40px)}
    .model__h{font-size:clamp(2rem,7.4cqw,3.398rem)}
    .model__body{font-size:clamp(.9375rem,2.9cqw,1.359rem)}
  }
}

/* -------------------------------------------------------- 15. How it works */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.67vw,24px);
  width:min(100%,calc(1178px * var(--ui)));margin-inline:auto;margin-top:clamp(26px,3.7vw,54px)}
.step{border-radius:20px;padding:clamp(18px,1.67vw,24px);display:flex;flex-direction:column;
  background:#fff;container-type:inline-size}
.step:nth-child(1){border:1px solid #f2d98a}
.step:nth-child(2){border:1px solid #eec3dd}
.step:nth-child(3){border:1px solid #a8cdf0}
.step__icon{width:clamp(46px,4.45vw,64px);aspect-ratio:1;border-radius:16px;
  display:grid;place-items:center;margin-bottom:clamp(18px,3.34vw,48px)}
.step__icon img{width:56%;height:56%;display:block}
/* The drawn tints, not the shared tokens — those are a touch heavier and are
   spoken for elsewhere (quotes, download steps, the 404 cards). */
.step:nth-child(1) .step__icon{background:#fef3c7}
.step:nth-child(2) .step__icon{background:#faddf7}
.step:nth-child(3) .step__icon{background:#e0f2fe}
.step h3{font-size:clamp(1.0625rem,1.4vw,calc(1.5rem * var(--ui)));font-weight:600;color:var(--ink-2);
  line-height:1.2;margin-bottom:clamp(8px,.56vw,8px)}
.step p{font-size:clamp(.875rem,1.17vw,calc(1.25rem * var(--ui)));color:var(--body);line-height:1.5}
@media (max-width:820px){.steps{grid-template-columns:1fr}}

/* ------------------------------------------------------ 16. Testimonials */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
.quote{border:1px solid var(--line);border-radius:18px;padding:clamp(20px,2.2vw,28px);
  display:flex;flex-direction:column;gap:24px;background:#fff}
.quote p{font-size:clamp(.9375rem,1.1vw,1.0625rem);line-height:1.55;color:#3c4245}
.quote figcaption{display:flex;align-items:center;gap:12px;margin-top:auto}
.quote i{width:34px;height:34px;border-radius:50%;flex:none;background:var(--t-pink)}
.quote:nth-child(2) i{background:#f6c9cf}
.quote:nth-child(3) i{background:var(--t-blue-2)}
.quote b{display:block;font-size:.95rem;color:var(--ink-2);font-weight:600}
.quote span{display:block;font-size:.8125rem;color:var(--muted)}
.note{border:1px dashed #d8dcde;border-radius:14px;padding:14px 18px;font-size:.875rem;color:var(--muted);text-align:center}
@media (max-width:820px){.quotes{grid-template-columns:1fr}}

/* --------------------------------------------------------------- 17. FAQ
   Card 1196x731, radius 71, 6px #dfe456 at 40%. Rows 1127 wide on #f6f6f6,
   radius 32 — 151 tall open, 101 closed. Number 40px at 40% ink, question
   24px, and a 62px white disc carrying the file's own arrow glyph, which
   turns a quarter when the row opens.
   -------------------------------------------------------------------------- */
.faq{border:6px solid rgba(223,228,86,.4);border-radius:clamp(28px,4.94vw,71px);
  padding:clamp(22px,2.71vw,39px) clamp(18px,2.71vw,39px) clamp(26px,3.34vw,48px);
  display:flex;flex-direction:column;background:#fff;
  max-width:calc(1196px * var(--ui));margin-inline:auto}
.faq > .h1{margin-bottom:clamp(24px,5.2vw,75px)}
.faq__list{display:flex;flex-direction:column;gap:16px}
.faq__item{background:var(--panel);border-radius:clamp(18px,2.22vw,32px);overflow:hidden}
.faq__q{display:flex;align-items:center;gap:clamp(14px,2.16vw,31px);cursor:pointer;list-style:none;
  padding:clamp(14px,1.39vw,20px) clamp(16px,1.81vw,26px) clamp(14px,1.39vw,20px) clamp(16px,1.67vw,24px)}
.faq__q::-webkit-details-marker{display:none}
.faq__q b{font-size:clamp(1.25rem,2.33vw,calc(2.5rem * var(--ui)));font-weight:500;color:rgba(37,37,37,.4);
  line-height:1.3;letter-spacing:-.03em;font-variant-numeric:tabular-nums;flex:none}
.faq__q h3{font-size:clamp(.9375rem,1.4vw,calc(1.5rem * var(--ui)));font-weight:500;color:#252525;
  line-height:1.1;flex:1}
.faq__mark{width:clamp(40px,3.6vw,52px);height:clamp(40px,3.6vw,52px);flex:none;
  background:url(../img/faq-toggle.svg) center/100% 100% no-repeat;
  transition:transform .22s ease}
.faq__item[open] .faq__mark{transform:rotate(90deg)}
.faq__a{padding:0 clamp(16px,1.81vw,26px) clamp(18px,1.81vw,26px) clamp(46px,7.2vw,104px);
  margin-top:-6px;
  font-size:16px;line-height:1.25;color:#667085;max-width:830px}

/* -------------------------------------------------------- 18. Closing CTA */
/* Closing — heading box 987 wide (that width is what puts "Own it forever."
   on its own line), lead 932, then the button and the fine print. */
.closing{display:flex;flex-direction:column;align-items:center;text-align:center}
.closing .h1{max-width:13.34em;text-wrap:wrap}
.closing .lead{max-width:33.3em;margin-top:clamp(10px,.7vw,10px)}
.closing .btn{margin-top:clamp(24px,2.8vw,40px)}
.fine{font-size:clamp(.75rem,1.06vw,.954rem);color:var(--muted);
  margin-top:clamp(24px,2.7vw,39px)}

/* ---------------------------------------------------- 18b. Back to top
   The lime disc from the newsletter's send button, reused. It rolls in once
   the page is a screen deep, and the arrow hops on hover. */
.totop{position:fixed;right:clamp(16px,2.4vw,32px);bottom:clamp(16px,2.4vw,32px);z-index:70;
  width:clamp(46px,3.7vw,54px);height:clamp(46px,3.7vw,54px);border-radius:50%;
  border:0;cursor:pointer;background:var(--chartreuse);color:var(--ink);
  display:grid;place-items:center;
  box-shadow:0 10px 26px -8px rgba(34,40,43,.4),0 1px 3px rgba(34,40,43,.12);
  opacity:0;visibility:hidden;transform:translateY(14px) rotate(-140deg) scale(.6);
  transition:opacity .3s ease,visibility .3s,transform .5s cubic-bezier(.22,1.2,.36,1),
             background-color .2s ease}
.totop.is-on{opacity:1;visibility:visible;transform:none}
.totop svg{width:22px;height:22px;transition:transform .28s cubic-bezier(.22,1.2,.36,1)}
.totop:hover{background:var(--lime)}
.totop:hover svg{transform:translateY(-3px)}
.totop:active{transform:scale(.94)}
@media (prefers-reduced-motion:reduce){
  .totop{transform:none}
  .totop svg{transition:none}
}

/* ------------------------------------------- phone: a few things scale down
   The whole-model icon pill, the intelligence tiles and the product tour all
   carry desktop proportions that shout at 390px. ------------------------- */
@media (max-width:760px){
  .model__icons{gap:2cqw;padding:1.4cqw 2cqw;left:4%;bottom:3%}
  .model__icons li{width:8cqw;min-width:26px}

  .intel{grid-template-columns:repeat(2,minmax(0,1fr));width:100%;
    gap:10px;margin-top:clamp(24px,6vw,34px)}
  .intel>:nth-child(2),.intel>:nth-child(4){transform:none}
  .icard{border-radius:18px;padding:14px 14px 18px}
  .icard h3{font-size:clamp(.95rem,3.9vw,1.125rem);width:auto;min-width:0;
    line-height:1.15;margin-top:10px}
  .icard__glyph{width:24px;min-width:24px}
  .intel__cta{margin-top:clamp(24px,6vw,34px)}
}
@media (max-width:359px){
  .intel{grid-template-columns:minmax(0,1fr)}
}

/* ------------------------------------------------- 18b. The download gate
   The licence-key form on the handoff page. Same card language as the rest of
   that page; the field is monospaced because a key is a code, not prose. */
.unlock{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.unlock__label{font-size:.6875rem;letter-spacing:.09em;text-transform:uppercase;
  font-weight:600;color:var(--muted)}
.unlock__field{width:100%;border:1px solid var(--line);border-radius:14px;
  background:var(--page-2);padding:14px 16px;color:var(--ink);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:clamp(.8125rem,1.05vw,.9375rem);letter-spacing:.02em;
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease}
.unlock__field::placeholder{color:rgba(34,40,43,.3);letter-spacing:.04em}
.unlock__field:focus{outline:0;background:#fff;border-color:var(--pink);
  box-shadow:0 0 0 4px rgba(247,169,207,.22)}
.unlock__go{margin-top:2px}
.unlock__go:disabled{opacity:.55;cursor:progress}
.unlock__msg{font-size:.8125rem;line-height:1.45;color:var(--muted);min-height:0}
.unlock__msg:empty{display:none}
.unlock__msg[data-state=error]{color:#c0392f}
.unlock__msg[data-state=ok]{color:#4a7a2c}
.unlock__hint{font-size:.75rem;line-height:1.5;color:var(--muted)}
.unlock__hint a{text-decoration:underline}
/* Once a key is spent the form has nothing left to offer — keep it, but stop
   it competing with the message above it. */
.unlock[data-done=true] .unlock__field{opacity:.6}

/* ------------------------------------------------------------ 19. Footer
   The Figma component: 1376 x 636, radius 45.941, #22282b. Nav row and the
   64px address share the first line, hairline at y150, brand block and the
   newsletter card below it, legal bar on a second rule at y551. The two
   strokes are the same path in two colours — pink to the right at (931,33),
   #363C3F rotated -155.59deg at (71,-446) — both clipped by the shell, which
   is what produces the cropped curl. Positions are in cqw so they hold to the
   shell's width rather than drifting with its height.

   Satoshi is the footer face in the file. There is no licence in the file and
   it is not a free webfont, so Outfit — the same geometric grotesque — stands
   in. Drop the .woff2 in and add a @font-face to switch back.
   -------------------------------------------------------------------------- */
.footer{padding:0 var(--gutter) clamp(24px,3vw,32px)}
.footer__shell{position:relative;max-width:var(--w-wide);margin-inline:auto;background:var(--ink);
  border-radius:clamp(24px,3.34vw,45.94px);overflow:hidden;color:#fff;isolation:isolate;
  container-type:inline-size;
  padding:clamp(32px,5.38vw,74px) clamp(24px,3.48vw,47.9px) clamp(24px,2.11vw,29px)}
.footer__curl{position:absolute;z-index:0;pointer-events:none;height:auto;width:38.44%;max-width:none;
  -webkit-mask-image:linear-gradient(45deg,transparent 2%,#000 14%,#000 86%,transparent 99%);
  mask-image:linear-gradient(45deg,transparent 2%,#000 14%,#000 86%,transparent 99%)}
.footer__curl--pink{left:67.66%;top:5.2%}
.footer__curl--dark{left:5.18%;top:-70%;transform:rotate(-155.59deg)}
@supports (width:1cqw){
  .footer__curl--pink{top:2.39cqw}
  .footer__curl--dark{top:-32.38cqw}
}

.footer__top,.footer__rule,.footer__body,.footer__bar{position:relative;z-index:1}
.footer__top{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(20px,3vw,48px);
  justify-content:space-between}
.footer__nav{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,2.33vw,32px);
  margin-left:clamp(0px,2.33vw,32px)}
.footer__link{font-size:16px;line-height:20px;color:#fffdfd;font-weight:500;
  text-transform:capitalize;transition:opacity .15s}
.footer__link:hover{opacity:.75}
/* the current page wears the outlined chip, 90.18 x 40.08 */
.footer__link--on{display:inline-flex;align-items:center;justify-content:center;
  width:clamp(74px,6.55vw,90.18px);height:clamp(34px,2.91vw,40.08px);
  border:1px solid #fff;border-radius:100px;font-weight:700;letter-spacing:-.01em}
.footer__mail{font-size:clamp(1.3rem,3.73vw,calc(4rem * var(--ui)));line-height:1.2;color:#fff;font-weight:400;
  text-transform:lowercase;letter-spacing:-.02em;overflow-wrap:anywhere}

.footer__rule{height:1px;background:#737779;margin:clamp(20px,2.62vw,36px) 0 clamp(28px,4.07vw,56px)}

/* The newsletter card is a fixed 285.63 in the file and sits hard right, over
   the pink stroke. An `auto` track sized itself to the paragraph's max-content
   instead — 570px — which left the card stranded mid-shell. */
.footer__body{display:grid;
  grid-template-columns:minmax(0,1fr) calc(285.63px * var(--ui));
  gap:clamp(28px,4vw,64px);align-items:start}
.footer__brand{display:flex;flex-direction:column;gap:clamp(18px,2.9vw,40px);max-width:26rem;
  margin-left:clamp(0px,1.38vw,19px);padding-top:clamp(0px,5.96vw,82px)}
.footer__logo{display:flex;align-items:center;gap:clamp(6px,.26vw,3.5px)}
.footer__star{width:clamp(50px,5.09vw,70px);height:auto;flex:none}
.footer__logo b{font-size:clamp(1.3rem,1.96vw,calc(2rem * var(--ui)));font-weight:500;line-height:1.2;color:#fff;
  text-transform:capitalize;letter-spacing:-.02em;white-space:nowrap}
.footer__logo .serif{font-weight:400}
.footer__support a{font-size:16px;line-height:1.5;color:rgba(255,255,255,.7);letter-spacing:-.02em}
.footer__support a:hover{color:#fff}
.socials{display:flex;gap:15px}
.socials a{width:48px;height:48px;border-radius:100px;border:1px solid rgba(255,255,255,.08);
  display:grid;place-items:center;transition:background .15s,border-color .15s}
.socials a:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.2)}
.socials img{width:24px;height:24px}

/* newsletter card — 285.63 x 295.62, rgba(242,244,245,.89), radius 15.979 */
.news{background:rgba(242,244,245,.89);border-radius:15.98px;
  padding:clamp(18px,1.7vw,23px);width:100%;
  display:flex;flex-direction:column;color:var(--ink-2)}
.news h3{font-size:clamp(1.4rem,2.1vw,calc(2.151rem * var(--ui)));font-weight:600;line-height:1;color:var(--ink-2)}
.news p{font-size:16px;font-weight:300;line-height:1.15;color:var(--ink-2);
  margin-top:clamp(8px,.8vw,11px)}
.news input{width:100%;border:0;border-radius:6px;background:#fff;padding:12px 10px;
  margin-top:clamp(16px,1.6vw,22px);
  font-size:clamp(1rem,1.31vw,1.123rem);font-weight:300;color:var(--ink-2)}
.news input::placeholder{color:var(--ink-2);opacity:.85}
.news__row{display:flex;gap:7px;align-items:center;margin-top:clamp(8px,.87vw,12px)}
.news__submit{flex:1;border:0;background:var(--red);color:#fff;border-radius:17.98px;
  padding:12px 16px;font-size:clamp(1rem,1.31vw,1.123rem);font-weight:300;cursor:pointer;
  transition:filter .15s;text-align:left}
.news__submit:hover{filter:brightness(1.07)}
.news__go{width:45px;height:45px;border-radius:50%;background:var(--chartreuse);flex:none;
  display:grid;place-items:center}
.news__go img{width:26px;height:26px;transform:rotate(-45deg)}
.news__msg{font-size:.8125rem;min-height:1.1em;color:#2f6b3f;margin-top:8px}
.news__msg[data-state=error]{color:#a33}

.footer__bar{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:flex-start;
  margin-top:clamp(28px,3.56vw,49px);padding-top:32px;
  border-top:1px solid rgba(237,237,237,.4);font-size:16px;line-height:1.5;color:#b3b3b3}
.footer__bar nav{display:flex;gap:24px}
.footer__bar a:hover{color:#fff}

/* tablet: the 64px address stops fitting beside the nav, so the nav takes
   the row on its own and the brand block pairs with a roomier card */
@media (max-width:980px){
  .footer__mail{display:none}
  .footer__top{justify-content:flex-start}
  .footer__nav{margin-left:0;gap:clamp(18px,3.4vw,34px)}
  .footer__body{grid-template-columns:minmax(0,1fr) minmax(280px,340px);
    gap:clamp(24px,3.4vw,40px);align-items:center}
  .footer__brand{padding-top:0;margin-left:0;gap:clamp(14px,2.4vw,22px)}
  .news{width:100%;padding:clamp(20px,2.6vw,26px)}
  .news h3{font-size:1.75rem}
  .news p{font-size:.9375rem;line-height:1.35}
}
@media (max-width:700px){
  .footer__body{grid-template-columns:1fr}
  .news{max-width:420px}
}

@media (max-width:560px){
  .footer__bar{font-size:.875rem}
}

/* ============================================================ PAGE STYLES */

/* ---------------------------------------------------------------- About */
/* the file breaks the title by hand after "who" — but the marker behind the
   second line has to hug the words, not run the width of the heading box */
.about__h .serif{display:inline}
@media (min-width:760px){
  .about__h .serif{display:block;width:fit-content;margin-inline:auto}
}

/* Rows used to be pinned to the drawn 316, which left every text tile with a
   third of itself empty. They hug their copy now; the picture tiles keep a
   floor of their own so the mosaic still reads as a grid. */
.mosaic{display:grid;gap:clamp(12px,1.67vw,24px);
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:minmax(clamp(150px,13vw,196px),auto)}
.tile{border-radius:11px;overflow:hidden;position:relative;padding:clamp(20px,2.2vw,30px);
  display:flex;flex-direction:column;gap:10px;justify-content:center}
.tile--img{padding:0;position:relative;min-height:clamp(150px,13vw,196px)}
.tile--img > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.m-desk{min-height:clamp(150px,13vw,196px)}
.tile h3{font-size:clamp(1.4rem,2.5vw,2.15rem);font-weight:700;line-height:1.05}
.tile p{font-size:clamp(.9375rem,1.32vw,1.22rem);line-height:1.5;color:var(--body)}
.tile .eyebrow{font-size:clamp(.75rem,1vw,1.25rem);font-weight:700;letter-spacing:.02em}
.m-name{grid-column:span 6;background:var(--t-cream)}
.m-name h3{color:var(--ink-name)}
.m-mark{grid-column:span 3;background:linear-gradient(127deg,var(--t-lav) 0%,rgba(234,215,225,.5) 45%,rgba(217,228,227,.5) 100%);
  align-items:center;justify-content:center}
.m-mark img{width:min(58%,168px)}
.m-desk{grid-column:span 3;grid-row:span 2}
.m-pulse{grid-column:span 4;background:var(--t-lav);align-items:center;justify-content:center}
.m-pulse img{width:min(84%,300px);border-radius:10px}
.m-quiet{grid-column:span 5;background:var(--t-pink)}
.m-quiet h3,.m-quiet .eyebrow{color:var(--ink-quiet)}
.m-own{grid-column:span 7;background:var(--t-green)}
.m-own h3,.m-own .eyebrow{color:var(--ink-own)}
.m-cards{grid-column:span 5;background:linear-gradient(127deg,var(--t-lav) 0%,rgba(234,215,225,.5) 45%,rgba(217,228,227,.5) 100%);
  align-items:center;justify-content:center;padding:clamp(14px,2vw,24px)}
.m-cards__row{display:flex;gap:8px;align-items:center;width:100%;justify-content:center}
.m-cards__row img{width:32%;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.m-cards__row img:nth-child(2){transform:translateY(10px)}
.m-cards__row img:nth-child(3){transform:translateY(-8px)}
.m-dog{grid-column:span 6}
.m-honest{grid-column:span 6;background:var(--t-blue-2)}
.m-honest h3,.m-honest .eyebrow{color:var(--ink-honest)}
.m-small{grid-column:span 7;background:var(--t-coral);position:relative}
.m-small h3,.m-small .eyebrow{color:var(--ink-small)}
.m-dog{position:relative;overflow:hidden}
.m-files{grid-column:span 5}
.m-model{grid-column:span 12;border:4px solid var(--red);border-radius:11px;
  padding:clamp(24px,3vw,42px);text-align:center;align-items:center;min-height:0}
.m-model h3{color:var(--red)}
.m-model p{color:var(--red);max-width:56rem;font-size:clamp(.9375rem,1.15vw,1.375rem)}
@media (max-width:980px){
  .m-name,.m-quiet,.m-own,.m-honest,.m-small{grid-column:span 12}
  .m-mark,.m-cards,.m-desk,.m-dog{grid-column:span 6}
  /* neither of these reads at half width — they sit the desktop out */
  .m-pulse,.m-files{display:none}
  .m-desk{grid-row:auto;min-height:340px}
  .m-dog,.m-files{min-height:260px}
}
@media (max-width:620px){
  .m-mark,.m-pulse,.m-cards,.m-desk,.m-dog,.m-files{grid-column:span 12}
  .m-desk{min-height:300px}
}

/* --------------------------------------------------------------- Product
   The tour is an auto-advancing carousel: one feature at a time, the strip
   above fills as its feature plays, arrows drive it by hand. It pauses on
   hover, on focus, on touch, and whenever it is off screen.
   -------------------------------------------------------------------------- */
.tour{position:relative}
/* one continuous 3px rule (#d9d9d9) that fills lime a fifth at a time */
.tour__progress{display:grid;grid-template-columns:repeat(5,1fr);gap:0;
  margin-bottom:clamp(40px,5.5vw,79px)}
.tour__seg{position:relative;height:3px;padding:0;border:0;border-radius:0;
  background:#d9d9d9;cursor:pointer;overflow:hidden;transition:background-color .3s}
.tour__seg:first-child{border-radius:2px 0 0 2px}
.tour__seg:last-child{border-radius:0 2px 2px 0}
.tour__seg:hover{background:#c7c7c7}
.tour__fill{position:absolute;inset:0 auto 0 0;width:0;border-radius:inherit;
  background:var(--seg,var(--lime));pointer-events:none}
.tour__seg.is-done .tour__fill{width:100%}
.tour__seg[aria-selected=true] .tour__fill{animation:tour-fill var(--tour-duration,7s) linear forwards}
.tour__seg.is-reset .tour__fill{animation:none;width:0}
.tour.is-paused .tour__seg[aria-selected=true] .tour__fill{animation-play-state:paused}
@keyframes tour-fill{from{width:0}to{width:100%}}

/* the viewport tracks the height of the slide on show, so a short slide
   does not leave the tallest slide's empty space under it. pan-y lets the
   page scroll vertically through the tour while sideways drags change slide. */
.tour__viewport{overflow:hidden;transition:height .5s cubic-bezier(.4,0,.2,1);
  touch-action:pan-y}
@media (hover:none){
  .tour__viewport{cursor:grab}
  .tour__panel{user-select:none;-webkit-user-select:none}
}
/* The file shows TWO panels at a time on desktop: the active one in full
   colour and the next greyed back, so you can see what is coming. Each panel
   is a column — pill, copy, then the picture — not a text/picture pair.
   Under 900 it is one panel at a time and nothing is greyed. */
.tour__track{display:grid;grid-auto-flow:column;
  grid-auto-columns:calc(50% - clamp(16px,2vw,26px) / 2);
  gap:clamp(16px,2vw,26px);transition:transform .6s cubic-bezier(.4,0,.2,1);align-items:start}
.tour__panel{display:flex;flex-direction:column;align-items:flex-start;
  min-height:var(--tour-h,auto);
  opacity:.45;filter:grayscale(1);transition:opacity .5s,filter .5s}
.tour__panel.is-active{opacity:1;filter:none}
/* The file paints the panel you are not on as a flat grey card. */
.tour__panel:not(.is-active) .tour__mock{background:#cacaca;box-shadow:none}
.tour__label{align-self:flex-start;display:inline-block;
  padding:3px 13px;border-radius:13.24px;background:var(--tab,var(--lime));color:#383838;
  font-size:clamp(.9375rem,1.35vw,calc(1.878rem * var(--ui)));font-weight:400;line-height:1.5}
.tour__label b{font-weight:700}
.tour__body{font-size:clamp(.8125rem,.92vw,calc(1.2875rem * var(--ui)));line-height:1.55;color:var(--body);
  margin-top:clamp(14px,1.7vw,25px);margin-bottom:clamp(18px,2.4vw,34px)}

/* The artwork frame the file reserves — 574x433 — on every slide, so the
   picture is the same size and place whatever it holds. */
.tour__mock{width:100%;margin-top:auto;
  aspect-ratio:574/433;border-radius:clamp(18px,2.1vw,30px);overflow:hidden;
  background:var(--mock,var(--page-2));container-type:inline-size;
  padding:6.6% 6.6% 6.2%;display:flex;flex-direction:column;align-items:flex-start;
  box-shadow:var(--shadow-card)}
@supports not (width:1cqw){.tour__mock{padding:clamp(18px,2.4vw,38px)}}

/* Card type is measured against the card, not the page, so a slide reads the
   same whether two are on screen or one. */
.tmk__eyebrow{font-size:clamp(.625rem,2.35cqw,.8125rem);letter-spacing:.13em;text-transform:uppercase;
  font-weight:600;color:rgba(23,21,32,.42)}
.tmk__h{font-size:clamp(1.25rem,7.55cqw,2.25rem);line-height:1.16;font-weight:800;color:#616161;
  letter-spacing:-.01em;margin-top:.5cqw}
.tmk__h .serif{font-weight:400}
.tmk__p{font-size:clamp(.8125rem,3.05cqw,1rem);line-height:1.5;color:rgba(23,21,32,.72);margin-top:3.4cqw}
.tmk__p b{font-weight:700;color:rgba(23,21,32,.9)}
.tmk__q{font-size:clamp(.875rem,3.4cqw,1.125rem);line-height:1.45;color:rgba(23,21,32,.62);margin-top:3cqw}
.tmk__s{font-size:clamp(.75rem,2.6cqw,.9375rem);line-height:1.5;color:rgba(23,21,32,.5);margin-top:2.4cqw}
.tmk__act{margin-top:auto;padding-top:3cqw}
.tmk__btn{display:inline-block;background:rgba(255,255,255,.53);border:1px solid #e74328;
  border-radius:100px;padding:clamp(5px,1.15cqw,8px) clamp(11px,2.35cqw,15px);font-size:clamp(.6875rem,2cqw,.75rem);font-weight:700;color:#14161c}
@supports not (width:1cqw){
  .tmk__eyebrow{font-size:.6875rem}  .tmk__h{font-size:clamp(1.25rem,2.6vw,2.1rem)}
  .tmk__p{font-size:.875rem}         .tmk__q{font-size:.9375rem}
  .tmk__s{font-size:.75rem}          .tmk__btn{font-size:.6875rem;padding:6px 13px}
}

/* Your people — the client brand sheet the file draws. */
.bdoc__head{display:flex;align-items:center;gap:2.8cqw}
.bdoc__logo{width:clamp(38px,10.8cqw,62px);height:clamp(38px,10.8cqw,62px);border-radius:clamp(13px,3.76cqw,22px);flex:none;
  background:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.82);
  box-shadow:0 2.8cqw 6.6cqw rgba(20,22,32,.07);
  display:grid;place-items:center;font-weight:800;font-size:clamp(.9rem,3.76cqw,1.35rem);
  letter-spacing:-.03em;color:#e8836b}
.bdoc__who{display:flex;flex-direction:column;gap:.4cqw;min-width:0}
.bdoc__who b{font-size:clamp(.9375rem,3.3cqw,1.18rem);font-weight:700;color:#171520;line-height:1.2}
.bdoc__who i{font-size:clamp(.75rem,2.6cqw,.93rem);font-style:normal;color:rgba(23,21,32,.48)}
.bdoc__dots{display:flex;gap:1.45cqw;margin-top:3.2cqw}
.bdoc__dots i{width:clamp(16px,4.5cqw,26px);height:clamp(16px,4.5cqw,26px);border-radius:50%;background:var(--d);
  border:.41cqw solid rgba(255,255,255,.85);box-shadow:0 1.44cqw 3.7cqw rgba(20,22,32,.13)}
.bdoc__label{font-size:clamp(.625rem,2.25cqw,.8rem);letter-spacing:.09em;text-transform:uppercase;
  color:rgba(23,21,32,.38);margin-top:3.1cqw}
.bdoc__text{font-size:clamp(.75rem,2.6cqw,.93rem);line-height:1.4;color:#14161c;margin-top:1.1cqw}
.bdoc__chips{display:flex;flex-wrap:wrap;gap:1.6cqw;margin-top:1.4cqw}
.bdoc__chips span{background:rgba(255,255,255,.53);border:1px solid rgba(183,218,244,.82);
  border-radius:100px;padding:clamp(5px,1.15cqw,8px) clamp(11px,2.6cqw,16px);font-size:clamp(.6875rem,2.35cqw,.84rem);font-weight:700;color:#14161c}
@supports not (width:1cqw){
  .bdoc__logo{width:54px;height:54px;font-size:1.1rem;border-radius:18px}
  .bdoc__who b{font-size:1rem}  .bdoc__who i{font-size:.8125rem}
  .bdoc__dots i{width:22px;height:22px}
  .bdoc__label{font-size:.6875rem}  .bdoc__text{font-size:.8125rem}
  .bdoc__chips span{font-size:.75rem;padding:6px 13px}
}

/* Your time — a screenshot that sits on the tinted card rather than filling it. */
.tour__mock--shot{justify-content:center;padding:5%}
.tour__mock--shot img{width:100%;height:auto;max-height:100%;object-fit:contain;
  filter:drop-shadow(0 1.8cqw 3.6cqw rgba(20,22,32,.13))}

.tour__controls{display:flex;align-items:center;gap:18px;margin-top:clamp(22px,3vw,34px)}
.tour__nav{width:46px;height:46px;border-radius:100px;border:1px solid var(--line);background:#fff;
  cursor:pointer;font-size:1.05rem;color:var(--ink);transition:background .15s,border-color .15s}
.tour__nav:hover{background:var(--page-2);border-color:#d6dade}
.tour__count{font-size:.9375rem;color:var(--muted);font-variant-numeric:tabular-nums}

/* Tablet and phone: one at a time, at full strength — a half-width panel
   greyed back next to it would be unreadable at this size. */
@media (max-width:900px){
  .tour__track{grid-auto-columns:100%}
  .tour__panel{opacity:1;filter:none}
  .tour__mock{aspect-ratio:auto;min-height:0}
}
@media (max-width:640px){
  .tour__mock{padding:7.4%}
}
@media (prefers-reduced-motion:reduce){
  .tour__track{transition:none}
  .tour__seg[aria-selected=true] .tour__fill{animation:none;width:100%}
}

/* Comparison — 1197 wide, columns 1fr .75fr .75fr .75fr. Every row is its
   own 15px-radius block, white over #f9f8f8, under a #cbe9ff header band.
   A 3px #83bbe4 outline, radius 35, rings the Navis Dash column. */
.compare-wrap{position:relative;padding:21px 0 23px;overflow-x:auto;overflow-y:visible}
.compare{width:100%;min-width:760px;border-collapse:separate;border-spacing:0 4px;
  font-size:clamp(.875rem,1.05vw,calc(1.125rem * var(--ui)));table-layout:fixed;position:relative;z-index:1}
.compare col:first-child{width:30.77%}
.compare th,.compare td{padding:15px 20px;text-align:center;vertical-align:middle;
  line-height:1.245;color:#000;font-weight:300}
.compare th:first-child,.compare td:first-child{text-align:left;font-weight:600;width:30.77%}
.compare thead th{background:var(--t-blue-2);font-size:clamp(.9375rem,1.17vw,calc(1.25rem * var(--ui)));font-weight:700;
  padding-block:21px}
.compare thead th:first-child{color:transparent;font-size:0}
.compare thead th:first-child{border-radius:15px 0 0 15px}
.compare thead th:last-child{border-radius:0 15px 15px 0}
.compare tbody tr:nth-child(odd) td,.compare tbody tr:nth-child(odd) th{background:#fff}
.compare tbody tr:nth-child(even) td,.compare tbody tr:nth-child(even) th{background:#f9f8f8}
.compare tbody th:first-child{border-radius:15px 0 0 15px}
.compare tbody td:last-child{border-radius:0 15px 15px 0}
.compare tbody td:nth-of-type(1){font-weight:500}
.compare__highlight{position:absolute;z-index:2;pointer-events:none;
  left:30.77%;width:23.08%;top:0;bottom:0;
  border:3px solid #83bbe4;border-radius:35px}
/* Under 900 the four columns stop fitting, and a sideways scroll is not a
   comparison — you can only ever see two of the three things being compared.
   So each feature becomes its own card carrying all three answers, and the
   cards themselves go two-up while there is room for it. The Navis Dash
   answer keeps its blue, which is the job the column outline was doing. */
@media (max-width:900px){
  .compare__highlight{display:none}
  .compare-wrap{padding:0;overflow:visible}
  .compare{min-width:0;border-spacing:0;display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;font-size:1rem}
  .compare caption{display:block;position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .compare thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .compare tbody{display:contents}
  .compare tbody tr{display:block;border-radius:18px;padding:16px 18px 10px;
    background:#fff;border:1px solid var(--line)}
  .compare tbody tr:nth-child(even){background:#f9f8f8;border-color:transparent}
  .compare tbody tr:nth-child(odd) td,.compare tbody tr:nth-child(odd) th,
  .compare tbody tr:nth-child(even) td,.compare tbody tr:nth-child(even) th{background:none}
  .compare col:first-child{width:auto}
  .compare th:first-child,.compare td:first-child{width:auto}
  .compare tbody th,.compare tbody td{display:block;width:auto;text-align:left}
  .compare tbody th{padding:0 0 10px;margin-bottom:8px;font-size:1.0625rem;font-weight:600;
    border-bottom:1px solid rgba(34,40,43,.08)}
  .compare tbody td{display:grid;grid-template-columns:minmax(0,1fr) auto;
    align-items:baseline;column-gap:14px;padding:5px 0;font-size:.9375rem;
    font-weight:400;text-align:right;overflow-wrap:anywhere}
  .compare tbody td::before{content:attr(data-label);color:var(--muted);
    text-align:left;font-weight:400}
  /* everything that is not the Dash steps back into one muted voice */
  .compare tbody td:not(:first-of-type){color:var(--muted)}
  .compare tbody td:not(:first-of-type)::before{color:var(--muted)}
  /* the row the page is arguing for */
  .compare tbody td:first-of-type{font-weight:600;color:#14161b;
    margin:0 -8px 2px;padding:6px 8px;border-radius:8px;background:rgba(203,233,255,.55)}
  .compare tbody td:first-of-type::before{color:#2f6ea8;font-weight:500}
}
@media (max-width:620px){
  .compare{grid-template-columns:minmax(0,1fr)}
}

/* ------------------------------------------------------------- Download */
/* two cards straight on the page — the file has no tray around them */
.handoff{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3.34vw,48px)}
.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:clamp(22px,3vw,42px);
  display:flex;flex-direction:column;gap:18px}
.card--preview{border-color:var(--yellow)}
.status{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;background:var(--t-green);
  border-radius:99px;padding:8px 16px;font-size:clamp(.6875rem,.9vw,.75rem);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.order{background:var(--page-2);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:8px}
.order div{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.order dt{font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);flex:none}
.order dd{margin:0;font-size:clamp(.9375rem,1.1vw,1.0625rem);color:var(--ink-2);font-weight:500}
.order div:nth-child(n+2) dt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.dl-steps{display:flex;flex-direction:column;gap:14px}
.dl-step{display:flex;gap:16px;border-radius:14px;padding:18px}
.dl-step:nth-child(1){background:var(--t-pink)}
.dl-step:nth-child(2){background:var(--t-blue-2)}
.dl-step:nth-child(3){background:var(--t-green)}
.dl-step b{font-size:clamp(1.25rem,2vw,1.75rem);font-weight:700;color:var(--ink-2);flex:none}
.dl-step .eyebrow{font-size:.6875rem;letter-spacing:.09em}
.dl-step p{font-size:clamp(.8125rem,1vw,.9375rem);margin-top:4px}
@media (max-width:860px){.handoff{grid-template-columns:1fr}}

/* ------------------------------------------------------------- Legal */
/* Legal covers — the display drops to 58px here, and each page carries one
   of the brand strokes: cyan behind the Terms cover, blue under Privacy. */
.cover{position:relative;isolation:isolate}
.cover__curl{position:absolute;z-index:-1;pointer-events:none;width:min(37%,529px);height:auto;
  -webkit-mask-image:linear-gradient(45deg,transparent 4%,#000 22%,#000 84%,transparent 98%);
  mask-image:linear-gradient(45deg,transparent 4%,#000 22%,#000 84%,transparent 98%)}
.cover--terms .cover__curl{right:-3%;top:-6%}
/* Privacy carries its stroke low and to the left, under the article */
.legal{position:relative;isolation:isolate}
.legal__curl{position:absolute;z-index:-1;pointer-events:none;height:auto;
  width:min(64%,816px);left:-14%;bottom:-30%;transform:rotate(180deg);
  -webkit-mask-image:linear-gradient(45deg,transparent 4%,#000 22%,#000 84%,transparent 98%);
  mask-image:linear-gradient(45deg,transparent 4%,#000 22%,#000 84%,transparent 98%)}
.legal-cover{gap:16px;max-width:calc(900px * var(--ui))}
.legal-cover__h{font-size:clamp(1.9rem,3.39vw,calc(3.625rem * var(--ui)));line-height:1.1}
/* The reading surface sits 86px under the cover in the file and 192px above
   the footer. The cover section carries its own bottom padding, so this one
   only tops up the difference — and then leaves the page a proper foot. */
.section--doc{padding-top:clamp(24px,2.9vw,42px);
  padding-bottom:clamp(80px,11.5vw,170px)}
.legal{display:grid;grid-template-columns:calc(260px * var(--ui)) minmax(0,1fr);
  gap:clamp(28px,5.83vw,84px);align-items:start}
.toc{position:sticky;top:calc(var(--head-h) + 18px);border:1px solid var(--ink);
  border-radius:14px;padding:22px 24px;display:flex;flex-direction:column;gap:13px}
.toc .eyebrow{font-weight:800;font-size:.6875rem;letter-spacing:.1em;margin-bottom:3px}
.toc a{font-size:.875rem;font-weight:500;color:var(--body);transition:color .15s}
.toc a:hover,.toc a.is-on{color:var(--pink)}
.legal article{display:flex;flex-direction:column;gap:clamp(26px,2.6vw,34px)}
.legal section{padding-bottom:clamp(20px,2vw,26px);border-bottom:1px solid var(--line)}
.legal section:last-child{border-bottom:0;padding-bottom:0}
.legal h2{font-size:clamp(1.0625rem,1.17vw,calc(1.25rem * var(--ui)));font-weight:700;
  color:var(--ink);margin-bottom:clamp(8px,.9vw,12px)}
.legal p{font-size:clamp(.8125rem,.9vw,.875rem);line-height:1.65;color:var(--body);max-width:58.6em}
@media (max-width:900px){
  .legal{grid-template-columns:1fr;gap:clamp(24px,4vw,36px)}
  .toc{position:static;flex-direction:row;flex-wrap:wrap;gap:10px 18px;
    padding:18px 20px;border-radius:12px}
  .toc .eyebrow{width:100%;margin-bottom:0}
  .section--doc{padding-bottom:clamp(56px,9vw,96px)}
}

.cover{position:relative}
.cover .h1{margin-block:18px 14px}

/* --------------------------------------------------------------- 404
   Frame "404 / Find your way", 1296 wide: three 185x220 blocks with the
   digits standing 359 tall over them, a 46px line, then three ~210x175
   cards tilted and spread across the width. The footer's pink stroke rises
   behind the whole thing on the right.
   -------------------------------------------------------------------------- */
.nf{position:relative;padding:clamp(28px,4.4vw,63px) var(--gutter) 0;
  display:flex;flex-direction:column;align-items:center;text-align:center}
.nf__curl{position:absolute;right:-7%;top:37%;width:min(48%,690px);z-index:-2;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(45deg,transparent 12%,#000 38%,#000 86%,transparent 99%);
  mask-image:linear-gradient(45deg,transparent 12%,#000 38%,#000 86%,transparent 99%)}
.nf__num{position:relative;display:inline-flex;align-items:flex-end;justify-content:center;
  font-size:clamp(6rem,16.3vw,calc(17.5rem * var(--ui)));font-weight:700;color:var(--ink-2);
  line-height:.83;letter-spacing:-.02em;padding-bottom:clamp(10px,1.6vw,23px)}
.nf__blocks{position:absolute;inset:auto 0 0;display:flex;justify-content:center;gap:3px;z-index:-1;
  height:clamp(88px,12.85vw,calc(220px * var(--ui)))}
.nf__blocks i{width:clamp(72px,10.8vw,calc(185px * var(--ui)));border-radius:2px}
.nf__blocks i:nth-child(1){background:var(--t-pink)}
.nf__blocks i:nth-child(2){background:var(--t-blue)}
.nf__blocks i:nth-child(3){background:var(--t-green)}
.nf .h2{font-size:clamp(1.6rem,2.69vw,calc(2.875rem * var(--ui)));margin-top:clamp(28px,3.4vw,49px)}
.nf .lead{margin-top:clamp(10px,1vw,16px)}
.nf .btn{margin-top:clamp(20px,2vw,28px);min-width:230px;min-height:58px}

.nf__cards{display:grid;grid-template-columns:repeat(3,1fr);
  column-gap:clamp(16px,7.6vw,110px);row-gap:24px;
  width:min(100%,calc(1120px * var(--ui)));margin-top:clamp(30px,5.6vw,81px);
  padding-bottom:clamp(20px,3vw,44px);justify-items:center}
.nf__card{width:min(100%,210px);border-radius:16px;padding:24px;min-height:175px;
  display:flex;flex-direction:column;text-align:left;color:var(--ink);
  transition:transform .2s}
.nf__card:nth-child(1){background:var(--t-cream);transform:rotate(-6deg)}
.nf__card:nth-child(2){background:var(--t-blue-2);transform:rotate(7deg)}
.nf__card:nth-child(3){background:var(--t-green);transform:rotate(-5deg)}
.nf__card:hover{transform:rotate(0) translateY(-4px)}
.nf__card .eyebrow{font-size:.6875rem;letter-spacing:.09em}
.nf__card b{font-size:clamp(1.0625rem,1.34vw,calc(1.4rem * var(--ui)));font-weight:700;line-height:1.15;
  margin-top:clamp(14px,1.6vw,22px)}
.nf__card span:last-child{margin-top:auto;align-self:flex-end;font-size:1.6rem;line-height:1}
@media (max-width:720px){
  .nf__cards{grid-template-columns:1fr;justify-items:stretch;row-gap:16px}
  .nf__card{width:100%;transform:none!important}
  .nf__curl{display:none}
}

/* ------------------------------------------------------- decorative arcs */
.arc{position:absolute;pointer-events:none;z-index:-1}
.arc--l{left:-14%;top:38%;width:min(420px,40vw);opacity:1}
.arc--r{right:-10%;top:8%;width:min(520px,46vw)}

/* ------------------------------------------------------------- utilities */
.reveal{opacity:0;transform:translateY(18px)}
.reveal.is-in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.22,.8,.3,1)}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  .numbers__inner>div{opacity:1;transform:none}
}