/* Doorman — the landing page only. */
/* ---------- hero ---------- */
/* The canvas is full-bleed and sits behind the grid, so the bundle can run off
   both edges the way it does off the top. Body already carries overflow-x:hidden,
   which is what makes the 100vw safe next to a scrollbar. */
.filaments{
  position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);
  width:100vw;z-index:0;pointer-events:none;display:block;
  /* Kept off the headline. The drawing earns the upper right; the lower left
     belongs to the words, and a hero you have to squint through is a hero that
     failed. */
  -webkit-mask-image:linear-gradient(96deg,transparent 22%,rgba(0,0,0,.42) 34%,#000 48%);
  mask-image:linear-gradient(96deg,transparent 22%,rgba(0,0,0,.42) 34%,#000 48%);
}
.hero-copy,.hero-art{position:relative;z-index:1}

.hero{
  position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;
  padding:30px 32px 92px;
  display:grid;grid-template-columns:1.02fr .98fr;gap:64px;align-items:center;
  /* The drawing needs vertical room to fan. Below this the bundle compresses
     into a scribble, which is what it did when it had to share the hero with a
     566px device. */
  min-height:min(82svh,760px);
}

/* The right column carries the drawing behind it and the tally in front. */
.hero-art{
  margin:0;align-self:stretch;
  display:flex;align-items:flex-end;justify-content:flex-end;
  padding:0 4px 10px 0;
}

/* ---------- the tally ----------
   The door log at its smallest possible size. Eleven marks, three lit.

   Drawn with elements rather than a font or an image so the lit ones can carry
   the same brass as the strands landing beside them, and so the whole thing
   stays sharp at any zoom. Each mark is skewed a couple of degrees and given
   its own height, because eleven identical rectangles read as a chart and
   eleven slightly uneven ones read as a count somebody kept. */
.tally{
  display:grid;justify-items:start;gap:0;
  padding:20px 0 0;max-width:22ch;
  /* No card, no glass, no shadow. The pill this replaced was a UI chip sitting
     on top of the drawing; a rule and some type sit IN it, which is what makes
     this read as a figure in a document rather than a widget. */
  border-top:1px solid var(--hairline-strong);
}
.tally-n{
  font-family:'Clash Display',sans-serif;font-weight:600;
  font-size:46px;line-height:.9;letter-spacing:-.045em;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.tally-marks{display:flex;align-items:flex-end;gap:5px;height:34px;margin:14px 0 12px}
.tally-marks i{
  display:block;width:3px;border-radius:2px;
  background:var(--accent-deep);opacity:.34;
  transform:skewX(-9deg) scaleY(var(--h,1));
  transform-origin:50% 100%;
  height:26px;
}
/* Uneven on purpose — see the note above. */
.tally-marks i:nth-child(2){--h:.88}
.tally-marks i:nth-child(4){--h:.93}
.tally-marks i:nth-child(5){--h:.82}
.tally-marks i:nth-child(8){--h:.9}
.tally-marks i:nth-child(9){--h:.85}
.tally-marks i:nth-child(11){--h:.95}
/* The three that got through, in the light from the door beside them. */
.tally-marks i.lit{
  width:4px;opacity:1;
  background:linear-gradient(180deg,#E8B871,#C89A54);
  box-shadow:0 0 12px rgba(200,154,84,.75),0 0 3px rgba(255,243,220,.9);
}
.tally figcaption{
  font-size:13.5px;line-height:1.5;color:var(--muted);letter-spacing:.005em;
}
.tally figcaption b{font-weight:500;color:var(--accent-deep)}

/* The marks strike in, so the count reads as something being kept rather than
   something that was already there. Struck before the reveal machinery gets to
   it, hence the explicit starting state here. */
.js .tally-marks i{transform:skewX(-9deg) scaleY(0)}

/* ---------- sections ---------- */
section{position:relative;z-index:1}
/* content-visibility was here and had to come out. It defers layout for
   offscreen sections, so their heights change as they scroll in, and every
   scroll position ScrollTrigger measured at load becomes wrong. The symptom
   was the page being 900px shorter than it thought and the end-of-page
   animations never firing at all. A few milliseconds of layout is not worth a
   scroll system that silently mismeasures itself. */
.immunities,.how,.pricing,.codes,.reply{max-width:var(--maxw);margin:0 auto;padding:112px 32px}
.immunities,.how,.pricing,.codes,.reply{border-top:1px solid var(--hairline)}

/* ---------- the reply, which is the thing nothing else here does ---------- */
.reply-inner{display:grid;grid-template-columns:1.04fr .96fr;gap:64px;align-items:center}
.reply-card{
  border:1px solid var(--hairline);border-left:2px solid var(--accent);
  border-radius:20px;padding:22px 22px 20px;
  background:var(--glass-strong);backdrop-filter:var(--glass-filter);
  box-shadow:var(--lift-2);
}
.reply-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.reply-body{
  margin:16px 0 4px;font-size:16px;color:var(--ink);line-height:1.5;
}
.reply-field{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:16px;padding:12px 14px;border-radius:13px;
  border:1px solid var(--hairline);background:var(--ground);
  font-size:14.5px;color:var(--muted);
}
.reply-field i{
  font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:#FFFFFF;background:linear-gradient(180deg,var(--accent),var(--accent-deep));
  padding:6px 13px;border-radius:100px;white-space:nowrap;
}
.reply-note{
  font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  color:var(--dim);margin:14px 0 0;
}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px}
.card{
  border:1px solid var(--hairline);border-radius:18px;padding:28px 26px 30px;
  background:var(--glass);backdrop-filter:var(--glass-filter);
  box-shadow:var(--lift-1);
  transition:border-color .6s var(--ease),transform .6s var(--ease);
}
.card:hover{border-color:rgba(47,107,79,.35);transform:translateY(-3px);box-shadow:var(--lift-2)}
.card-n{font-size:11px;color:var(--accent);letter-spacing:.18em;margin-bottom:16px}
.card h3{font-size:20px;letter-spacing:-.018em;margin-bottom:11px;line-height:1.25}
.card p{font-size:14.5px;color:var(--muted);margin:0;line-height:1.62}

/* ---------- the code window ---------- */
.codes-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.window-card{
  border:1px solid var(--hairline);border-radius:20px;padding:26px 26px 24px;
  background:var(--glass);backdrop-filter:var(--glass-filter);
  box-shadow:var(--lift-2);
}
.window-top{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.window-k{font-family:'Clash Display',sans-serif;font-size:19px;letter-spacing:-.015em}
.window-timer{font-size:22px;color:var(--accent-deep);letter-spacing:.01em}
.window-bar{height:4px;border-radius:4px;background:var(--accent-soft);overflow:hidden;margin:18px 0 14px}
.window-bar i{display:block;height:100%;width:100%;transform-origin:0 50%;background:linear-gradient(90deg,var(--accent-deep),var(--accent))}
.window-note{font-size:13px;color:var(--muted);margin:0}

/* ---------- steps ---------- */
.steps{list-style:none;padding:0;margin:52px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
/* The number badge straddles the rule, so it must still be *inside* this
   element's box: .reveal masks each step, and a CSS mask clips to the border
   box, which sliced the top half off every number. So the box starts 15px
   above the rule, the rule is drawn by ::before rather than as a border, and
   the badge sits at the top of the padding with nothing painted outside. */
.steps li{position:relative;padding-top:41px}
.steps li::before{
  content:"";position:absolute;left:0;right:0;top:15px;height:1px;
  background:var(--hairline);
}
.step-n{
  position:absolute;top:0;left:0;width:30px;height:30px;border-radius:50%;
  background:var(--paper);border:1px solid rgba(47,107,79,.4);color:var(--accent);
  display:grid;place-items:center;font-size:12px;font-weight:700;font-family:var(--mono);
}
.steps h3{font-size:19px;margin-bottom:9px;letter-spacing:-.016em}
.steps p{color:var(--muted);font-size:14.5px;margin:0}

/* ---------- pricing ---------- */
.pricing{text-align:center}
.pricing .section-h{margin:0 auto;max-width:20ch}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:52px 0 34px;text-align:left}
.price-card{
  border:1px solid var(--hairline);border-radius:18px;padding:28px 26px;background:var(--paper);
  box-shadow:var(--lift-1);
  display:flex;flex-direction:column;
}
.price-card.feature{border-color:rgba(47,107,79,.4);box-shadow:var(--lift-3)}
.price-k{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.price-v{font-family:'Clash Display',sans-serif;font-size:31px;color:var(--accent-deep);margin:12px 0 12px;letter-spacing:-.026em}
.price-unit{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.04em}
.price-p{color:var(--muted);font-size:14px;margin:0;line-height:1.6}
.promises{
  list-style:none;padding:0;margin:0 auto;max-width:640px;text-align:left;
  display:flex;flex-direction:column;gap:11px;
}
.promises li{
  font-size:14.5px;color:var(--muted);padding-left:26px;position:relative;line-height:1.55;
}
.promises li::before{
  content:"";position:absolute;left:4px;top:.62em;width:7px;height:7px;border-radius:50%;
  background:var(--accent);
}
.promises strong{color:var(--ink);font-weight:500}

/* ---------- responsive: home only ---------- */
@media (max-width:980px){
  .hero,.scene-inner,.codes-inner,.reply-inner{grid-template-columns:1fr;gap:52px;text-align:center}
  .hero{padding:32px 24px 90px;min-height:0}
  /* Stacked, the copy is full-width, so a diagonal mask cannot keep the
     strands off the headline — they ran straight through it. The drawing gets
     its own band under the words instead of a layer behind them, which is the
     only version of this that stays readable at 375px. */
  .filaments{
    top:auto;bottom:76px;height:200px;width:100%;left:0;transform:none;
    -webkit-mask-image:linear-gradient(#000 62%,transparent);
    mask-image:linear-gradient(#000 62%,transparent);
  }
  .hero{gap:34px}
  /* Stacked, the drawing gets its own band at the foot of the hero, so the
     tally has to sit ABOVE it rather than on it — at flex-end the figure
     landed directly on the strands and neither could be read. */
  .hero-art{align-items:flex-start;justify-content:flex-start;min-height:250px;padding:0 0 0 2px}
  .tally{max-width:26ch}
  .scene-inner{padding:80px 24px;min-height:0}
  .hero-copy,.scene-copy{display:flex;flex-direction:column;align-items:center}
  .beats{align-self:stretch;text-align:left}
  .scene-hint{display:none}
  .cards,.steps,.price-grid{grid-template-columns:1fr}
  .immunities,.how,.pricing,.codes,.reply{padding:78px 24px}
  .reply-card,.reply-head,.reply-field{text-align:left}
}


/* ---------- the chamber ----------------------------------------------------
   The one dark thing on this site.

   Three rules, and each is a consequence of the darkness rather than a taste:

   - Light is additive here and nowhere else. `lighter` compositing on cream
     just washes to white; on a near-black ground it is how a real bloom
     behaves, which is why the brass finally reads as light rather than as a
     second brand colour.
   - The black is green-biased (#0D1712), never neutral. A neutral black beside
     eucalyptus reads as a hole cut in the page; a black that carries the same
     hue reads as the same room with the lamp off.
   - Type opens up. Display faces that are tuned for ink-on-paper clog when the
     contrast inverts, so the headline loses weight and gains tracking rather
     than being reused as-is.

   The section paints its own ground rather than letting the page wash show
   through, and it fades in at the edges so it reads as walking into a room
   instead of a slide transition. */
.chamber{
  position:relative;z-index:2;
  /* the pin needs somewhere to travel; js/threshold.js sets the real length */
  background:transparent;
}
.chamber-inner{
  position:relative;height:100svh;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  /* Painted here rather than on .chamber so the pinned element carries its own
     ground: a pin-spacer with no background shows the bone page through. */
  background:
    radial-gradient(120% 90% at 50% 42%, #16261E 0%, #0D1712 58%, #080F0C 100%);
  /* Soft top and bottom edges, so the room has no seam. */
  -webkit-mask-image:linear-gradient(#000 0 0);
  color:#DCE7DF;
}
.chamber-inner::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:6;
  background:linear-gradient(#0D1712,transparent 11%,transparent 86%,#0D1712 99%);
}
/* Grain, again structural: a radial this large bands badly in 8-bit, and it
   is far more visible on black than it ever was on bone. */
.chamber-inner::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:7;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:screen;
}

.chamber-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2;display:block}

/* ---------- the doorway ---------- */
.doorway{
  position:absolute;z-index:3;
  height:min(76svh,620px);width:auto;
  left:50%;top:50%;transform:translate(-50%,-50%);
  pointer-events:none;overflow:visible;
}
.doorway-arch{
  filter:drop-shadow(0 0 14px rgba(78,158,120,.34));
  opacity:0;
}
.doorway-slit{
  /* No transform-box and no transform-origin on purpose: js/threshold.js opens
     this by animating width and x, because GSAP's SVG transform origin fought
     fill-box and threw the rect thousands of pixels off screen. */
  filter:drop-shadow(0 0 26px rgba(255,224,168,.8));
}

/* ---------- the far side ----------
   Clipped to the slit, so the screens are visible only through the opening.
   The clip is an inset from both edges toward the centre; js/threshold.js
   drives the single --open custom property and everything else follows. */
.beyond{
  position:absolute;inset:0;z-index:4;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
  --open:0;
  clip-path:inset(0 calc(50% - (var(--open) * 50%)) 0 calc(50% - (var(--open) * 50%)));
}
.beyond-dev{
  position:absolute;margin:0;
  width:clamp(150px,17vw,232px);
  border-radius:20px;padding:5px;
  background:linear-gradient(160deg,#26362E,#121D17 62%);
  box-shadow:
    0 0 0 1px rgba(120,180,150,.18),
    0 26px 60px rgba(0,0,0,.62),
    /* the door is behind them, so its light wraps the edges */
    0 0 60px rgba(200,154,84,.14);
  opacity:0;
}
.beyond-dev img{display:block;width:100%;height:auto;border-radius:15px}

/* Light the screens with the room's own light.
   Without this the devices are three bright rectangles pasted onto a dark
   photograph — correct in position and wrong in every other way, because
   nothing in the scene is falling on them. Two layers do it: a warm rim from
   the direction of the door, and a cool top-edge catch. Screen blending rather
   than plain alpha, so it adds light instead of fogging the screenshot. */
.beyond-dev::after{
  content:"";position:absolute;inset:0;border-radius:20px;pointer-events:none;
  mix-blend-mode:screen;
  background:
    linear-gradient(105deg, rgba(255,224,168,.30), rgba(255,224,168,0) 46%),
    linear-gradient(0deg, rgba(120,190,155,.12), rgba(120,190,155,0) 30%);
}
.beyond-dev.right::after{
  background:
    linear-gradient(255deg, rgba(255,224,168,.30), rgba(255,224,168,0) 46%),
    linear-gradient(0deg, rgba(120,190,155,.12), rgba(120,190,155,0) 30%);
}
/* The flanking pair sit BACK, not merely dimmer. Dimming a bone-coloured
   screenshot toward a dark ground just turns it grey; distance is carried by
   scale, a little blur and a cooler cast, which leaves them legible. */
.beyond-dev.left,.beyond-dev.right{filter:blur(.7px) saturate(.88)}

/* The floor. Three devices with no ground under them float; a single soft pool
   of light is enough to say the room has a floor and they are standing on it. */
.beyond::after{
  content:"";position:absolute;left:50%;top:50%;translate:-50% 0;
  width:min(70%,780px);height:190px;margin-top:clamp(120px,17svh,190px);
  pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(200,154,84,.17), rgba(200,154,84,.05) 45%, transparent 72%);
  filter:blur(12px);
  opacity:var(--open);
}
/* The lead device sits dead centre and slightly forward; the other two hang
   back and to the sides, which is what makes the opening read as a room with
   depth rather than a window with a poster behind it. */
.beyond-dev.lead {z-index:3}
.beyond-dev.left {z-index:2}
.beyond-dev.right{z-index:2}

/* ---------- the copy ---------- */
.chamber-copy{
  position:absolute;z-index:5;left:0;right:0;bottom:clamp(56px,11svh,110px);
  text-align:center;pointer-events:none;padding:0 24px;
}
.chamber-beat{
  position:absolute;left:0;right:0;bottom:0;margin:0;padding:0 24px;
  /* A scrim rather than a heavier text-shadow: the line has to stay legible
     over the device, the strands and the open door, and a shadow strong enough
     for all three looks like a shadow. */
  background:radial-gradient(60% 150% at 50% 50%,rgba(8,15,12,.82),transparent 72%);
  font-family:'Clash Display','Satoshi',sans-serif;
  font-weight:500;                       /* lighter than on bone: see the note above */
  font-size:clamp(19px,2.5vw,31px);
  letter-spacing:-.008em;                /* and opened up, for the same reason */
  line-height:1.25;
  color:#EAF2EC;
  text-shadow:0 2px 30px rgba(0,0,0,.7);
  opacity:0;
}
.chamber-hint{
  position:absolute;z-index:5;bottom:22px;left:0;right:0;text-align:center;
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(220,231,223,.42);margin:0;pointer-events:none;
}

/* ---------- the accessible copy ----------
   Not a caption for the animation: it is the whole scene in words, and it is
   what is on screen when motion is off or JavaScript never arrives. */
.chamber-text{
  position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;
  padding:104px 32px 112px;
  border-top:1px solid var(--hairline);
}
.chamber-text .section-h{max-width:19ch}
.chamber-list{list-style:none;padding:0;margin:34px 0 0;max-width:62ch}
.chamber-list li{
  position:relative;padding:16px 0 16px 26px;
  border-top:1px solid var(--hairline);color:var(--muted);font-size:15.5px;line-height:1.6;
}
.chamber-list li::before{
  content:"";position:absolute;left:0;top:24px;width:7px;height:7px;border-radius:50%;
  background:var(--accent);
}
.chamber-list b{color:var(--ink);font-weight:500}
.chamber-text .micro{max-width:58ch}

/* Before the scene is built, or if it never is, the room must not be a tall
   black box with nothing in it. */
html:not(.js) .chamber-inner,
.chamber-inner:not([data-ready]){height:auto;min-height:0}
html:not(.js) .chamber-canvas,
html:not(.js) .doorway,
html:not(.js) .beyond,
html:not(.js) .chamber-copy,
html:not(.js) .chamber-hint{display:none}

@media (prefers-reduced-motion:reduce){
  /* The room is a scroll-driven experience or it is nothing. Turned off, the
     section is simply the written version, which loses no information. */
  .chamber-inner{display:none}
  .chamber-text{border-top:0}
}

@media (max-width:980px){
  .chamber-inner{height:88svh}
  .doorway{height:min(58svh,460px)}
  /* One screen, and big enough to actually read. Three devices at 121px wide
     on a 390px phone is a diagram of three devices, not a screenshot of one —
     the whole reason these are real captures is that you can read what the log
     says. The flanking pair are a desktop luxury. */
  .beyond-dev.left,.beyond-dev.right{display:none}
  /* Sized by HEIGHT here, not width. A 62vw device is 598px tall on a 390x844
     phone, which centred means it lands on top of the beat copy — the caption
     and the screenshot were rendering through each other. Constraining the
     height and lifting the device off centre gives the copy its own air. */
  .beyond{align-items:flex-start;padding-top:13svh}   /* clears the two-row mobile header */
  .beyond-dev{width:auto;height:min(52svh,430px)}
  .beyond-dev img{height:100%;width:auto}
  /* And the rim light comes down hard: at this size the overlay covers
     proportionally far more of the screen and fogged the copy to yellow. */
  .beyond-dev::after{opacity:.45}
  .chamber-beat{font-size:clamp(17px,4.6vw,23px)}
  .chamber-copy{bottom:clamp(44px,9svh,80px)}
  .chamber-text{padding:76px 24px 84px}
}


/* ---------- the nav, over the dark room ----------
   The header is sticky and the chamber is the only dark section, so for the
   length of that one pin the wordmark and the links were near-invisible
   ink-on-ink. The class is toggled by the chamber's own ScrollTrigger. */
html.on-dark .nav-inner .wordmark{color:#EAF2EC}
html.on-dark .nav-links a{color:rgba(216,231,221,.72)}
html.on-dark .nav-links a:hover,
html.on-dark .nav-links a[aria-current="page"]{color:#FFFFFF}
html.on-dark .nav-links a::after{background:#C89A54}
html.on-dark .ghost-btn{
  color:#0D1712;background:rgba(240,246,242,.94);border-color:transparent;
}
html.on-dark .ghost-btn:hover{color:#0D1712;background:#FFFFFF}
html.on-dark .mark .arch,html.on-dark .mark .slit{filter:brightness(1.5)}
html.on-dark .progress i{background:linear-gradient(90deg,#C89A54,#FFF3DC)}
@supports (container-type: scroll-state){
  @container scroll-state(stuck: top){
    html.on-dark .nav{background:rgba(13,23,18,.62);box-shadow:none}
    html.on-dark .nav::after{opacity:.4}
  }
}
.nav-inner .wordmark,.nav-links a,.ghost-btn{transition:color .45s var(--ease),background-color .45s var(--ease),border-color .45s var(--ease)}

/* ---------- early access ----------
   The one form on the site. It is a section rather than its own page so the
   pricing above it and the promises beside it are still on screen while
   somebody decides. */
.access{
  position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;
  padding:104px 32px 118px;border-top:1px solid var(--hairline);
}
.access-inner{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}
.access-copy .section-h{max-width:18ch}

.ea-form{
  border:1px solid var(--hairline);border-radius:22px;padding:30px 30px 28px;
  background:var(--glass-strong);backdrop-filter:var(--glass-filter);
  box-shadow:var(--lift-2);
}
.ea-field{border:0;padding:0;margin:0 0 22px;min-width:0}
.ea-field>label,.ea-field legend{
  display:block;font-size:13px;font-weight:500;color:var(--ink);margin-bottom:7px;padding:0;
}
.ea-field>label span,.ea-field legend span{color:var(--dim);font-weight:400}
.ea-form input[type=email],.ea-form select{
  width:100%;font:inherit;font-size:15.5px;color:var(--ink);
  background:var(--ground);border:1px solid var(--hairline-strong);
  border-radius:13px;padding:12px 14px;
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.ea-form input[type=email]::placeholder{color:var(--dim)}
.ea-form input[type=email]:focus,.ea-form select:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(47,107,79,.14);
}
.ea-form input[aria-invalid=true]{border-color:#9E3B2E}
.ea-form input[readonly]{opacity:.6}
.ea-hint{font-size:12px;color:var(--dim);margin:7px 0 0}
.ea-err{font-size:12.5px;color:#9E3B2E;margin:7px 0 0;font-weight:500}

.ea-choices{display:flex;flex-direction:column;gap:1px}
.ea-choices label{
  display:flex;align-items:center;gap:10px;cursor:pointer;
  font-size:14.5px;color:var(--muted);padding:7px 0;
}
.ea-choices input{accent-color:var(--accent);width:15px;height:15px;margin:0}
.ea-choices label:hover span{color:var(--ink)}

/* Off-screen rather than display:none — a bot that reads computed styles
   skips anything hidden, which defeats the point of the trap. */
.ea-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.ea-form .btn{width:100%;text-align:center;margin-top:4px}
.ea-form .btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.ea-status{font-size:13.5px;line-height:1.55;margin:16px 0 0;color:var(--muted)}
.ea-status[data-state=error]{color:#9E3B2E}
.ea-status[data-state=closed]{color:var(--accent-deep)}
.ea-status:empty{margin:0}

.ea-done{
  border:1px solid var(--hairline);border-left:2px solid var(--accent);
  border-radius:22px;padding:30px;background:var(--paper);box-shadow:var(--lift-2);
}
.ea-done:focus{outline:none}
.ea-done b{display:block;font-family:'Clash Display',sans-serif;font-weight:600;font-size:20px;letter-spacing:-.02em;margin-bottom:8px}
.ea-done p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.6}
.ea-noscript{
  grid-column:1/-1;font-size:13.5px;color:var(--muted);
  border:1px solid var(--hairline);border-radius:14px;padding:16px 18px;background:var(--paper);
}

@media (max-width:980px){
  .access{padding:76px 24px 88px}
  .access-inner{grid-template-columns:1fr;gap:40px;text-align:left}
  .access-copy{display:block;text-align:left}
  .access-copy .section-h{margin-inline:0}
}