/* ==========================================================================
   CONCEPT M — FIELD
   A single field of particles carries the whole page. It reassembles into
   whatever the section is about — a parcel, a rack, a handset, a network,
   a rising line — so the argument is made in one continuous material
   instead of six illustrations.
   ========================================================================== */
:root{
  --bg:#05060A; --fg:#F2F4F8; --fg2:rgba(242,244,248,.60); --fg3:rgba(242,244,248,.36);
  --line:rgba(242,244,248,.12);
  --k:#C9A227;                       /* set per section by script */
  --kt:color-mix(in srgb,var(--k) 88%,white);  /* the same accent, legible at small sizes */
  --logo-k:#C9A227;                  /* mirrors --k; the mark opts in explicitly */
  --pad:clamp(20px,5vw,84px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);
  font-family:"Inter Tight",system-ui,sans-serif;font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.042em;line-height:1.02;text-wrap:balance}
/* The serif is the only voice change on the page and it earns its place by
   marking the emphasis — nothing else is allowed to use it. Italic serif wants
   looser tracking than the sans beside it. */
h1 em,h2 em{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-style:italic;
  letter-spacing:-.018em}
p{margin:0}
a{color:inherit;text-decoration:none}
.mono{font-family:"Space Mono",ui-monospace,monospace;font-size:12.5px;letter-spacing:.13em}
::selection{background:var(--k);color:#04060C}
:focus-visible{outline:2px solid var(--k);outline-offset:3px}
.wrap{max-width:1240px;margin:0 auto;padding-inline:var(--pad)}

#field{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.vig{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(72% 62% at 50% 46%,transparent 30%,rgba(5,6,10,.72) 78%,var(--bg) 100%)}
main,.nav,footer{position:relative;z-index:2}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;height:92px;z-index:80;display:flex;align-items:center;
  background:linear-gradient(180deg,rgba(5,6,10,.9),rgba(5,6,10,0));
  transition:background .35s,border-color .35s;border-bottom:1px solid transparent}
.nav.on{background:rgba(5,6,10,.86);
  /* Safari has never shipped this unprefixed — without the -webkit- line the
     bar stayed clear there and the page scrolled visibly through the header,
     which on the two-row mobile bar looked like a ghost of the section above. */
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-bottom-color:var(--line)}
.ni{display:flex;align-items:center;justify-content:space-between;width:100%}
.lg{display:flex;align-items:center}
/* the lockup is 1204x330; height drives it and width follows the ratio */
.lg svg{height:clamp(38px,4.2vw,56px);width:auto;display:block}
.nav nav{display:flex;gap:clamp(14px,2vw,28px)}
.nav nav a{font-size:13.5px;color:var(--fg2);transition:color .22s}
.nav nav a:hover{color:var(--fg)}
/* The one thing on the page we want pressed, so it carries the accent rather
   than the hairline every other control uses — but as a tint and a ring, not
   a fill: a solid button would be the only opaque object on a page built out
   of thin lines and particles. */
.cta{padding:11px 21px;border-radius:100px;font-size:13px;font-weight:600;
  color:var(--kt);
  border:1px solid color-mix(in srgb,var(--k) 52%,transparent);
  background:color-mix(in srgb,var(--k) 11%,transparent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--k) 7%,transparent);
  transition:border-color .3s,color .3s,background .3s,box-shadow .3s,transform .25s}
.cta:hover{color:#fff;
  border-color:color-mix(in srgb,var(--k) 85%,transparent);
  background:color-mix(in srgb,var(--k) 22%,transparent);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--k) 12%,transparent);
  transform:translateY(-1px)}
.cta:focus-visible{outline:2px solid var(--kt);outline-offset:3px}
@media (max-width:720px){.nav nav{display:none}}

/* ---------- panels: one per shape ---------- */
.panel{min-height:100svh;display:flex;align-items:center;padding-block:clamp(100px,11vh,140px)}   /* the floor has to clear the 92px fixed nav on short viewports */
/* .panel is a flex container, so its .wrap is sized by content unless told
   otherwise. The long paragraph used to force it wide; once that went, the
   column collapsed to ~600px and every line wrapped early. */
.panel .wrap{width:100%}
.pi{max-width:min(65ch,52%)}
@media (max-width:900px){.pi{max-width:none}}
.panel.rt .pi{margin-left:auto;text-align:right}
@media (max-width:900px){.panel.rt .pi{margin-left:0;text-align:left}}
.kick{display:inline-flex;align-items:center;gap:10px;color:var(--kt);
  transition:color .6s}
