/* ============================================================
   Dungeon Expedition — marketing landing (/welcome)
   In-app port of wwwroot/landing-drafts/impeccable-8-board.html ("Draft K —
   The Keeper's Counter Sheet"), the owner-pinned direction.

   THESIS: the page is the keeper's own game — a lid, a punched sheet of
   two-faced records, a components list, a sequence of play, terms of supply.
   Warm parchment surface, crimson and gold ink, engraved Cinzel over Lora,
   softly rounded plates on warm offset shadows, and a wide quiet hex field
   used on TWO sections only (the lid and the sequence band).

   Every selector is scoped under .de-landing so nothing leaks into the app.
   Fonts come from the app's Google Fonts link (Cinzel + Lora).
   ============================================================ */
html:has(.de-landing){scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html:has(.de-landing){scroll-behavior:auto}}

.de-landing{
  --crimson:#730000;
  --crimson-deep:#5c0000;
  --crimson-lit:#8a0f0f;
  --gold:#c9a24a;
  --gold-soft:#dcbe7c;
  --parchment:#f8f3e6;
  --parchment-2:#f2ecda;
  --surface:#fdf8f0;
  --ink:#1a1209;
  --ink-muted:#7a6a50;
  --ink-faint:#a5946f;
  --display:'Cinzel',"Iowan Old Style",Palatino,Georgia,serif;
  --body:'Lora',"Iowan Old Style",Palatino,Georgia,serif;
  --ease:cubic-bezier(.22,.9,.24,1);
  --r:14px;
  --r-btn:4px;
  --shadow:0 24px 60px -18px rgba(60,20,5,.35), 0 8px 24px -10px rgba(60,20,5,.22);
  --shadow-soft:0 14px 34px -18px rgba(60,20,5,.32), 0 4px 12px -8px rgba(60,20,5,.18);
  /* wide, quiet hex — used on TWO sections only */
  --hex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23730000'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --hex-gold:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23c9a24a'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.de-landing *{box-sizing:border-box;margin:0;padding:0}
.de-landing{
  background:var(--parchment);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
.de-landing img,.de-landing video{display:block;max-width:100%}
.de-landing a{color:var(--crimson)}
.de-landing ::selection{background:var(--crimson);color:var(--surface)}
.de-landing .wrap{width:min(1200px,92vw);margin-inline:auto}
.de-landing section[id]{scroll-margin-top:88px}

.de-landing h1,.de-landing h2,.de-landing h3{
  font-family:var(--display);font-weight:700;line-height:1.12;text-wrap:balance;color:var(--ink);
}
.de-landing h1{font-size:clamp(2.5rem,4.6vw,3.9rem)}
.de-landing h2{font-size:clamp(1.9rem,3.1vw,2.6rem)}
.de-landing h3{font-size:clamp(1.45rem,2.2vw,1.9rem)}
.de-landing p{max-width:66ch}

/* ---------- hex field: LID and SEQUENCE only ---------- */
.de-landing .hexed{position:relative;isolation:isolate}
.de-landing .hexed::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--hex);background-size:200px 350px;opacity:.055;
}
.de-landing .hexed.on-dark::before{background-image:var(--hex-gold);background-size:220px 385px;opacity:.13}

/* ---------- shared ornaments ---------- */
.de-landing .eyebrow{
  font-family:var(--display);font-size:.72rem;font-weight:700;
  letter-spacing:.32em;text-transform:uppercase;color:var(--crimson);
}
.de-landing .eyebrow-row{display:flex;align-items:center;gap:.8rem;margin-bottom:1.3rem}
.de-landing .eyebrow-row .tail{height:1px;width:64px;background:linear-gradient(90deg,var(--gold),transparent)}
.de-landing .on-dark .eyebrow{color:var(--gold)}
.de-landing .rule{display:flex;align-items:center;gap:.9rem;color:var(--gold)}
.de-landing .rule::before,.de-landing .rule::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--gold-soft))}
.de-landing .rule::after{background:linear-gradient(90deg,var(--gold-soft),transparent)}
.de-landing .rule svg{flex:none}
.de-landing .kicker-row{display:flex;align-items:center;gap:1rem;margin-bottom:1.1rem}
.de-landing .kicker-num{font-family:var(--display);font-size:.78rem;letter-spacing:.3em;color:var(--gold);font-weight:700}
.de-landing .kicker-row .tail{height:1px;flex:0 0 46px;background:var(--gold-soft)}
.de-landing .section-head{max-width:44rem}
.de-landing .section-head h2{margin-top:.9rem}
.de-landing .section-head p{margin-top:1rem;color:var(--ink-muted);font-size:1.06rem}

