/* ==========================================================================
   THE RESILIENT ENGINE — theresilientengine.com

   The site is a sibling of the app, so it borrows the app's world: a near
   black ground with a green bias, the app's emerald for anything healthy or
   primary, its amber for the licensing track, its blue for breath work.
   Headlines are set in the same Didone the app uses for its wordmark.
   Monospace carries anything measured, the way it does on screen.

   No webfont is shipped. The stacks below prefer what the visitor already
   has, which is the same call the other two sites make.
   ========================================================================== */

:root{
  /* ground */
  --ground:#060B09;
  --raised:#0B1310;
  --raised-2:#101A16;

  /* type */
  --bone:#E4ECE7;
  --muted:#94A79F;
  --dim:#647870;

  /* signal */
  --green:#3FA96A;
  --green-hi:#5FCB8B;
  --amber:#D9A22B;
  --blue:#5B8CC4;

  /* structure */
  --line:rgba(88,170,124,.14);
  --line-2:rgba(88,170,124,.28);

  --display:"Didot","Bodoni 72","Bodoni MT",Georgia,"Times New Roman",serif;
  --sans:"Helvetica Neue",Helvetica,"Segoe UI",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --gut:clamp(1.25rem,5vw,4rem);
  --maxw:1180px;
  --read:38rem;

  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}

body{
  margin:0;
  background:var(--ground);
  color:var(--bone);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%; height:auto; display:block;}
a{color:inherit; text-decoration:none;}
p{margin:0;}
strong{font-weight:600; color:var(--bone);}

:focus-visible{outline:2px solid var(--green-hi); outline-offset:3px;}

h1,h2,h3,h4{margin:0; line-height:1.06; text-wrap:balance;}
h1,h2{font-family:var(--display); font-weight:400; letter-spacing:.002em;}
h1{font-size:clamp(2.6rem,6.4vw,5rem);}
h2{font-size:clamp(1.95rem,4.2vw,3.2rem); line-height:1.08;}
h3{font-family:var(--sans); font-weight:600; font-size:1.06rem; letter-spacing:-.012em; line-height:1.3;}
h1 em,h2 em{font-style:italic; color:var(--green-hi);}

.skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--green); color:#04120A; padding:.75rem 1rem; font-weight:700;}
.skip:focus{left:.5rem; top:.5rem;}

/* --- atoms --------------------------------------------------------------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding-left:var(--gut); padding-right:var(--gut);}

.mono{font-family:var(--mono); font-size:.67rem; letter-spacing:.16em; text-transform:uppercase; font-weight:400;}
.lab{color:var(--dim);}
.lab-g{color:var(--green);}
.lab-a{color:var(--amber);}
.lab-b{color:var(--blue);}

.body{color:var(--muted);}
.sm{font-size:.92rem;}
.lead{font-size:clamp(1.06rem,2.2vw,1.28rem); color:var(--muted); line-height:1.6;}
.read{max-width:var(--read);}

.stack{display:flex; flex-direction:column; gap:1.1rem;}
.stack-s{display:flex; flex-direction:column; gap:.55rem;}

.btn{
  display:inline-block; padding:.95rem 1.5rem; border-radius:2px;
  font-family:var(--sans); font-size:.9rem; font-weight:600; letter-spacing:-.005em;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.btn-1{background:var(--green); color:#04120A; border-color:var(--green);}
.btn-1:hover{background:var(--green-hi); border-color:var(--green-hi);}
.btn-2{border-color:var(--line-2); color:var(--bone);}
.btn-2:hover{border-color:var(--green); color:var(--green-hi);}
.btn-a{background:var(--amber); color:#140E02; border-color:var(--amber);}
.btn-a:hover{filter:brightness(1.1);}
.btn-row{display:flex; flex-wrap:wrap; gap:.75rem;}

.sec{border-top:1px solid var(--line);}
.sec-in{padding-top:clamp(3.5rem,8vw,7rem); padding-bottom:clamp(3.5rem,8vw,7rem);}
.sec-alt{background:var(--raised);}
.sec-head{display:flex; flex-direction:column; gap:.9rem; margin-bottom:clamp(2rem,4.5vw,3.25rem);}
.sec-head .lead{max-width:44rem;}

.two{display:grid; gap:clamp(1.75rem,4vw,3.5rem);}
@media(min-width:54rem){.two{grid-template-columns:1fr 1fr;}}

/* --- nav ----------------------------------------------------------------- */
.nav{position:sticky; top:0; z-index:100; background:rgba(6,11,9,.86); backdrop-filter:blur(12px); border-bottom:1px solid var(--line);}
.nav-in{display:flex; align-items:center; gap:1.25rem; height:64px;}
.brand{display:flex; flex-direction:column; line-height:1; margin-right:auto; flex:none;}
.brand .the{font-family:var(--mono); font-size:.52rem; letter-spacing:.4em; color:var(--green); margin-bottom:.28rem;}
.brand .nm{font-family:var(--display); font-size:1.06rem; letter-spacing:.04em;}
.nav-links{display:none; gap:1.6rem; align-items:center;}
.nav-links a{color:var(--muted); transition:color .16s;}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--bone);}
.nav-cta{flex:none;}
.nav-toggle{
  display:block; flex:none; background:none; border:1px solid var(--line-2); color:var(--bone);
  font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  padding:.5rem .8rem; cursor:pointer; border-radius:2px;
}
@media(min-width:62rem){
  .nav-links{display:flex;}
  .nav-toggle{display:none;}
}
@media(max-width:61.99rem){
  .nav-links{
    display:none; position:absolute; top:64px; left:0; right:0;
    background:var(--raised); border-bottom:1px solid var(--line);
    flex-direction:column; align-items:flex-start; gap:0; padding:.5rem var(--gut) 1rem;
  }
  .nav-links.open{display:flex;}
  .nav-links a{padding:.8rem 0; width:100%; border-bottom:1px solid var(--line);}
  .nav-cta{display:none;}
}

