/* IBM Plex Sans Thai, SIL Open Font License 1.1 (see assets/fonts/LICENSE.txt).
   Self-hosted so the page renders with one typeface everywhere and the
   content-security-policy can stay on font-src 'self'. */
@font-face{font-family:"BizPilot Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url("/home/assets/fonts/plex-thai-400-latin.woff2") format("woff2");
  unicode-range:U+0020-007E,U+00A0,U+00A9,U+00AE,U+2013-2014,U+2018-2019,U+201C-201D,U+2022,U+2026,U+2122}
@font-face{font-family:"BizPilot Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url("/home/assets/fonts/plex-thai-400-thai.woff2") format("woff2");
  unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"BizPilot Sans";font-style:normal;font-weight:600;font-display:swap;
  src:url("/home/assets/fonts/plex-thai-600-latin.woff2") format("woff2");
  unicode-range:U+0020-007E,U+00A0,U+00A9,U+00AE,U+2013-2014,U+2018-2019,U+201C-201D,U+2022,U+2026,U+2122}
@font-face{font-family:"BizPilot Sans";font-style:normal;font-weight:600;font-display:swap;
  src:url("/home/assets/fonts/plex-thai-600-thai.woff2") format("woff2");
  unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"BizPilot Sans";font-style:normal;font-weight:700;font-display:swap;
  src:url("/home/assets/fonts/plex-thai-700-latin.woff2") format("woff2");
  unicode-range:U+0020-007E,U+00A0,U+00A9,U+00AE,U+2013-2014,U+2018-2019,U+201C-201D,U+2022,U+2026,U+2122}
@font-face{font-family:"BizPilot Sans";font-style:normal;font-weight:700;font-display:swap;
  src:url("/home/assets/fonts/plex-thai-700-thai.woff2") format("woff2");
  unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}

/* BizPilot OS public homepage.
   Layout, type scale and colours are measured from the approved master
   artwork so the rendered page matches it while every word stays real,
   selectable HTML text. */