.kick b{width:6px;height:6px;border-radius:50%;background:currentColor;display:block;
  box-shadow:0 0 12px currentColor}
.panel h2{font-size:clamp(30px,5vw,66px);margin-top:20px}
/* this panel carries two lists as well as the heading, so it needs a
   smaller display size than the others to stay inside one screen */
#s1 h2,#s2 h2,#s3 h2,#s4 h2{font-size:clamp(31px,4.1vw,57px)}   /* the chip sections carry more copy, so their headings run smaller */
#s1 .lede,#s2 .lede,#s3 .lede,#s4 .lede{margin-top:14px}
#s1 .sublab,#s2 .sublab,#s3 .sublab,#s4 .sublab{margin-top:clamp(16px,1.8vw,24px)}
#s1 .pl{gap:9px}
#s1 .pl li{font-size:14px}
.panel h2 em{color:var(--k);transition:color .6s;font-size:1.08em}
.panel p{color:var(--fg2);margin-top:20px;font-size:clamp(15.5px,1.4vw,18px)}
/* one sentence, not a paragraph — the modules and the differentiators below
   carry the detail instead */
.lede{max-width:44ch;font-size:clamp(16px,1.35vw,18px)}
.panel.rt .lede{margin-left:auto}
/* a quiet label so the two lists read as two different claims: the table
   stakes, then the reasons to pick us */
.sublab{display:block;margin-top:clamp(22px,2.4vw,32px);color:var(--fg3);
  font-size:12px;letter-spacing:.18em}
/* the module list is a scan, not a read: chips prove completeness at a glance
   without asking anyone to read thirteen lines */