/* --- hero ---------------------------------------------------------------- */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line);}
#trace{position:absolute; inset:0; width:100%; height:100%; opacity:.5; pointer-events:none;}
.hero-in{position:relative; padding-top:clamp(4rem,11vw,8.5rem); padding-bottom:clamp(4rem,11vw,8.5rem); display:flex; flex-direction:column; gap:1.6rem; align-items:flex-start;}
.hero h1{max-width:16ch;}
.hero .lead{max-width:34rem;}
.slogan{
  font-family:var(--display); font-style:italic;
  font-size:clamp(1.15rem,2.6vw,1.6rem); color:var(--green-hi);
  padding-left:1.1rem; border-left:2px solid var(--green); line-height:1.35;
}

/* --- model summary ------------------------------------------------------- */
.engine{display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line);}
.eng-row{background:var(--raised-2); padding:1.5rem 1.5rem; display:flex; flex-direction:column; gap:.5rem;}
.eng-row b{font-size:1.15rem; letter-spacing:-.01em;}
.eng-axes{display:grid; gap:1px; background:var(--line);}
@media(min-width:46rem){.eng-axes{grid-template-columns:1fr 1fr;}}
.eng-out{background:var(--raised-2); box-shadow:inset 0 2px 0 var(--green);}
.eng-out b{color:var(--green-hi); font-family:var(--display); font-size:1.5rem;}
.eng-base b{color:var(--blue);}
.eng-primary{margin-top:.4rem; padding-top:.7rem; border-top:1px solid var(--line); font-size:.92rem; color:var(--bone);}
.eng-primary span{display:block; margin-bottom:.15rem;}

/* --- app showcase -------------------------------------------------------- */
.screens{
  display:grid; gap:clamp(1.25rem,3vw,2.25rem);
  grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));
}
.screen{margin:0; display:flex; flex-direction:column; gap:.9rem;}
.screen img{
  border-radius:14px; border:1px solid var(--line-2);
  background:#000; box-shadow:0 18px 44px rgba(0,0,0,.5);
}
.screen figcaption{display:flex; flex-direction:column; gap:.25rem; font-size:.88rem; color:var(--muted); line-height:1.55;}
.screen figcaption b{color:var(--bone); font-size:.95rem;}

/* --- metric tiles -------------------------------------------------------- */
.metrics{display:grid; gap:1px; background:var(--line); border:1px solid var(--line);}
@media(min-width:34rem){.metrics{grid-template-columns:repeat(2,1fr);}}
@media(min-width:58rem){.metrics{grid-template-columns:repeat(4,1fr);}}
.metric{background:var(--raised-2); padding:1.4rem 1.35rem; display:flex; flex-direction:column; gap:.35rem;}
.metric .v{font-family:var(--display); font-size:2.1rem; line-height:1; color:var(--green-hi); font-variant-numeric:tabular-nums;}
.metric .v small{font-family:var(--sans); font-size:.8rem; color:var(--dim); margin-left:.2rem;}
.metric .k{color:var(--bone); font-size:.95rem; font-weight:600;}
.metric p{color:var(--muted); font-size:.86rem; line-height:1.55;}