/* ---------- section divider: one hairline, gold, with the crest lozenge ---------- */
.de-landing .sep{display:flex;align-items:center;gap:1.1rem;color:var(--gold)}
.de-landing .sep::before,.de-landing .sep::after{
  content:"";height:1px;flex:1;
  background:linear-gradient(90deg,transparent,rgba(201,162,74,.55) 22%,rgba(201,162,74,.55) 78%,transparent);
}
.de-landing .sep i{width:7px;height:7px;flex:none;border:1px solid currentColor;transform:rotate(45deg)}

/* ---------- ribbon: closes the record sheet and opens the components ---------- */
.de-landing .ribbon{
  background:var(--crimson-deep);color:#f3e6cc;text-align:center;
  padding:2.2rem 0;position:relative;overflow:clip;
  box-shadow:inset 0 1px 0 rgba(201,162,74,.35), inset 0 -1px 0 rgba(201,162,74,.35);
}
.de-landing .ribbon .line{
  font-family:var(--display);font-weight:700;color:#fdf4de;
  font-size:clamp(1.05rem,1.9vw,1.4rem);line-height:1.3;text-wrap:balance;
  max-width:34ch;margin-inline:auto;
}
.de-landing .ribbon .bridge{
  margin:.85rem auto 0;font-style:italic;font-size:.95rem;
  color:rgba(243,230,204,.76);max-width:44ch;
}
.de-landing .ribbon .sep{color:var(--gold);max-width:200px;margin:0 auto 1.1rem;opacity:.9}

/* ---------- rounded, soft buttons ---------- */
.de-landing .btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--display);font-weight:700;font-size:.82rem;
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  padding:1rem 1.7rem;border-radius:var(--r-btn);cursor:pointer;border:1px solid transparent;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s,color .25s,border-color .25s;
}
.de-landing .btn-primary{
  background:linear-gradient(180deg,var(--crimson-lit),var(--crimson) 55%,var(--crimson-deep));
  color:#fdf3e3;
  box-shadow:0 10px 26px -10px rgba(115,0,0,.55), inset 0 1px 0 rgba(255,220,160,.25);
}
.de-landing .btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(115,0,0,.6), inset 0 1px 0 rgba(255,220,160,.3)}
.de-landing .btn-quiet{
  color:var(--crimson);border-bottom:1px solid var(--gold-soft);border-radius:0;
  padding:.4rem .1rem;letter-spacing:.12em;background:none;
}
.de-landing .btn-quiet:hover{border-bottom-color:var(--crimson)}
.de-landing .btn-soft{
  background:var(--surface);color:var(--crimson);border-color:rgba(201,162,74,.65);
  box-shadow:var(--shadow-soft);
}
.de-landing .btn-soft:hover{transform:translateY(-2px);border-color:var(--gold);background:#fff}
/* Crimson ink cannot be read on a crimson ground — every dark band opts its quiet
   button over to gold. The close band carries `on-dark` for exactly this. */
.de-landing .on-dark .btn-quiet{color:var(--gold-soft);border-bottom-color:rgba(201,162,74,.5)}
.de-landing .on-dark .btn-quiet:hover{color:#f3e2bd;border-bottom-color:var(--gold)}
.de-landing a:focus-visible,
.de-landing button:focus-visible,
.de-landing summary:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:2px}

/* ---------- header ---------- */
.de-landing .head{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .35s,box-shadow .35s,backdrop-filter .35s}
.de-landing .head.scrolled{
  background:rgba(253,248,240,.9);backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(201,162,74,.4), 0 12px 30px -18px rgba(60,20,5,.25);
}
.de-landing .head .wrap{display:flex;align-items:center;gap:2.2rem;padding-block:.85rem}
.de-landing .brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:var(--ink)}
.de-landing .brand .crest{width:38px;height:42px;flex:none}
.de-landing .brand .word{display:flex;flex-direction:column;line-height:1.02}
.de-landing .brand .word b{font-family:var(--display);font-weight:700;font-size:1.02rem;letter-spacing:.12em}
.de-landing .brand .word span{font-family:var(--display);font-size:.56rem;font-weight:700;letter-spacing:.42em;color:var(--crimson)}
.de-landing .nav{margin-left:auto;display:flex;align-items:center;gap:1.8rem}
.de-landing .nav a:not(.btn){
  font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-muted);text-decoration:none;
  padding:.35rem 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s;
}
.de-landing .nav a:not(.btn):hover{color:var(--crimson);border-bottom-color:var(--gold)}
.de-landing .nav .btn{padding:.7rem 1.15rem;font-size:.7rem}
@media (max-width:900px){.de-landing .nav a:not(.btn){display:none}}