.chips{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.panel.rt .chips{justify-content:flex-end;margin-left:auto}
@media (max-width:900px){.panel.rt .chips{justify-content:flex-start;margin-left:0}}
.chips li{font-family:"Space Mono",monospace;font-size:14px;letter-spacing:.045em;
  color:var(--fg2);border:1px solid var(--line);border-radius:100px;padding:10px 18px;
  transition:border-color .25s,color .25s}
.chips li:hover{border-color:var(--k);color:var(--k)}
/* one chip stands for the whole table-stakes category, so it is marked
   apart from the capabilities that actually differentiate us */
.chips li.cap{border-color:color-mix(in srgb,var(--k) 55%,transparent);
  color:var(--fg);background:color-mix(in srgb,var(--k) 10%,transparent)}
.pl{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:11px}
.panel.rt .pl{justify-items:end}
@media (max-width:900px){.panel.rt .pl{justify-items:start}}
/* a flex row split the label from its clause onto two columns; plain flow with an
   absolute rule keeps the sentence a sentence */
.pl li{position:relative;color:var(--fg2);font-size:14.5px;padding-left:28px;max-width:46ch}
.panel.rt .pl li{padding-left:0;padding-right:28px}
@media (max-width:900px){.panel.rt .pl li{padding-left:28px;padding-right:0}}
.pl li::before{content:"";position:absolute;left:0;top:.62em;width:16px;height:1px;
  background:var(--k);transition:background .6s}
.panel.rt .pl li::before{left:auto;right:0}
@media (max-width:900px){.panel.rt .pl li::before{left:0;right:auto}}
.pl li b{color:var(--fg);font-weight:600}

/* reveal */
.rv{opacity:0;transform:translateY(26px);
  transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}

/* ---------- hero ---------- */
/* the scrim bleeds sideways on purpose; clip it or it widens the document */
.hero{min-height:100svh;display:flex;align-items:stretch;text-align:center;
  overflow:hidden;padding-block:calc(92px + clamp(8px,1.6vh,20px)) clamp(12px,2vh,24px)}
.hero .wrap{display:flex;flex-direction:column}
.hero .wrap{position:relative;width:100%}
/* line one is 32 characters, so the measure has to clear it or the browser
   inserts a third line the design never asked for */
.hero h1{font-size:clamp(30px,6.4vw,90px);letter-spacing:-.048em;line-height:1.04;
  max-width:34ch;margin-inline:auto}
/* the forced break is right at desktop width and orphans "it." on a phone;
   drop it there and let text-wrap:balance split the lines evenly instead */
@media (max-width:620px){.hero h1{max-width:15ch}.hero h1 br{display:none}}
.hero h1 em{background:linear-gradient(96deg,#C9A227,#E3BC5C 50%,#8A6A1E);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{max-width:52ch;margin:clamp(22px,3vw,34px) auto 0;color:rgba(242,244,248,.82);
  font-size:clamp(16px,1.5vw,19.5px)}
.hb{display:flex;gap:12px;justify-content:center;margin-top:auto;flex-wrap:wrap}
.b1,.b2{display:inline-flex;align-items:center;gap:9px;min-height:52px;padding:0 28px;
  border-radius:100px;font-size:14.5px;font-weight:600;
  transition:transform .28s,background .28s,border-color .28s,color .28s}
.b1{background:var(--fg);color:#05060A}
.b1:hover{transform:translateY(-2px);background:#fff}
.b2{border:1px solid rgba(242,244,248,.34);background:rgba(242,244,248,.05);color:var(--fg)}
.b2:hover{border-color:var(--k);color:var(--k);transform:translateY(-2px)}
.rail{display:flex;gap:clamp(18px,3vw,44px);justify-content:center;flex-wrap:wrap;
  margin-top:clamp(40px,6vh,84px);color:rgba(242,244,248,.56)}
.rail span b{color:var(--fg);font-weight:600;display:block;margin-top:6px;
  font-family:"Inter Tight",sans-serif;font-size:14.5px;letter-spacing:-.01em}

/* ---------- section index, fixed ---------- */
.idx{position:fixed;right:clamp(14px,2.2vw,30px);top:50%;transform:translateY(-50%);
  z-index:70;display:grid;gap:13px}
.idx a{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;
  color:var(--fg3);font-family:"Space Mono",monospace;font-size:9.5px;
  transition:color .3s,background .3s}
.idx a::after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;
  border:1px solid currentColor;transition:transform .35s,background .35s}
.idx a span{position:absolute;right:34px;white-space:nowrap;opacity:0;
  font-size:10px;letter-spacing:.12em;transition:opacity .3s}
.idx a:hover span{opacity:1}
.idx a.on{color:var(--kt)}
.idx a.on::after{transform:scale(1.5);background:currentColor}
@media (max-width:860px){.idx{display:none}}

/* ---------- stack + close ---------- */
.band{min-height:100svh;display:flex;align-items:flex-end;
  padding-block:calc(92px + clamp(20px,4vh,56px)) clamp(22px,4vh,90px);
  border-top:1px solid var(--line)}
.band .wrap{width:100%}
.tg{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,50px);margin-top:34px}
@media (max-width:760px){.tg{grid-template-columns:1fr}}
.tg h3{font-family:"Space Mono",monospace;font-size:12.5px;letter-spacing:.15em;
  color:var(--kt);text-transform:uppercase;padding-bottom:11px;border-bottom:1px solid var(--line)}
.tg ul{list-style:none;margin:15px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tg li{font-family:"Space Mono",monospace;font-size:13.5px;color:var(--fg2);
  border:1px solid var(--line);border-radius:100px;padding:8px 14px;
  transition:border-color .25s,color .25s}
.tg li:hover{border-color:var(--k);color:var(--k)}
.end{padding-block:clamp(60px,10vw,150px);text-align:center}
.end h2{font-size:clamp(30px,5.6vw,80px);letter-spacing:-.05em}
/* was an inline style on the element, which no breakpoint could reach */
#stack h2{font-size:clamp(26px,3.4vw,46px);margin-top:16px}
.end h2 em{background:linear-gradient(96deg,#C9A227,#E3BC5C 50%,#8A6A1E);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.end p{color:var(--fg2);max-width:46ch;margin:20px auto 0}
.det{margin-top:clamp(38px,5vw,66px);display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;
  overflow:hidden;text-align:left}
@media (max-width:1080px){.det{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.det{grid-template-columns:1fr}}
.det>div{background:rgba(255,255,255,.03);padding:20px 22px;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.det .k{font-family:"Space Mono",monospace;font-size:11.5px;letter-spacing:.13em;
  color:var(--fg3);text-transform:uppercase}
.det .v{margin-top:8px;font-size:15.5px}
.det .v a{color:var(--kt);transition:color .25s;display:inline-flex;align-items:center;gap:8px}
.det .v a svg{flex:none}
.det .v a:hover{text-decoration:underline}
footer{border-top:1px solid var(--line);padding-block:24px 34px;color:var(--fg3);font-size:13px}
.fi2{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
}

/* ---------- footer: the inner pages need a way out ---------- */
.fi3{display:flex;align-items:center;justify-content:space-between;gap:clamp(16px,3vw,40px);
  flex-wrap:wrap;font-size:12px;letter-spacing:.1em;color:var(--fg3)}
.fw,.fy{text-transform:uppercase;font-family:"Space Mono",monospace}
.fnav{display:flex;gap:clamp(14px,2vw,28px);flex-wrap:wrap}
.fnav a{color:var(--fg3);text-decoration:none;font-family:"Space Mono",monospace;
  text-transform:uppercase;transition:color .3s}
.fnav a:hover{color:var(--fg)}
.fnav a[aria-current="page"]{color:var(--fg2)}
.fnav a:focus-visible{outline:1px solid var(--k);outline-offset:3px}

/* The three profiles are the only other place this company exists in public;
   the footer is where a reader goes looking for them. Icons, not words — the
   row already carries five uppercase labels and a sixth set would crowd it. */
.fl{display:flex;align-items:baseline;gap:clamp(10px,1.6vw,20px)}
.fsoc{display:flex;align-items:center;gap:6px;margin-right:-7px}
.fsoc a{color:var(--fg3);display:grid;place-items:center;width:30px;height:30px;
  border-radius:6px;transition:color .3s,background .3s}
.fsoc a:hover{color:var(--fg);background:rgba(255,255,255,.06)}
.fsoc a:focus-visible{outline:1px solid var(--k);outline-offset:2px}
/* the way in, from the service section to its own page */
.panel .more{margin-top:clamp(20px,3vh,32px)}
/* a text link disappeared under a wall of chips; the door into a whole page
   should look like a door */
.panel .more .b3{display:inline-flex;align-items:center;gap:11px;min-height:52px;padding:0 28px;
  border-radius:100px;background:color-mix(in srgb,var(--k) 10%,transparent);color:var(--k);
  font-size:15.5px;font-weight:600;letter-spacing:-.01em;text-decoration:none;
  border:1px solid color-mix(in srgb,var(--k) 55%,transparent);
  transition:transform .25s,border-color .25s,background .25s,box-shadow .25s}
.panel .more .b3:hover{transform:translateY(-2px);border-color:var(--k);
  background:color-mix(in srgb,var(--k) 18%,transparent);
  box-shadow:0 10px 30px color-mix(in srgb,var(--k) 18%,transparent)}
.panel .more .b3:focus-visible{outline:2px solid var(--k);outline-offset:3px}
.panel .more .b3 span{transition:transform .25s}
.panel .more .b3:hover span{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){
  .panel .more .b3,.panel .more .b3 span{transition:none}
  .panel .more .b3:hover{transform:none}
}
.panel.rt .more{margin-left:auto;text-align:right}
@media (max-width:620px){
  /* One row cannot hold a wordmark, a year, five links and three icons on a
     phone — it wrapped into a left-packed heap. Stacked and centred, each
     group gets its own line and the eye reads them in order of usefulness:
     where to go, where else we live, who this is. */
  .fi3{flex-direction:column;align-items:center;justify-content:center;
    gap:0;text-align:center}
  .fnav{order:1;width:100%;justify-content:center;gap:2px 14px}
  /* Three loose glyphs read as leftovers. A hairline ring makes them a set,
     and matches the pills the rest of the site is built from. */
  .fsoc{order:2;margin:16px 0 0;gap:14px}
  .fsoc a{border:1px solid var(--line);border-radius:50%}
  .fl{order:3;width:100%;justify-content:center;gap:10px;
    margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
}
.nav a[aria-current="page"]{color:var(--fg)}

/* laptop heights: the section is 100svh and the button must not push past it */
@media (min-width:901px) and (max-height:880px){
  .panel .more{margin-top:28px}
  .panel .more .b3{min-height:48px;font-size:15px;padding:0 26px}
}

/* the one line that says this is running, not a demo — kept out of the chip
   stack so it is read rather than skimmed */
.end .proof{display:inline-flex;max-width:none;align-items:center;gap:10px;margin-top:clamp(18px,2.6vh,28px);
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg3);
  border:1px solid var(--line);border-radius:100px;padding:10px 20px;white-space:nowrap}
.end .proof b{width:7px;height:7px;border-radius:50%;background:var(--k);flex:none;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--k) 18%,transparent)}
@media (max-width:620px){.end .proof{font-size:10px;padding:8px 13px;letter-spacing:.06em}}

/* After-it-ships band. Four answers to the one question every enterprise buyer
   asks and this site had no answer for: who picks up when it breaks. */
@media (max-width:900px){.af{grid-template-columns:1fr;gap:16px}}
@media (min-width:901px) and (max-height:820px){
  .af{margin-top:24px}.af span{font-size:12.5px}.af b{font-size:15px}
}


/* The closing block gained a button, which is 31px more than a 768px laptop
   had spare on the Apps page. The heading gives it back — it is the largest
   thing in the section and the least load-bearing at that size. */
@media (min-width:901px) and (max-height:800px){
  .end h2{font-size:clamp(28px,4.4vw,58px)}
  .end p{font-size:15px}
}

/* ============================================================
   Phones. Everything below is a measured fault on a real device
   size, not a guess at what small screens might want.
   ============================================================ */

/* The header is 92px and fixed, and nothing had scroll-margin, so every
   in-page link landed with its own heading hidden underneath the bar. */
section[id]{scroll-margin-top:96px}
@media (max-width:900px){section[id]{scroll-margin-top:130px}}

@media (max-width:720px){
  /* The nav was hidden outright below 720px, which left a phone visitor with
     no way from one page to another except the footer. It fits — the logo
     gives up its wordmark's share of the row and the links carry the rest. */
  .nav nav{display:flex;gap:13px;flex:1;justify-content:center;min-width:0}
  .nav nav a{font-size:12.5px;padding:11px 2px;white-space:nowrap}
  .nav{height:74px}
  .lg svg{height:32px}
  .cta{padding:10px 14px;font-size:12px;white-space:nowrap}
  .cta-long{display:none}
  .cta-short{display:inline}
  .ni{gap:8px}

  /* A 25px-tall phone number is the site's main conversion and was the
     hardest thing on the page to hit. 44px is the floor Apple and Material
     both give, and every one of these was under it. */
  .det .v a{padding:11px 0;min-height:44px}
  .fnav a{padding:0 4px;min-height:44px;display:grid;place-items:center}
  .lg{min-height:44px}

  /* Nothing on a phone should be under 12px; these labels were 9.5 to 11.5. */
  .c-ph{font-size:12px}
}
@media (max-width:359px){
  /* below this the three parts stop fitting on one line together */
  .nav nav{gap:9px}
  .nav nav a{font-size:12px}
  .cta{padding:9px 11px;font-size:11.5px}
}
@media (min-width:721px){
  .cta-short{display:none}
  .cta-long{display:inline}
}

@media (max-width:720px){
  /* The nav links were 26-33px wide. A finger is about 44, and the row has
     just enough for four of them once the logo drops its wordmark's share. */
  .nav nav a{min-width:44px;min-height:44px;padding:0 3px;
    display:grid;place-items:center}
}
@media (max-width:359px){
  .nav nav a{min-width:36px;padding:0 2px}
  .cta{font-size:12px}
}

@media (max-width:720px){
  /* The row wants logo 117 + nav 176 + button 100 = 393 in a 390px phone, so
     the three of them were sitting on top of each other. The lockup gives up
     its wordmark — the mark alone still identifies it, and the full name is
     in the footer. The mark occupies x 60-274 of the 1204-wide artwork, which
     at this height is 6px in and 22px across. */
  /* The wordmark returns, full size. One row cannot hold a real logo, four
     44px links and a button on a 390px screen — every squeeze either clipped
     the logo to an unrecognisable mark or spilled the links under the
     button. Two rows hold all three honestly: lockup and button above, the
     four links sharing the full width below a hairline. */
  /* Two rows is 119px of bar with the page running under all of it. The
     desktop's 86% tint plus a blur is built for a 92px strip over sparse
     copy; here a heading or a button passed straight through it — measured
     the same in both engines, so this was never a Safari quirk. The mobile
     bar is opaque, and the gradient below it does the softening. */
  .nav{height:auto;background:linear-gradient(180deg,rgba(5,6,10,.97) 78%,rgba(5,6,10,.72))}
  .nav.on{background:#05060A}
  .ni{flex-wrap:wrap;padding-block:10px 0}
  .lg{flex:none;order:1}
  .lg svg{height:38px}
  .nav .cta{order:2}
  .cta{min-height:44px;display:inline-flex;align-items:center}
  .nav nav{order:3;flex:1 1 100%;justify-content:space-between;gap:0;
    margin-top:9px;border-top:1px solid var(--line)}
  .nav nav a{flex:1;min-width:0;text-align:center;padding:0;
    min-height:46px;display:grid;place-items:center}
}

@media (max-width:720px){
  /* Four 44px links need 176 plus their gaps. The row hands the nav whatever
     the logo and the button leave, which at 375px was 195 against the 215 a
     13px gap wanted — hence the overlap. Six is enough to separate them. */
}
@media (max-width:400px){
}

@media (max-width:720px){
  /* The mark is 24px wide by design; the area a thumb has to hit need not be.
     Padding widens the target without moving the artwork. */
  /* Footer links were 34 wide; the row wraps, so there is room for a real one. */
  .fnav a{min-width:44px;text-align:center}
  /* Icon buttons need the same 44px floor as every other tap target. */
  .fsoc a{width:44px;height:44px}
  .fnav{flex-wrap:wrap;gap:4px}
  .cta{font-size:12px}
}

@media (max-width:720px){
  /* Nothing on a phone reads below 12px. These are all monospace labels and
     counts that sit fine at desktop density and stop being legible here. */
  .kick{font-size:12px}
  .det .k{font-size:12px}
  .a-ph figcaption{font-size:12px}
  .rail span{font-size:12px}
  .idx a span{font-size:12px}
}
@media (max-width:620px){
  .end .proof{font-size:12px;padding:9px 13px}
}

/* The closing proof is a pill on one line at desktop width; at 12px on a
   360px phone that line is wider than the screen. Let it wrap. */
@media (max-width:620px){
  /* the pill is one nowrap line at desktop width and wider than a small
     phone at 12px, so let it break */
  .end .proof{display:flex;max-width:100%;flex-wrap:wrap;row-gap:2px;
    white-space:normal;text-align:left}
}
/* the two-row header holds the full button at every width; the tiny label
   is retired but the span still exists in the markup */
.cta-tiny{display:none}
@media (max-width:374px){
  :root{--pad:14px}
}


@media (max-width:720px){
  /* A phone was showing every section's empty space twice — a band above the
     copy and another below it — because .panel centres its content. Two bands
     of nothing read as bad spacing, and the shape had no settled home between
     them, so its arrival looked arbitrary. Put the copy at the foot of the
     section: the space becomes one band with a job, and the shape lands in the
     same place in every section. */
  .panel{align-items:flex-end;
    padding-block:calc(119px + max(34svh, 240px)) clamp(26px,5vh,54px)}
  .band{padding-block:calc(119px + max(34svh, 240px)) clamp(26px,5vh,54px)}

  /* The hero was the only centred block on the page; every section under it is
     left-aligned, so on a narrow screen it read as a misalignment rather than
     a choice. */
  /* The hero was the one section with copy at the TOP, so the shape's fixed
     box — clear in every other section — sat under its headline. Its copy
     moves to the foot like everyone else's: one rule for the whole page, and
     the box is clear everywhere a section begins. */
  .hero{text-align:left;
    padding-block:calc(119px + clamp(14px,3vh,30px)) clamp(26px,5vh,54px)}
  .hero .wrap{justify-content:flex-end}
  .hero h1{max-width:none;margin-inline:0}
  .hero p{margin-inline:0}
  .hb{justify-content:flex-start}
  .rail{justify-content:flex-start}
}

@media (max-width:720px){
  /* 0.9s is a desktop pace. On a phone you scroll faster than the reveal
     finishes, so copy was still arriving after you had started reading it. */
  .rv{transition-duration:.55s;transform:translateY(18px)}
}

@media (max-width:720px){
  /* Both scales bottomed out on their clamp floor here: a 5vw heading is 19px
     on a 390px screen, so every heading on the page rendered at the 30px
     minimum while the same heading is 66-90px on a desktop. The page read as
     a shrunken copy of itself rather than a phone layout.

     The ceiling is set by the longest single word that has to fit the measure.
     "Warehouse management" is the tightest on the site and breaks at 51px on a
     320 screen, 61px at 390 and 67px at 430; the hero's "warehousing." breaks
     at 63 / 74 / 82. These sit under those with room to spare, and one scale
     covers every section so the page stays of a piece. */
  /* the four chip sections carry their size on an id selector, which no
     class rule can outrank however late it comes */
  .panel h2,.band h2,
  #s1 h2,#s2 h2,#s3 h2,#s4 h2,#stack h2{font-size:clamp(34px,12vw,54px);margin-top:14px}
  .hero h1{font-size:clamp(38px,14.4vw,66px)}
  .end h2{font-size:clamp(36px,13vw,60px)}
  .kick{margin-bottom:2px}
}