/* --- lists --------------------------------------------------------------- */
.ticks{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.85rem;}
.ticks li{position:relative; padding-left:1.5rem; color:var(--muted); font-size:.95rem; line-height:1.6;}
.ticks li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:7px; height:7px; border:1px solid var(--green); background:transparent;
}

/* --- proof --------------------------------------------------------------- */
.creds{display:grid; gap:1px; background:var(--line); border:1px solid var(--line);}
@media(min-width:40rem){.creds{grid-template-columns:repeat(3,1fr);}}
.cred{background:var(--raised-2); padding:1.5rem 1.35rem; display:flex; flex-direction:column; gap:.4rem;}
.cred .n{font-family:var(--display); font-size:2.4rem; line-height:1; color:var(--bone);}
.cred p{color:var(--muted); font-size:.88rem; line-height:1.55;}

.logos{display:flex; flex-wrap:wrap; align-items:center; gap:clamp(1.5rem,4vw,3rem); }
.logos img{height:22px; width:auto; opacity:.5; filter:grayscale(1) brightness(1.9); transition:opacity .2s;}
.logos img:hover{opacity:.85;}

/* --- doors --------------------------------------------------------------- */
.doors{display:grid; gap:1px; background:var(--line); border:1px solid var(--line);}
@media(min-width:56rem){.doors{grid-template-columns:repeat(3,1fr);}}
.door{
  background:var(--raised-2); padding:clamp(1.6rem,3vw,2.1rem) 1.5rem;
  display:flex; flex-direction:column; gap:.85rem; align-items:flex-start;
  transition:background .2s;
}
.door:hover{background:#131F1A;}
.door h3{font-family:var(--display); font-weight:400; font-size:1.5rem; letter-spacing:.01em;}
.door p{color:var(--muted); font-size:.92rem; line-height:1.6; flex:1;}
.door .go{font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--green); margin-top:.3rem;}
.door.b2b .go{color:var(--amber);}
.door.b2b{box-shadow:inset 0 2px 0 var(--amber);}
.door.dtc{box-shadow:inset 0 2px 0 var(--green);}
.door.brand{box-shadow:inset 0 2px 0 var(--blue);}
.door.brand .go{color:var(--blue);}

/* --- signup -------------------------------------------------------------- */
.signup{background:var(--raised-2); border:1px solid var(--line-2); padding:clamp(1.75rem,4vw,2.75rem);}
.signup-grid{display:grid; gap:clamp(1.5rem,3vw,2.5rem); align-items:start;}
@media(min-width:52rem){.signup-grid{grid-template-columns:1fr 1fr;}}
.field{display:flex; flex-direction:column; gap:.45rem; margin-bottom:.9rem;}
.field label{font-family:var(--mono); font-size:.63rem; letter-spacing:.16em; text-transform:uppercase; color:var(--dim);}
.field input,.field textarea,.field select{
  background:var(--ground); border:1px solid var(--line-2); color:var(--bone);
  font-family:var(--sans); font-size:.95rem; padding:.8rem .85rem; border-radius:2px; width:100%;
}
.field textarea{min-height:7rem; resize:vertical;}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--green); outline:none;}
.form-note{font-size:.82rem; color:var(--dim); margin-top:.7rem; line-height:1.55;}
.form-msg{margin-top:.85rem; font-size:.9rem; display:none;}
.form-msg.ok{display:block; color:var(--green-hi);}
.form-msg.err{display:block; color:#E8846A;}

/* --- footer -------------------------------------------------------------- */
footer{border-top:1px solid var(--line); background:var(--raised);}
.foot-in{padding-top:clamp(2.5rem,5vw,4rem); padding-bottom:clamp(2.5rem,5vw,4rem); display:grid; gap:2rem;}
@media(min-width:52rem){.foot-in{grid-template-columns:1.4fr 1fr 1fr;}}
.foot-col{display:flex; flex-direction:column; gap:.6rem;}
.foot-col a{color:var(--muted); font-size:.92rem; transition:color .16s;}
.foot-col a:hover{color:var(--bone);}
.foot-bottom{border-top:1px solid var(--line); padding:1.35rem 0; color:var(--dim); font-size:.82rem; display:flex; flex-wrap:wrap; gap:.75rem 1.5rem;}

/* --- resonance chart (model page) ---------------------------------------- */
.res{border:1px solid var(--line); background:var(--raised-2); padding:1.25rem;}
.res-canvas{display:block; width:100%; height:clamp(180px,26vw,300px);}
.res-legend{display:flex; flex-wrap:wrap; gap:1.25rem; align-items:center; margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line);}
.res-key{display:inline-flex; align-items:center; gap:.5rem; color:var(--muted); font-size:.63rem; letter-spacing:.14em;}
.res-key i{width:16px; height:2px; flex:none;}
.res-key.is-hr i{background:var(--green);}
.res-key.is-br i{background:var(--blue);}