:root{
  --ink:#20120a;
  --ink-soft:#2a1b10;
  --ink-muted:#63503c;
  --gold:#a5713c;
  --gold-hi:#c9974f;
  --cream:#fbf3e4;
  --cream-deep:#f2e6d2;
  --line:rgba(60,40,24,.28);
  --cta-a:#8d4f1e;
  --cta-b:#6a3a14;
  --cta-c:#4b280e;
  --header-a:#3a2416;
  --header-b:#5b3b21;
  --green:#1fdd7c;
  --glow:#efce9d;
  --card-a:rgba(34,27,22,.92);
  --card-b:rgba(18,14,11,.94);
  --font:"BizPilot Sans","IBM Plex Sans Thai","Noto Sans Thai","Sarabun","Prompt","Leelawadee UI","Thonburi",Tahoma,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --shell:1740px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* The page must never clip sideways to look correct: clipping silently clamps
   scrollWidth, which is what let a real header overflow slip past the automated
   checks. Anything wider than the viewport has to be fixed at its source. */
html,body{max-width:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink-soft);
  background:var(--cream);
  line-height:1.55;
}
img,svg,picture{display:block;max-width:100%}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,p{margin:0}
a{color:inherit}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{
  position:absolute;left:0;top:0;z-index:99;
  background:var(--cta-b);color:#fff;padding:.7rem 1rem;border-radius:0 0 .6rem 0;
  transform:translateY(-130%);
}
.skip-link:focus{transform:translateY(0)}
:focus-visible{outline:3px solid var(--gold-hi);outline-offset:2px;border-radius:4px}

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:inherit;font-weight:600;text-decoration:none;
  border-radius:999px;white-space:nowrap;
  transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease;
}
.btn .arrow{display:inline-flex;align-items:center;width:1.4em;flex:none}
.btn .arrow svg{width:100%;height:auto;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.btn-primary{
  color:#fff7ea;
  background:linear-gradient(103deg,var(--cta-a) 0%,var(--cta-b) 52%,var(--cta-c) 100%);
  box-shadow:0 .55rem 1.5rem rgba(60,32,12,.32),inset 0 1px 0 rgba(255,225,185,.34);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 .8rem 1.9rem rgba(60,32,12,.4),inset 0 1px 0 rgba(255,225,185,.4)}
.btn-secondary{
  color:var(--ink);
  background:rgba(255,253,246,.78);
  border:1.5px solid rgba(60,38,20,.5);
  backdrop-filter:blur(2px);
}
.btn-secondary:hover{transform:translateY(-2px);background:rgba(255,255,255,.94)}
.btn-ghost{color:#fff;border:1.5px solid rgba(214,163,99,.95);background:rgba(28,17,8,.2)}
.btn-ghost:hover{background:rgba(255,226,182,.16)}
.btn .play{
  display:inline-flex;align-items:center;justify-content:center;
  width:2em;height:2em;border-radius:999px;background:#17100a;flex:none;
}
.btn .play svg{width:100%;height:100%;fill:#fff}

/* ------------------------------------------------------------------- hero */
.hero{background:var(--cream)}
.hero-stage{width:100%;max-width:var(--shell);margin-inline:auto;position:relative}
.hero-canvas{--u:1vw;position:relative;display:flex;flex-direction:column}
@supports (width:1cqw){
  .hero-stage{container-type:inline-size}
  .hero-canvas{--u:1cqw}
}
.hero-photo{order:2}
.hero-photo img{width:100%;height:auto;aspect-ratio:1672/941}

/* header ------------------------------------------------------------------
   Phone layout is a three-column grid - burger, logo, language - with the menu
   as a full-width row underneath. A flex row cannot do this: the panel needs to
   sit on its own line, and a flex item can only wrap onto one when the
   container wraps, which pushed the whole menu off the right edge. */
.site-header{
  order:1;z-index:6;
  display:grid;
  /* minmax(0,1fr) rather than 1fr: a bare 1fr track has an automatic minimum,
     so a wide side control would push the header past the viewport instead of
     letting its own column shrink. */
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  column-gap:.5rem;
  padding-block:.45rem;
  padding-inline:max(clamp(10px,3.5vw,18px),env(safe-area-inset-left))
                 max(clamp(10px,3.5vw,18px),env(safe-area-inset-right));
  background:linear-gradient(105deg,var(--header-a) 0%,#6a5a50 52%,#43250d 100%);
}
/* Every header child must be allowed to shrink; the default min-width:auto on a
   grid item is what turns a slightly-too-wide control into page overflow. */
.site-header > *{min-width:0}
.site-header .brand{grid-area:1/2;justify-self:center;display:block;line-height:0;max-width:100%}
.site-header .brand img{width:clamp(112px,36vw,186px);max-width:100%;height:auto}
.nav-toggle{
  grid-area:1/1;justify-self:start;
  width:46px;height:46px;border-radius:12px;
  border:1px solid rgba(233,201,157,.55);background:rgba(20,12,6,.3);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.nav-toggle-bars,.nav-toggle-bars::before,.nav-toggle-bars::after{
  display:block;width:20px;height:2px;background:#fff;border-radius:2px;content:"";
  transition:transform .18s ease,background-color .18s ease,top .18s ease;
}
.nav-toggle-bars{position:relative}
.nav-toggle-bars::before{position:absolute;top:-6px}
.nav-toggle-bars::after{position:absolute;top:6px}
/* open: the two outer bars cross into a close icon */
.nav-toggle[aria-expanded="true"] .nav-toggle-bars{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after{top:0;transform:rotate(-45deg)}
.lang-switch{
  grid-area:1/3;justify-self:end;
  display:flex;align-items:center;gap:.4rem;color:#fff;
  font-size:.95rem;white-space:nowrap;
}
/* the panel keeps clear of the home indicator and the rounded corners */
.site-nav{padding-inline:max(0px,env(safe-area-inset-left)) max(0px,env(safe-area-inset-right))}
.lang-switch a{text-decoration:none;opacity:.82;padding:.35rem .1rem}
.lang-switch a:hover{opacity:1;text-decoration:underline}
.lang-switch [aria-current]{font-weight:700}
.lang-sep{opacity:.55}
.site-nav{
  grid-area:2/1/3/4;
  display:none;
  margin-top:.45rem;
  border-top:1px solid rgba(255,232,197,.22);
}
.site-nav.is-open{display:block}
.site-nav ul{display:block;padding:.2rem 0 .55rem}
.site-nav li + li{border-top:1px solid rgba(255,232,197,.14)}
.site-nav a{
  display:flex;align-items:center;min-height:54px;
  padding:.5rem .3rem;color:#fff;text-decoration:none;
  font-size:1.06rem;line-height:1.3;white-space:nowrap;
}
.site-nav a:hover,.site-nav a:focus-visible{background:rgba(255,232,197,.14)}
.site-nav a.is-active{font-weight:600}
.nav-cta{border-top:0}
.nav-cta a{
  justify-content:center;margin-top:.6rem;min-height:56px;
  border-radius:999px;font-weight:600;color:#fff7ea;
  background:linear-gradient(103deg,var(--cta-a) 0%,var(--cta-b) 52%,var(--cta-c) 100%);
  box-shadow:0 .4rem 1rem rgba(60,32,12,.35);
}
/* the trial button lives inside the menu on a phone, so the header keeps to
   three controls and every label stays on one line */
.header-cta{display:none}

/* hero copy --------------------------------------------------------------- */
.hero-copy{order:3;padding:clamp(20px,6vw,30px) clamp(16px,5vw,24px) 4px}
.eyebrow{
  font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-muted);font-weight:600;
}
.hero-copy h1{
  margin-top:.55rem;font-weight:700;line-height:1.14;letter-spacing:-.01em;
  font-size:clamp(1.85rem,7.6vw,2.6rem);
}
.h1-a,.h1-b{display:block}
.h1-a{color:var(--ink)}
.h1-b{color:var(--gold);background:linear-gradient(96deg,#c08a4e 0%,#a5713c 48%,#8a5426 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.lede{margin-top:.7rem;font-size:clamp(1rem,4.1vw,1.15rem);color:var(--ink-soft)}
.cta-row{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.1rem}
.hero-copy .btn{font-size:1rem;padding:.85rem 1.25rem}
.hero-copy .btn-primary{flex:1 1 100%}
.hero-copy .btn-secondary{flex:1 1 100%}

/* feature strip ----------------------------------------------------------- */
.hero-features{
  order:5;
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:1.1rem .5rem;
  padding:1.3rem clamp(16px,5vw,24px) clamp(22px,6vw,30px);
}
.hero-features li{display:flex;flex-direction:column;align-items:center;gap:.5rem;text-align:center}
.hero-features .ico{display:block;width:2.1rem;height:1.75rem}
.hero-features svg{width:100%;height:100%;fill:none;stroke:var(--ink);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.hero-features svg rect,.hero-features svg circle{fill:var(--ink);stroke:none}
.hero-features .lbl{font-size:.86rem;line-height:1.35;color:var(--ink)}

/* automation card --------------------------------------------------------- */
.status-card{
  order:4;
  margin:0 clamp(16px,5vw,24px);
  padding:1rem 1.05rem 1.1rem;
  border-radius:16px;
  background:linear-gradient(160deg,var(--card-a),var(--card-b));
  border:1px solid rgba(239,206,157,.5);
  box-shadow:0 1rem 2.4rem rgba(35,20,8,.4),inset 0 0 1.4rem rgba(255,220,170,.1);
  color:#fff;
}
.status-head{display:grid;grid-template-columns:1fr auto;align-items:start;gap:.5rem}
.status-head picture{grid-area:1/1/2/2}
.status-tag{grid-area:2/1/3/2}
.status-arrow{grid-area:1/2/3/3;align-self:center}
.status-head img{width:min(210px,72%);height:auto}
.status-tag{font-size:.8rem;color:#e9dcc9;margin-top:.1rem;padding-left:.2rem}
.status-arrow{width:2.6rem}
.status-arrow svg{width:100%;height:auto;fill:none;stroke:var(--green);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.status-list{display:grid;gap:.6rem;margin-top:.9rem}
.status-list li{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:.55rem}
.status-list span:last-child{text-wrap:balance}
.status-list b{font-size:.94rem;font-weight:700}
.status-list span:last-child{font-size:.9rem;color:#efe6d8}
.tick{
  width:1.55rem;height:1.55rem;border-radius:999px;background:var(--green);
  display:inline-flex;align-items:center;justify-content:center;flex:none;
}
.tick svg{width:78%;height:78%;fill:none;stroke:#0d2a18;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}

/* --------------------------------------------------------------- sections */
.section{padding:clamp(40px,8vw,72px) clamp(16px,5vw,24px);max-width:1140px;margin-inline:auto}
.section-alt{max-width:none;background:linear-gradient(180deg,var(--cream-deep),#e9dac2)}
.section-alt > *{max-width:1140px;margin-inline:auto}
.section h2{
  margin-top:.5rem;font-size:clamp(1.45rem,4.4vw,2.05rem);line-height:1.3;
  color:var(--ink);font-weight:700;
}
.section-lede{margin-top:.8rem;font-size:clamp(1rem,2.6vw,1.1rem);max-width:60ch}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem;margin-top:1.8rem}
.card{
  background:#fffaf0;border:1px solid rgba(90,62,36,.16);border-radius:14px;
  padding:1.2rem 1.15rem;box-shadow:0 .5rem 1.4rem rgba(80,52,28,.07);
}
.card h3{font-size:1.1rem;color:var(--ink);font-weight:700}
.card p{margin-top:.5rem;font-size:.97rem}
.avail{
  display:inline-block;margin-top:.9rem;font-size:.78rem;font-weight:600;
  color:#5a3a1a;background:rgba(197,152,92,.22);border-radius:999px;padding:.3rem .7rem;
}
.panel{
  margin-top:1.6rem;background:#fffaf0;border:1px solid rgba(90,62,36,.16);
  border-radius:16px;padding:clamp(18px,4vw,28px);box-shadow:0 .5rem 1.4rem rgba(80,52,28,.07);
}
.panel h3{font-size:1.2rem;color:var(--ink);font-weight:700}
.panel p + p{margin-top:.7rem}
.ticks{margin-top:1rem;display:grid;gap:.55rem}
.ticks li{position:relative;padding-left:1.7rem}
.ticks li::before{
  content:"";position:absolute;left:0;top:.42em;width:.85rem;height:.85rem;
  border-radius:999px;background:var(--green);
}
.panel .cta-row{margin-top:1.4rem}
.panel .btn{font-size:1rem;padding:.8rem 1.2rem}
.note{margin-top:1.4rem;font-size:.9rem;color:#6a563f;max-width:75ch}

/* ----------------------------------------------------------------- footer */
.site-footer{background:linear-gradient(105deg,var(--header-a),#4a2d16);color:#f3e7d5}
.footer-inner{max-width:1140px;margin-inline:auto;padding:clamp(28px,6vw,44px) clamp(16px,5vw,24px)}
.footer-brand{font-weight:700;letter-spacing:.02em}
.footer-brand span{display:block;font-weight:400;font-size:.72rem;letter-spacing:.24em;color:#cbb392;margin-top:.25rem}
.site-footer nav ul{display:flex;flex-wrap:wrap;gap:.6rem 1.3rem;margin-top:1.2rem}
.site-footer a{text-decoration:none;opacity:.88}
.site-footer a:hover{opacity:1;text-decoration:underline}
.footer-note{margin-top:1.4rem;font-size:.84rem;color:#c7b193}

/* ==========================================================================
   Desktop / tablet-landscape: the master composition, rebuilt as an overlay.
   Every offset is a percentage of the artwork so the copy tracks the photo
   exactly at any width.
   ========================================================================== */
@media (min-width:861px){
  /* Beyond the artwork width the surround picks up the plate edge colours. */
  .hero{background:linear-gradient(180deg,#42301f 0%,#7d5941 55%,#93684c 100%)}

  /* The overlay layout makes the artwork as tall as it is wide over 1.301, so
     on a short window the foot of the picture - the table, the mug, the books,
     the camera - falls below the fold and the hero reads as if it had been cut.
     Bounding the artwork by the window height instead of cropping it keeps the
     whole master visible without a scroll. Every overlay offset is a share of
     the artwork width (--u), so the header keeps its place on the picture. */
  .hero-stage{max-width:min(var(--shell), calc(100vh * 1672 / 941))}

  .hero-canvas{display:block}
  .site-header,.hero-copy,.hero-features,.status-card{position:absolute}

  /* Offsets are expressed in --u (1% of the artwork width) rather than in
     percentages, so a padded or nested ancestor cannot change what they
     resolve against. */
  .site-header{
    inset:0 0 auto 0;height:calc(var(--u) * 7.72);background:none;
    display:flex;align-items:center;
    padding:0 calc(var(--u) * 5.4) 0 calc(var(--u) * 3.2);gap:0;
  }
  .site-header .brand{grid-area:auto;justify-self:auto;width:calc(var(--u) * 31.59)}
  /* The mark is drawn light on dark. Sitting on open sky it needs its own
     edge, or the white of the wordmark dissolves into the cloud behind it. */
  .site-header .brand img{
    width:100%;
    filter:drop-shadow(0 calc(var(--u) * .08) calc(var(--u) * .28) rgba(24,14,4,.55))
           drop-shadow(0 0 calc(var(--u) * .9) rgba(24,14,4,.32));
  }
  .nav-toggle{display:none}
  .nav-cta a{margin-top:0}
  .nav-cta{display:none}
  .site-nav{grid-area:auto;order:0;display:block;margin-top:0;border-top:0;margin-left:calc(var(--u) * 1.9)}
  .site-nav ul{display:flex;flex-direction:row;gap:calc(var(--u) * 1.97);padding:0}
  .site-nav li + li{border-top:0}
  .site-nav a{
    display:inline;min-height:0;padding:0;font-size:calc(var(--u) * 1.5);
    text-shadow:0 1px 3px rgba(30,16,6,.45);white-space:nowrap;
  }
  .site-nav a:hover{background:none;text-decoration:underline;text-underline-offset:.35em}
  .site-nav a.is-active{font-weight:500;position:relative}
  .site-nav a.is-active::after{
    content:"";position:absolute;left:8%;right:8%;bottom:calc(var(--u) * -.95);
    height:1px;background:rgba(255,255,255,.85);
  }
  .lang-switch{
    grid-area:auto;justify-self:auto;order:0;margin-left:auto;margin-right:calc(var(--u) * 3.2);
    font-size:calc(var(--u) * 1.5);gap:calc(var(--u) * .5);
    text-shadow:0 1px 3px rgba(30,16,6,.45);white-space:nowrap;
  }
  .header-cta{
    display:inline-flex;order:0;width:calc(var(--u) * 15.28);height:calc(var(--u) * 4.95);padding:0;
    font-size:calc(var(--u) * 1.55);font-weight:500;
    background:rgba(24,14,6,.14);
  }

  .hero-copy{left:calc(var(--u) * 6.19);top:calc(var(--u) * 10.6);width:calc(var(--u) * 52);padding:0}
  .eyebrow{font-size:calc(var(--u) * 1.24);letter-spacing:.26em}
  .hero-copy h1{
    margin-top:calc(var(--u) * .62);
    font-size:calc(var(--u) * 4.12);line-height:1.09;
  }
  .lede{
    margin-top:calc(var(--u) * 1);
    font-size:calc(var(--u) * 1.82);line-height:1.46;
  }
  .cta-row{margin-top:calc(var(--u) * 1.5);gap:calc(var(--u) * 1.5);flex-wrap:nowrap}
  .hero-copy .btn{
    font-size:calc(var(--u) * 1.5);font-weight:500;
    padding:0 calc(var(--u) * 1.15);height:calc(var(--u) * 4.22);flex:0 0 auto;
  }
  .hero-copy .btn-primary{min-width:calc(var(--u) * 21.47)}
  .hero-copy .btn-secondary{gap:calc(var(--u) * .55)}
  .hero-copy .btn .play{width:calc(var(--u) * 2.15);height:calc(var(--u) * 2.15)}

  .hero-features{
    left:calc(var(--u) * 5.39);top:calc(var(--u) * 36.1);width:calc(var(--u) * 34.28);
    grid-template-columns:repeat(4,1fr);gap:0;padding:0;
  }
  .hero-features li{gap:calc(var(--u) * .7);padding-inline:calc(var(--u) * .35)}
  .hero-features li + li{border-left:1px solid rgba(255,248,236,.5)}
  .hero-features .ico{width:calc(var(--u) * 3.2);height:calc(var(--u) * 2.7)}
  /* The old plate had this strip dissolved to a pale wash, so dark ink read on
     it. The photograph keeps its blanket and its lantern, and dark ink is lost
     on both - so the strip reads light here, with its own edge, and the picture
     stays exactly as it was shot. */
  .hero-features .lbl{
    font-size:calc(var(--u) * 1.22);line-height:1.4;white-space:nowrap;
    color:#fff8ec;text-shadow:0 1px calc(var(--u) * .12) rgba(18,10,3,.72),
                              0 0 calc(var(--u) * .55) rgba(18,10,3,.5);
  }
  .hero-features svg{stroke:#fff8ec}
  .hero-features svg rect,.hero-features svg circle{fill:#fff8ec}
  .hero-features .ico{filter:drop-shadow(0 1px calc(var(--u) * .12) rgba(18,10,3,.7))}

  /* The card is dark and opaque, so where it lands matters: on the new artwork
     its old place at 54.5u put it straight over the mother's and the child's
     faces. Measured against the picture, the only clear column that misses
     every face and the robot is the far right, so it anchors there and scales
     to fit it - one origin and one factor rather than re-sizing its contents. */
  .status-card{
    right:calc(var(--u) * 2.1);top:calc(var(--u) * 10.4);width:calc(var(--u) * 22.6);margin:0;
    padding:calc(var(--u) * 1.2) calc(var(--u) * 1.25) calc(var(--u) * 2.1);
    border-radius:calc(var(--u) * 1.5);
    transform:scale(.6) rotate(-6.2deg) perspective(1000px) rotateY(-15deg) rotateX(1.6deg);
    transform-origin:100% 0;
    box-shadow:0 calc(var(--u) * 1.2) calc(var(--u) * 3) rgba(35,20,8,.45),
               0 0 calc(var(--u) * 2.4) rgba(255,214,150,.3),
               inset 0 0 calc(var(--u) * 1.6) rgba(255,220,170,.12);
  }
  .status-head{grid-template-columns:1fr auto;gap:calc(var(--u) * .4)}
  .status-head picture{grid-area:1/1/2/2}
  .status-head img{width:76%}
  .status-tag{grid-area:2/1/3/2;font-size:calc(var(--u) * 1.24);margin-top:calc(var(--u) * .1);padding-left:12%}
  .status-arrow{grid-area:1/2/3/3;align-self:center;width:calc(var(--u) * 4.8)}
  .status-list{gap:calc(var(--u) * 1.5);margin-top:calc(var(--u) * 1.25)}
  .status-list li{gap:calc(var(--u) * .55);align-items:baseline}
  .status-list b{font-size:calc(var(--u) * 1.32)}
  .status-list span:last-child{font-size:calc(var(--u) * 1.26)}
  .tick{width:calc(var(--u) * 2.2);height:calc(var(--u) * 2.2)}
}

@media (min-width:861px) and (max-width:1023px){
  .hero-copy h1{font-size:calc(var(--u) * 4)}
  .site-nav ul{gap:calc(var(--u) * 1.5)}
}

/* English copy is longer than the Thai master copy, so the overlay keeps the
   master's anchor points while the headline and navigation get their own
   measure. */
@media (min-width:861px){
  .lang-en .hero-copy h1{font-size:calc(var(--u) * 3.18);min-height:calc(var(--u) * 8.98)}
  .lang-en .lede{font-size:calc(var(--u) * 1.72)}
  .lang-en .hero-copy .btn{font-size:calc(var(--u) * 1.4)}
  .lang-en .site-nav{margin-left:calc(var(--u) * 1.2)}
  .lang-en .site-nav ul{gap:calc(var(--u) * 1.55)}
  .lang-en .site-nav a{font-size:calc(var(--u) * 1.4)}
  .lang-en .lang-switch{font-size:calc(var(--u) * 1.4);padding-left:calc(var(--u) * 2)}
  .lang-en .status-list b{font-size:calc(var(--u) * 1.24)}
  .lang-en .status-list span:last-child{font-size:calc(var(--u) * 1.18)}
  .lang-en .hero-features .lbl{font-size:calc(var(--u) * 1.2)}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  .btn:hover{transform:none}
}