/* ---------- rounded plate ---------- */
.de-landing .plate{
  position:relative;border-radius:var(--r);overflow:hidden;
  background:linear-gradient(180deg,#fffdf8,#f7efdd);
  box-shadow:var(--shadow), 0 0 0 1px rgba(122,106,80,.26);
}
.de-landing .plate .chrome{
  display:flex;align-items:center;gap:.55rem;padding:.6rem .9rem;
  background:linear-gradient(180deg,#f4ecd8,#ecdfc4);
  border-bottom:1px solid rgba(122,106,80,.25);
}
.de-landing .plate .chrome i{width:9px;height:9px;border-radius:50%;background:#cdb98d}
.de-landing .plate .chrome i:nth-child(1){background:var(--crimson)}
.de-landing .plate .chrome i:nth-child(2){background:var(--gold)}
.de-landing .plate .chrome .addr{
  margin-left:.6rem;flex:1;max-width:340px;
  font-family:var(--display);font-size:.6rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-faint);background:rgba(253,248,240,.75);
  border:1px solid rgba(122,106,80,.2);border-radius:99px;
  padding:.28rem .8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.de-landing .plate .canvas{position:relative;aspect-ratio:16/9;background:#120c06;overflow:hidden}
.de-landing .plate .canvas>video,.de-landing .plate .canvas>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* callout chip on a connector line */
.de-landing .callout{
  position:absolute;z-index:6;max-width:250px;
  background:var(--surface);border:1px solid rgba(201,162,74,.6);
  border-left:3px solid var(--crimson);border-radius:4px;
  box-shadow:0 14px 30px -14px rgba(60,20,5,.4);
  padding:.6rem .9rem;font-size:.8rem;font-style:italic;color:var(--ink);
}
.de-landing .callout::after{content:"";position:absolute;width:1px;height:34px;background:var(--gold);left:18px;top:100%}
.de-landing .callout.up::after{top:auto;bottom:100%}
@media (max-width:920px){.de-landing .callout{display:none}}

/* ================= THE LID ================= */
.de-landing .lid{padding:9.5rem 0 6rem;position:relative;overflow:clip}
.de-landing .lid .grid{display:grid;grid-template-columns:minmax(0,47fr) minmax(0,53fr);gap:3.8rem;align-items:center}
@media (max-width:1000px){.de-landing .lid{padding:7.5rem 0 4rem}.de-landing .lid .grid{grid-template-columns:minmax(0,1fr);gap:2.8rem}}
.de-landing .lid .sub{margin-top:1.4rem;font-size:1.13rem;color:var(--ink-muted);max-width:34rem}
.de-landing .lid .gild{color:var(--crimson)}
.de-landing .lid .cta-row{margin-top:2.2rem;display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap}
.de-landing .lid .assure{margin-top:1.1rem;font-size:.85rem;font-style:italic;color:var(--ink-faint)}
.de-landing .lid .assure+.assure{margin-top:.45rem}
/* the supply line */
.de-landing .supply-line{
  margin-top:2rem;padding-top:1.1rem;border-top:1px solid rgba(201,162,74,.5);
  display:flex;flex-wrap:wrap;gap:.5rem 2.2rem;
  font-family:var(--display);font-size:.68rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);
}
.de-landing .supply-line b{color:var(--crimson);font-weight:700}
.de-landing .lid-visual{position:relative}
.de-landing .lid-visual .float{animation:de-idle 9s ease-in-out infinite}
@keyframes de-idle{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.de-landing .lid-visual .caption{margin-top:1.05rem;text-align:right;font-size:.8rem;font-style:italic;color:var(--ink-faint)}

/* ================= THE COUNTER SHEET ================= */
.de-landing .sheet{padding:6rem 0;background:linear-gradient(180deg,var(--parchment),var(--parchment-2) 40%,var(--parchment))}
.de-landing .sheet .head-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3rem;align-items:end}
@media (max-width:900px){.de-landing .sheet{padding:4.5rem 0}.de-landing .sheet .head-row{grid-template-columns:minmax(0,1fr);gap:1.2rem}}
.de-landing .turnbar{
  margin:2.4rem 0 2rem;display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;justify-content:space-between;
  padding:.9rem 1.3rem;border-radius:10px;background:var(--surface);
  border:1px solid rgba(201,162,74,.5);box-shadow:var(--shadow-soft);
}
.de-landing .turnbar .hint{font-size:.87rem;font-style:italic;color:var(--ink-muted)}
.de-landing .turnbar .btn{padding:.75rem 1.35rem;font-size:.72rem}

.de-landing .punch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.2rem}
@media (max-width:880px){.de-landing .punch{grid-template-columns:minmax(0,1fr);gap:1.8rem}}
/* each cell is the query container its card sizes against */
.de-landing .punch>div{container-type:inline-size}

/* the two-faced record. NOTHING that flattens preserve-3d on .chit
   (no filter/opacity/overflow) — each would render the back face mirrored. */
.de-landing .chit{
  display:block;width:100%;position:relative;aspect-ratio:16/13;min-height:580px;
  transform-style:preserve-3d;transition:transform .72s var(--ease);
  background:none;border:0;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer;
}
.de-landing .chit.turned{transform:rotateY(180deg)}
.de-landing .cface{
  position:absolute;inset:0;display:flex;flex-direction:column;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:var(--r);overflow:hidden;
  box-shadow:var(--shadow), 0 0 0 1px rgba(122,106,80,.26);
  transition:box-shadow .25s var(--ease);
}
.de-landing .cface.back{transform:rotateY(180deg)}
.de-landing .chit:hover .cface{box-shadow:0 30px 68px -18px rgba(60,20,5,.42), 0 10px 26px -10px rgba(60,20,5,.24), 0 0 0 1px var(--gold)}
/* front: your book */
.de-landing .cface.front{background:linear-gradient(180deg,#fffdf8,#f7efdd)}
/* back: their copy, on the crimson field so the two faces never read alike */
.de-landing .cface.back{background:linear-gradient(180deg,var(--crimson),var(--crimson-deep));color:#f6e9d2}

.de-landing .ctop{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem 1.1rem;border-bottom:1px solid rgba(122,106,80,.25);
  background:linear-gradient(180deg,#f4ecd8,#ecdfc4);
}
.de-landing .cface.back .ctop{background:rgba(0,0,0,.18);border-bottom-color:rgba(201,162,74,.4)}
.de-landing .ckind{font-family:var(--display);font-size:.62rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--crimson)}
.de-landing .cface.back .ckind{color:var(--gold)}
.de-landing .cside{font-family:var(--display);font-size:.58rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint)}
.de-landing .cface.back .cside{color:rgba(246,233,210,.75)}

/* Height as a share of the card, not a width ratio, so the body never gets squeezed
   out. How much height the body needs depends on the CARD's width, not the viewport's
   — a single-column card at 700px wraps to two lines, a 330px one to four. Base values
   are the narrow case, so no-container-query browsers get the safe layout. */
.de-landing .cshot{position:relative;height:50%;background:#120c06;overflow:hidden;flex:none}
@container (min-width:400px){
  .de-landing .chit{min-height:560px}
  .de-landing .cshot{height:57%}
}
@container (min-width:520px){
  .de-landing .chit{min-height:520px}
  .de-landing .cshot{height:63%}
}
/* App captures are wide with a left rail. Crop from the top centre so the content pane
   leads, and allow a per-image zoom: a whole 2380px page scaled into a 571px card is
   unreadable, so --zoom pushes the interesting region up to legible size. */
.de-landing .cshot img{
  position:absolute;top:0;left:50%;
  transform:translateX(-50%) scale(var(--zoom,1));transform-origin:center top;
  width:100%;height:100%;object-fit:cover;object-position:var(--pos,center) top;
}
.de-landing .cbody{padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.35rem;flex:1;min-height:0}
.de-landing .cname{font-family:var(--display);font-weight:700;font-size:1.14rem;line-height:1.2}
.de-landing .cface.back .cname{color:#fdf4de}
.de-landing .cdesc{font-size:.9rem;line-height:1.5;color:var(--ink-muted)}
.de-landing .cface.back .cdesc{color:rgba(246,233,210,.86)}
.de-landing .cvals{
  margin-top:auto;padding-top:.7rem;border-top:1px solid rgba(201,162,74,.45);
  display:flex;justify-content:space-between;gap:1rem;
  font-family:var(--display);font-size:.6rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-faint);
}
.de-landing .cface.back .cvals{color:var(--gold);border-top-color:rgba(201,162,74,.4)}
.de-landing .turnmark{
  position:absolute;right:.8rem;top:.72rem;z-index:3;width:26px;height:26px;border-radius:50%;
  background:rgba(253,248,240,.94);border:1px solid rgba(201,162,74,.7);
  display:grid;place-items:center;color:var(--crimson);
  box-shadow:0 6px 14px -8px rgba(60,20,5,.5);transition:transform .35s var(--ease);
}
.de-landing .cface.back .turnmark{background:rgba(26,18,9,.5);border-color:rgba(201,162,74,.6);color:var(--gold)}
.de-landing .chit:hover .turnmark{transform:rotate(-160deg)}
.de-landing .turnmark svg{width:14px;height:14px}
.de-landing .sheet .after{margin-top:2.2rem;display:flex;flex-wrap:wrap;gap:.8rem 2rem;align-items:baseline;justify-content:space-between}
.de-landing .sheet .after p{margin:0;max-width:56ch;color:var(--ink-muted)}
.de-landing .synth{font-family:var(--display);font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint)}

/* ================= COMPONENTS ================= */
.de-landing .components{padding:1rem 0 5rem}
.de-landing .comp{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:4rem;align-items:center;padding-block:3.6rem}
.de-landing .comp+.comp{border-top:1px solid rgba(201,162,74,.4)}
.de-landing .comp.flip .c-media{order:2}
@media (max-width:920px){
  .de-landing .comp{grid-template-columns:minmax(0,1fr);gap:2rem;padding-block:2.8rem}
  .de-landing .comp.flip .c-media{order:0}
}
.de-landing .qty{
  font-family:var(--display);font-size:.68rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--crimson);display:block;margin-bottom:.5rem;
}
.de-landing .c-copy p{margin-top:1rem;color:var(--ink-muted);max-width:32rem}
.de-landing .c-points{list-style:none;margin-top:1.3rem;display:grid;gap:.65rem;max-width:32rem}
.de-landing .c-points li{position:relative;padding-left:1.15rem;color:var(--ink-muted);font-size:.97rem}
.de-landing .c-points li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;transform:rotate(45deg);background:var(--gold)}
.de-landing .c-points li b{color:var(--ink);font-weight:600}
.de-landing .c-note{margin-top:1.4rem;display:inline-flex;align-items:center;gap:.55rem;font-size:.8rem;font-style:italic;color:var(--crimson)}
.de-landing .c-note svg{flex:none}
.de-landing .c-media{position:relative}

/* ================= SEQUENCE OF PLAY ================= */
.de-landing .sequence{background:var(--crimson-deep);color:#f3e6cc;padding:6rem 0}
.de-landing .sequence h2,.de-landing .sequence h3{color:#fdf4de}
.de-landing .sequence .track{margin-top:3rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid rgba(201,162,74,.42);border-radius:12px;overflow:hidden}
@media (max-width:900px){.de-landing .sequence{padding:4.5rem 0}.de-landing .sequence .track{grid-template-columns:minmax(0,1fr)}}
.de-landing .leg{padding:2.6rem}
.de-landing .leg+.leg{border-left:1px solid rgba(201,162,74,.42)}
@media (max-width:900px){.de-landing .leg+.leg{border-left:0;border-top:1px solid rgba(201,162,74,.42)}}
.de-landing .leg .when{font-family:var(--display);font-size:.68rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.de-landing .leg h3{margin-top:.8rem}
.de-landing .leg>p{margin-top:1rem;color:rgba(243,230,204,.82);max-width:30rem}
.de-landing .phases{list-style:none;margin-top:1.7rem;border-top:1px solid rgba(201,162,74,.3)}
.de-landing .phases li{
  display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:baseline;
  padding:.85rem 0;border-bottom:1px solid rgba(201,162,74,.3);
  font-size:.97rem;color:rgba(243,230,204,.9);
}
.de-landing .phases .ph{font-family:var(--display);font-size:.66rem;font-weight:700;letter-spacing:.18em;color:var(--gold)}
.de-landing .sequence .closer{
  margin-top:1.7rem;font-style:italic;font-size:.98rem;color:rgba(243,230,204,.76);max-width:30rem;
}

/* ================= TERMS ================= */
.de-landing .terms{padding:6.5rem 0}
.de-landing .terms .box{
  max-width:52rem;margin:3rem auto 0;background:var(--surface);
  border:1px solid rgba(201,162,74,.55);border-radius:12px;overflow:hidden;
  box-shadow:var(--shadow);position:relative;
}
.de-landing .terms .banner{
  background:var(--crimson);color:#fdf3e3;padding:.85rem 1.6rem;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  font-family:var(--display);font-size:.66rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
}
.de-landing .terms .body{padding:clamp(1.8rem,4vw,2.9rem)}
.de-landing .terms .fee{font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,2.8vw,2.1rem);line-height:1.16}
.de-landing .terms .fee em{font-style:italic;color:var(--crimson)}
.de-landing .terms .body>p{margin-top:1.2rem;color:var(--ink-muted)}
.de-landing .terms .btn{margin-top:2rem}
.de-landing .tbl{width:100%;border-collapse:collapse;margin-top:2rem}
.de-landing .tbl caption{
  text-align:left;font-family:var(--display);font-size:.62rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint);padding-bottom:.7rem;
}
.de-landing .tbl th,.de-landing .tbl td{text-align:left;padding:.62rem .2rem;border-bottom:1px solid rgba(201,162,74,.35);font-size:.93rem}
.de-landing .tbl th{
  font-family:var(--display);font-size:.64rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--crimson);border-bottom:1px solid rgba(201,162,74,.7);
}
.de-landing .tbl td{color:var(--ink-muted)}
.de-landing .tbl td:last-child,.de-landing .tbl th:last-child{text-align:right;color:var(--ink)}
.de-landing .terms .fine{margin:2rem auto 0;text-align:center;font-size:.85rem;font-style:italic;color:var(--ink-faint)}

/* ================= RULES QUESTIONS ================= */
.de-landing .rules{padding:6.5rem 0;background:linear-gradient(180deg,var(--parchment-2),var(--parchment) 40%)}
.de-landing .rules .qa{max-width:48rem;margin-top:3rem}
.de-landing .rules details{border-bottom:1px solid rgba(201,162,74,.45)}
.de-landing .rules details:first-of-type{border-top:1px solid rgba(201,162,74,.45)}
.de-landing .rules summary{
  cursor:pointer;list-style:none;display:grid;grid-template-columns:auto auto 1fr;gap:1rem;align-items:center;
  padding:1.35rem .2rem;font-family:var(--display);font-weight:700;font-size:1.02rem;
}
.de-landing .rules summary::-webkit-details-marker{display:none}
.de-landing .rules summary .tick{flex:none;width:22px;height:22px;color:var(--gold);transition:transform .4s var(--ease)}
.de-landing .rules details[open] summary .tick{transform:rotate(45deg);color:var(--crimson)}
.de-landing .rules summary .no{font-family:var(--display);font-size:.68rem;font-weight:700;letter-spacing:.16em;color:var(--ink-faint)}
.de-landing .rules details p{padding:0 .2rem 1.5rem 4.4rem;color:var(--ink-muted)}
@media (max-width:600px){.de-landing .rules details p{padding-left:2.4rem}}

/* ================= CLOSE ================= */
.de-landing .close{position:relative;overflow:clip;color:#f7ecd6;text-align:center;isolation:isolate}
.de-landing .close .bg{position:absolute;inset:0;z-index:-2}
.de-landing .close .bg img{width:100%;height:100%;object-fit:cover;object-position:center 62%}
.de-landing .close::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(26,8,4,.8),rgba(56,7,2,.74) 55%,rgba(26,8,4,.87))}
.de-landing .close .wrap{padding:7rem 0 7.5rem}
.de-landing .close h2{color:#fdf4de;font-size:clamp(2rem,3.6vw,3rem)}
.de-landing .close p{margin:1.2rem auto 0;max-width:32rem;color:rgba(247,236,214,.84)}
.de-landing .close .cta-row{margin-top:2.4rem;display:flex;justify-content:center;gap:1.6rem;flex-wrap:wrap;align-items:center}
.de-landing .close .assure{margin-top:1.1rem;font-size:.85rem;font-style:italic;color:rgba(247,236,214,.64)}
.de-landing .close .trust{
  margin:2.6rem auto 0;padding-top:1.6rem;max-width:34rem;border-top:1px solid rgba(201,162,74,.4);
  font-size:.92rem;font-style:italic;color:rgba(247,236,214,.78);
}
.de-landing .close .trust a{color:var(--gold-soft)}
.de-landing .close .rule{color:var(--gold);max-width:280px;margin:0 auto 2rem}

/* ================= FOOTER ================= */
.de-landing .foot{background:#150d05;color:#cdbb96}
.de-landing .foot .wrap{padding:4.5rem 0 2.5rem;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2.5rem}
@media (max-width:820px){.de-landing .foot .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.de-landing .foot .wrap{grid-template-columns:minmax(0,1fr)}}
.de-landing .foot .brand{color:#cdbb96}
.de-landing .foot .brand .word b{color:#f0e3c6}
.de-landing .foot .brand .word span{color:var(--gold)}
.de-landing .foot .blurb{margin-top:1.1rem;font-size:.92rem;color:rgba(205,187,150,.78);max-width:22rem}
.de-landing .foot h4{font-family:var(--display);font-size:.72rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:1.1rem}
.de-landing .foot ul{list-style:none;display:grid;gap:.55rem}
.de-landing .foot a{color:rgba(205,187,150,.85);text-decoration:none;font-size:.95rem}
.de-landing .foot a:hover{color:#f0e3c6;text-decoration:underline;text-decoration-color:var(--gold)}
.de-landing .foot .legal{
  grid-column:1/-1;margin-top:2rem;padding-top:1.6rem;border-top:1px solid rgba(201,162,74,.25);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.8rem;color:rgba(205,187,150,.58);
}

/* ---------- entrance ---------- */
/* The draft gates these on an `html.js` class for the no-JS case. This page renders
   under InteractiveWebAssembly with prerender:false, so it does not exist at all
   without a running runtime — the gate would never be false. */
.de-landing .reveal{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.de-landing .reveal.in{opacity:1;transform:none}
.de-landing .reveal.d1{transition-delay:.09s}
.de-landing .reveal.d2{transition-delay:.18s}
@media (prefers-reduced-motion:reduce){
  .de-landing .reveal{opacity:1;transform:none;transition:none}
  .de-landing .chit,.de-landing .turnmark,.de-landing .cface{transition:none}
  .de-landing .lid-visual .float{animation:none}
}