/* --- prose (legal and long form) ----------------------------------------- */
.prose{
  max-width:var(--read); margin:0 auto;
  padding-top:clamp(3rem,7vw,5.5rem); padding-bottom:clamp(3rem,7vw,5.5rem);
  display:flex; flex-direction:column; gap:1.15rem;
}
.prose h1{font-size:clamp(2.1rem,5vw,3.2rem); margin-bottom:.4rem;}
.prose h2{
  font-size:clamp(1.3rem,2.6vw,1.7rem); margin-top:1.75rem;
  padding-top:1.5rem; border-top:1px solid var(--line);
}
.prose p{color:var(--muted); font-size:1rem; line-height:1.75;}
.prose a{color:var(--green-hi); text-decoration:underline; text-underline-offset:3px;}

/* The honeypot. Off screen rather than display:none, since some bots skip
   anything that is not rendered at all. */
.hp{position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0;}

/* ==========================================================================
   THE DEVICE

   A phone drawn in CSS rather than shipped as a mockup PNG, so it stays sharp
   at any size, weighs nothing, and can be recolored per screen.

   Proportions come from a real iPhone, expressed as fractions of the device
   width so one --w drives the whole thing: 14% corner radius on the screen,
   a dynamic island 30% of the width, a 13.2% status bar.

   The status bar takes its background from --top, which is the color sampled
   from the top edge of that screen's own image. That is what makes it read as
   one continuous surface instead of a screenshot pasted into a frame.
   ========================================================================== */

.device{
  --w:280px;
  --bez:calc(var(--w) * .03);
  width:var(--w);
  flex:none;
  padding:var(--bez);
  border-radius:calc(var(--w) * .17);
  background:linear-gradient(150deg,#3C4744 0%,#171E1B 26%,#0D1211 62%,#2E3835 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 2px 3px rgba(0,0,0,.6),
    0 30px 60px -18px rgba(0,0,0,.9);
  position:relative;
}

/* Side buttons. Barely visible, but their absence is the thing that makes a
   CSS phone look like a rounded rectangle. */
.device::before,
.device::after{
  content:""; position:absolute; width:calc(var(--w) * .009);
  background:linear-gradient(180deg,#39433F,#222A27);
  border-radius:2px;
}
.device::before{ left:calc(var(--w) * -.006); top:22%; height:13%; }
.device::after{ right:calc(var(--w) * -.006); top:26%; height:9%; }

.device-screen{
  position:relative;
  border-radius:calc(var(--w) * .14);
  overflow:hidden;
  background:var(--top,#000);
  display:flex; flex-direction:column;
}

.device-status{
  height:calc(var(--w) * .132);
  background:var(--top,#000);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 calc(var(--w) * .075) calc(var(--w) * .012);
  flex:none;
  position:relative; z-index:2;
}
.device-status .clock{
  font-family:var(--sans);
  font-size:calc(var(--w) * .042);
  font-weight:600;
  color:#fff;
  letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
}
.device-status .meters{
  width:calc(var(--w) * .155);
  height:calc(var(--w) * .042);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 14' fill='%23ffffff'%3E%3Crect x='0' y='8' width='3' height='4' rx='1'/%3E%3Crect x='4.6' y='6' width='3' height='6' rx='1'/%3E%3Crect x='9.2' y='3.6' width='3' height='8.4' rx='1'/%3E%3Crect x='13.8' y='1.4' width='3' height='10.6' rx='1'/%3E%3Cpath d='M22.2 4.9a7.6 7.6 0 0 1 9.6 0l-1.2 1.5a5.7 5.7 0 0 0-7.2 0z'/%3E%3Cpath d='M24.4 7.6a4.2 4.2 0 0 1 5.2 0L27 10.6z'/%3E%3Crect x='38' y='2.4' width='20' height='9.2' rx='2.6' fill='none' stroke='%23ffffff' stroke-opacity='.5' stroke-width='1.1'/%3E%3Crect x='39.4' y='3.8' width='14' height='6.4' rx='1.5'/%3E%3Cpath d='M59.2 5.6v2.8a1.9 1.9 0 0 0 0-2.8z' fill-opacity='.5'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* The island sits over the status bar, as it does on the device. */
.device-island{
  position:absolute; z-index:3;
  top:calc(var(--w) * .026);
  left:50%; transform:translateX(-50%);
  width:calc(var(--w) * .30);
  height:calc(var(--w) * .086);
  background:#000;
  border-radius:999px;
}

.device-screen img{
  display:block; width:100%; height:auto;
  position:relative; z-index:1;
}

/* The home indicator draws over the app's own tab bar, same as iOS. */
.device-home{
  position:absolute; z-index:3;
  bottom:calc(var(--w) * .018);
  left:50%; transform:translateX(-50%);
  width:calc(var(--w) * .34);
  height:calc(var(--w) * .0115);
  background:rgba(255,255,255,.5);
  border-radius:999px;
}

/* A single diagonal sheen across the glass. One, faint, and only on the
   larger presentation phones, because on a small one it just looks like dirt. */
.device.gloss .device-screen::after{
  content:""; position:absolute; inset:0; z-index:4; pointer-events:none;
  background:linear-gradient(122deg,rgba(255,255,255,.085) 0%,rgba(255,255,255,.02) 26%,rgba(255,255,255,0) 46%);
}

/* --- top edge colors, sampled from each screen ---------------------------- */
.top-home       {--top:#245744;}
.top-morning    {--top:#000000;}
.top-drjay      {--top:#000000;}
.top-sessions   {--top:#020202;}
.top-stats      {--top:#020202;}
.top-measuring  {--top:#000000;}
.top-results    {--top:#1D1E21;}
.top-closing    {--top:#000000;}
.top-resonance  {--top:#000000;}

/* --- hero, split with the device ----------------------------------------- */
.hero-split{display:grid; gap:clamp(2.5rem,6vw,4rem); align-items:center;}
@media(min-width:60rem){.hero-split{grid-template-columns:1.02fr .98fr;}}
.hero-copy{display:flex; flex-direction:column; gap:1.5rem; align-items:flex-start; min-width:0;}
.hero-stage{display:flex; justify-content:center; position:relative;}
.hero-stage .device{--w:clamp(232px,27vw,340px);}

/* A slow lift, so the phone reads as present rather than pasted on. */
@keyframes lift{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-9px);}
}

/* A pool of light under the phone, so it sits on the page instead of over it. */
.hero-stage::before{
  content:""; position:absolute; z-index:-1;
  width:min(115%,520px); aspect-ratio:1;
  left:50%; top:50%; transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(63,169,106,.15) 0%,rgba(63,169,106,.05) 40%,transparent 68%);
  pointer-events:none;
}

/* --- the app showcase ---------------------------------------------------- */
.showcase{display:grid; gap:clamp(2rem,5vw,3.5rem); align-items:center;}
@media(min-width:60rem){.showcase{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);}}
.showcase-stage{display:flex; justify-content:center; position:relative;}
.showcase-stage .device{--w:clamp(230px,26vw,300px);}

/* Feature list beside the phone. Their site puts four cards next to a phone;
   this is the same idea with the labels doing the work instead of icons. */
.feats{display:grid; gap:1px; background:var(--line); border:1px solid var(--line);}
@media(min-width:34rem){.feats{grid-template-columns:1fr 1fr;}}
.feat{background:var(--raised-2); padding:1.3rem 1.3rem; display:flex; flex-direction:column; gap:.4rem;}
.feat b{font-size:1rem; letter-spacing:-.01em;}
.feat p{color:var(--muted); font-size:.88rem; line-height:1.6;}
.feat .tag{color:var(--green);}

/* --- device rail, three or more screens side by side --------------------- */
.rail{
  display:flex; gap:clamp(1rem,3vw,2.25rem);
  overflow-x:auto; padding-bottom:1rem;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
}
.rail::-webkit-scrollbar{height:6px;}
.rail::-webkit-scrollbar-thumb{background:var(--line-2); border-radius:3px;}
.rail-item{
  scroll-snap-align:start; flex:none;
  display:flex; flex-direction:column; gap:1rem; margin:0;
  width:clamp(200px,24vw,244px);
}

.rail-item figcaption{display:flex; flex-direction:column; gap:.25rem; font-size:.86rem; color:var(--muted); line-height:1.55;}
.rail-item figcaption b{color:var(--bone); font-size:.93rem;}
.device-screen picture{display:block; width:100%; line-height:0;}

/* In the split hero the headline shares the row with the phone, so it needs a
   smaller scale and a tighter measure than the full width heroes. */
.hero-split h1{font-size:clamp(2.25rem,4.3vw,3.45rem); max-width:15ch;}
.hero-split .lead{max-width:31rem;}
@media(min-width:60rem){
  .hero-split{padding-top:clamp(2.5rem,5vw,4rem); padding-bottom:clamp(2.5rem,5vw,4rem);}
}

/* --- a grid of framed devices (the app page) ------------------------------ */
.device-grid{
  display:grid; gap:clamp(2rem,4vw,3.25rem);
  grid-template-columns:repeat(auto-fit,minmax(min(215px,100%),1fr));
}
.device-grid figure{margin:0; display:flex; flex-direction:column; gap:1.1rem; align-items:center;}

.device-grid figcaption{
  display:flex; flex-direction:column; gap:.3rem;
  font-size:.87rem; color:var(--muted); line-height:1.6; text-align:center; max-width:26ch;
}
.device-grid figcaption b{color:var(--bone); font-size:.95rem;}

/* The rail swipes on narrow screens and settles into an even four-up grid on
   wide ones, so no card is ever left half cut at the container edge. */
@media(min-width:70rem){
  .rail{display:grid; grid-template-columns:repeat(4,1fr); overflow:visible; padding-bottom:0;}
  .rail-item{width:auto;}
}

/* --------------------------------------------------------------------------
   Sizing the device inside a fluid column.

   --w drives every dimension in the frame through calc(), and a percentage
   inside calc() resolves against the inline axis for width but the block axis
   for height. Feeding --w a percentage therefore produced a correct looking
   width with a broken status bar and a mispositioned island. Container query
   units are real lengths, so one value drives both axes correctly.
   -------------------------------------------------------------------------- */
.rail-item,
.device-grid figure{container-type:inline-size;}
.rail-item .device{--w:100cqw;}
.device-grid .device{--w:min(100cqw,252px);}

/* The drift lives on .tilt so it never competes with the 3D transform on
   .device, which one transform property could not carry at the same time. */
.hero-stage .tilt{animation:lift 7s ease-in-out infinite; transform-style:preserve-3d;}
@media (prefers-reduced-motion:reduce){.hero-stage .tilt{animation:none;}}
@media(min-width:60rem){.hero-stage::before{left:54%;}}

/* On a narrow screen the trace runs behind the copy and the buttons rather
   than beside them, so it drops back. */
@media(max-width:60rem){#trace{opacity:.26;}}

/* ==========================================================================
   THE PHONE IN THREE DIMENSIONS

   A flat rotation only ever looks like a tilted picture. To read as an object
   the frame is built as three planes sharing one preserve-3d context: the
   front, the right rail and the bottom, each hinged on the edge it belongs to
   and folded back ninety degrees.

   Depth is 10.5% of the width, which is an iPhone's thickness against its
   width. That reads thin on purpose. What sells metal is not thickness, it is
   the chamfer: a bright line where each face turns, and a dark core between
   two highlights along the rail. The rails are titanium rather than the dark
   frame used elsewhere, because a dark edge on a near black page shows no
   geometry at all, and the geometry is the whole point.
   ========================================================================== */

.stage3d{perspective:1750px; perspective-origin:56% 42%;}

.device.is-3d{
  --depth:calc(var(--w) * .105);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.16),
    0 2px 4px rgba(0,0,0,.55),
    0 34px 70px -20px rgba(0,0,0,.9);
  transform-style:preserve-3d;
  transform:none;
  background:
    linear-gradient(155deg,#D6E2DD 0%,#8A9894 14%,#5A6560 44%,#A9B7B2 68%,#4B5551 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.30),
    inset 0 0 0 2px rgba(0,0,0,.25);
}
.device.is-3d::before,
.device.is-3d::after{display:none;}

.face{display:none;}

/* Right rail. Two highlights with a dark core is what a chamfered edge does to
   a light source, and it is the single most convincing detail here. Turned
   this way it is the right side that shows, so it carries the power key. */
.face-right{
  left:100%; top:0; height:100%; width:var(--depth);
  transform-origin:left center;
  transform:rotateY(90deg);
  background:linear-gradient(90deg,
    #E8F1EC 0%, #9FADA8 14%, #55605C 44%, #3E4845 62%, #8F9D98 86%, #D5E2DD 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.5);
}

/* Bottom face, hinged on the bottom edge. The one that shows the underside. */
.face-bottom{
  top:100%; left:0; width:100%; height:var(--depth);
  transform-origin:center top;
  transform:rotateX(-90deg);
  background:linear-gradient(180deg,
    #EAF2EE 0%, #A2B0AB 16%, #58635F 46%, #414B47 64%, #93A19C 88%, #D8E4DF 100%);
  display:flex; align-items:center; justify-content:center;
  gap:calc(var(--w) * .026);
  box-shadow:inset 1px 0 0 rgba(255,255,255,.4), inset -1px 0 0 rgba(0,0,0,.45);
}

/* Bottom hardware, at the scale it really is: grille, port, grille. */
.port{
  width:calc(var(--w) * .10); height:calc(var(--depth) * .34);
  background:linear-gradient(180deg,#141917,#2A322F);
  border-radius:999px; flex:none;
  box-shadow:inset 0 1px 1.5px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.55);
}
.grille{display:flex; gap:calc(var(--w) * .0135); flex:none;}
.grille i{
  width:calc(var(--w) * .0095); height:calc(var(--w) * .0095);
  background:#1A201E; border-radius:50%;
  box-shadow:inset 0 .5px .5px rgba(0,0,0,.9), 0 .5px 0 rgba(255,255,255,.45);
}

/* Power button, standing proud of the rail. */
.p-btn{
  position:absolute; right:calc(var(--depth) * -.14);
  width:calc(var(--depth) * .28);
  background:linear-gradient(180deg,#DCE8E3,#79857F 40%,#4C5652);
  border-radius:0 2px 2px 0;
  box-shadow:0 1px 0 rgba(0,0,0,.5);
}
.p-power{top:31%; height:11%;}

/* A brighter sheen on the turned glass, since the screen now faces the light. */
.device.is-3d.gloss .device-screen::after{
  background:linear-gradient(112deg,
    rgba(255,255,255,.15) 0%, rgba(255,255,255,.045) 28%, rgba(255,255,255,0) 50%);
}

/* The cast shadow is its own plane on the floor, because a box-shadow cannot
   lie flat underneath a rotated object. */
.shadow3d{display:none;
  position:absolute; z-index:-1; left:50%; top:74%;
  width:calc(var(--w, 300px) * 1.2); height:calc(var(--w, 300px) * .34);
  transform:translate(-50%,0) rotateX(74deg) rotateZ(8deg);
  background:radial-gradient(ellipse at center,rgba(0,0,0,.9) 0%,rgba(0,0,0,.55) 40%,transparent 70%);
  filter:blur(20px); pointer-events:none;
}

/* On a narrow screen the phone sits under the copy with no room to lean into,
   so it stands square and the faces turn edge on and disappear. */
@media(max-width:60rem){
  .device.is-3d{transform:none;}
}

/* --------------------------------------------------------------------------
   The hero shot.

   A rendered mockup rather than a frame drawn in CSS: it carries real rails,
   a real specular highlight and a real cast shadow, none of which a transform
   can fake. Its own ground is (7,7,9) against the page's (6,11,9) and its
   edges are feathered to transparent, so it sits on the page rather than on a
   rectangle. The lift is the only thing left for CSS to do.
   -------------------------------------------------------------------------- */
.hero-shot{
  display:block; width:100%; height:auto;
  max-width:clamp(330px,42vw,530px);
  margin-inline:auto;
  animation:lift 7s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce){.hero-shot{animation:none;}}

/* The mockup brings its own light, so the pool behind it is no longer wanted. */
.hero-stage::before{display:none;}

/* Rendered device shots in the body of the page. Same asset treatment as the
   hero: feathered to the page ground, so no frame or shadow is added here. */
.shot{display:block; width:100%; height:auto; max-width:clamp(280px,34vw,420px); margin-inline:auto;}
.showcase-stage .shot{max-width:clamp(300px,36vw,440px);}

/* --------------------------------------------------------------------------
   Photographic heroes.

   The device shots carry the two product pages. The argument pages carry
   Jay instead, because on a personal-authority site a picture of the person
   making the claim outperforms any stock photograph of a stranger.

   Two treatments, so no two pages open the same way: a portrait beside the
   copy where the frame is tall, and a full width band beneath it where the
   frame is wide.
   -------------------------------------------------------------------------- */
.hero-photo{
  position:relative; border:1px solid var(--line-2); overflow:hidden;
  max-width:clamp(280px,34vw,420px); margin-inline:auto;
}
.hero-photo img{display:block; width:100%; height:auto;}
/* The shoot is warm and the page is near black, so the frame is graded down
   at the edges to sit on the ground instead of glowing against it. */
.hero-photo::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg,rgba(6,11,9,.42) 0%,rgba(6,11,9,0) 30%,rgba(6,11,9,.30) 78%,rgba(6,11,9,.72) 100%),
    linear-gradient(90deg,rgba(6,11,9,.30) 0%,rgba(6,11,9,0) 22%,rgba(6,11,9,0) 78%,rgba(6,11,9,.30) 100%);
}

.band-photo{position:relative; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.band-photo img{display:block; width:100%; height:auto; max-height:clamp(280px,42vw,460px); object-fit:cover; object-position:center 38%;}
.band-photo::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(6,11,9,.55) 0%,rgba(6,11,9,.10) 40%,rgba(6,11,9,.55) 100%);
}
.band-photo .band-cap{
  position:absolute; left:0; right:0; bottom:0; padding:clamp(1rem,3vw,1.75rem) 0;
}
.band-photo .band-cap p{color:var(--bone); max-width:34rem;}

/* A third hero treatment: the photograph behind the copy rather than beside
   or beneath it. Used once, on /media/, so the five pages open five ways. */
.hero-full{position:relative; overflow:hidden; border-bottom:1px solid var(--line);}
.hero-full > picture img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 42%; z-index:0;
}
.hero-full::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg,rgba(6,11,9,.96) 0%,rgba(6,11,9,.86) 42%,rgba(6,11,9,.55) 100%),
    linear-gradient(180deg,rgba(6,11,9,.65) 0%,rgba(6,11,9,.20) 45%,rgba(6,11,9,.90) 100%);
}
.hero-full .hero-in{position:relative; z-index:2;}

/* --------------------------------------------------------------------------
   FAQ.

   Native <details>, so it opens without JavaScript, is keyboard operable and
   screen reader announced for free, and survives the script failing to load.
   The marker is drawn as a plus that becomes a minus, because the default
   triangle cannot be styled consistently across browsers.
   -------------------------------------------------------------------------- */
.faq{display:flex; flex-direction:column; border-top:1px solid var(--line);}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{
  list-style:none; cursor:pointer; position:relative;
  padding:1.15rem 3rem 1.15rem 0;
  font-size:clamp(1rem,1.9vw,1.12rem); font-weight:600; color:var(--bone);
  letter-spacing:-.012em; line-height:1.4;
  transition:color .16s;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:hover{color:var(--green-hi);}
.faq summary:focus-visible{outline:2px solid var(--green-hi); outline-offset:3px;}
.faq summary::before,
.faq summary::after{
  content:""; position:absolute; right:.35rem; top:50%;
  background:var(--green); transition:transform .22s ease, opacity .22s ease;
}
.faq summary::before{width:14px; height:2px; transform:translateY(-50%);}
.faq summary::after{width:2px; height:14px; right:.95rem; transform:translateY(-50%);}
.faq details[open] summary::after{transform:translateY(-50%) rotate(90deg); opacity:0;}
.faq details[open] summary{color:var(--green-hi);}
.faq .answer{padding:0 3rem 1.5rem 0; display:flex; flex-direction:column; gap:.9rem;}
.faq .answer p{color:var(--muted); font-size:.97rem; line-height:1.7;}
.faq .answer a{color:var(--green-hi); text-decoration:underline; text-underline-offset:3px;}

/* The supported-device list inside an answer. */
.kit{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.2rem;}
.kit span{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--line-2); color:var(--bone); padding:.42rem .7rem; border-radius:2px;
}
.kit span.is-cam{border-color:rgba(63,169,106,.5); color:var(--green-hi);}