/* Layout: RTL landing. Sticky nav, full-width tinted image banner with rounded bottom, countdown card overlapping its edge. Single dark look by design. */
:root{
  --ink:#030d0f;        /* page ground, blue-green black */
  --ink-2:#061619;      /* raised surface */
  --ink-3:#0a2226;      /* inputs / wells */
  --line:#123238;       /* hairlines */
  --fg:#e4faf7;         /* primary text */
  --muted:#86aba8;      /* secondary text */
  --cyan:#00FFEC;       /* brand accent */
  --teal:#00c6a8;       /* accent hover / variant */
  --cyan-a:rgba(0,255,236,.10);

  --f-display:"Rubik","Assistant",system-ui,sans-serif;
  --f-body:"Assistant",system-ui,"Segoe UI",Arial,sans-serif;
  --f-mark:"Rubik",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;

  --step--1:.9rem; --step-0:1.0625rem; --step-1:1.22rem; --step-2:1.45rem;
  --step-3:clamp(2rem,4.2vw,3rem); --step-4:clamp(2.6rem,6.8vw,5.4rem);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{background:var(--ink);color:var(--fg);font-family:var(--f-body);font-size:var(--step-0);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:2px}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
h1,h2,h3{text-wrap:balance;margin:0}
p{margin:0}
.mono{font-family:var(--f-mono);letter-spacing:.06em;direction:ltr;unicode-bidi:isolate}

/* ---------- wordmark ---------- */
.mark{font-family:var(--f-mark);font-weight:900;letter-spacing:.06em;direction:ltr;display:inline-flex;gap:.35em;align-items:baseline;text-decoration:none;white-space:nowrap}
.mark b{color:transparent;-webkit-text-stroke:1.2px var(--cyan);font-weight:900}

/* ---------- nav ---------- */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(3,13,15,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
/* three equal columns (logo | links | buttons) so the links sit exactly in the middle */
.nav .wrap{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;padding-block:14px}
.nav .mark{grid-column:1;justify-self:start;font-size:1.05rem}
.nav ul{grid-column:2;display:flex;gap:28px;list-style:none;margin:0;padding:0;font-size:.95rem}
.nav ul a{text-decoration:none;color:var(--muted);transition:color .2s}
.nav ul a:hover{color:var(--fg)}
.nav-actions{grid-column:3;justify-self:end;display:flex;align-items:center;gap:10px}
@media (max-width:520px){.nav-actions .btn span{display:none}}

/* burger menu (pure CSS: a hidden checkbox + its label) */
.nav-toggle{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.burger{display:none;width:40px;height:40px;place-items:center;border-radius:10px;border:1px solid var(--line);color:var(--fg);cursor:pointer;font-size:1.05rem}
.burger:hover{border-color:rgba(0,255,236,.35);color:var(--cyan)}
.burger .fa-xmark{display:none}
.nav-toggle:focus-visible ~ .nav-actions .burger{outline:2px solid var(--cyan);outline-offset:2px}
@media (max-width:820px){
  .nav .wrap{grid-template-columns:1fr auto}
  .nav-actions{grid-column:2}
  .burger{display:grid}
  .nav ul{display:none;position:absolute;top:100%;inset-inline:0;flex-direction:column;gap:0;padding:8px clamp(16px,4vw,40px) 14px;background:rgba(3,13,15,.97);border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}
  .nav ul a{display:block;padding:12px 4px;border-bottom:1px solid var(--line);font-size:1rem;color:var(--fg)}
  .nav ul li:last-child a{border-bottom:0}
  .nav-toggle:checked ~ ul{display:flex}
  .nav-toggle:checked ~ .nav-actions .burger .fa-bars{display:none}
  .nav-toggle:checked ~ .nav-actions .burger .fa-xmark{display:inline}
}

/* ---------- buttons ---------- */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:.6em;font:500 1rem/1 var(--f-body);padding:.95em 1.5em;border-radius:3px;text-decoration:none;border:1px solid var(--cyan);transition:background .2s,color .2s,box-shadow .25s,border-color .2s,transform .25s;cursor:pointer}
.btn-solid{background:var(--cyan);color:var(--ink)}
/* hover: small lift, tight shadow, light streak sweeping right→left (RTL reading direction) */
.btn-solid::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.6) 50%,transparent 65%);transform:translateX(110%);transition:transform .7s ease}
.btn-solid:hover{transform:translateY(-2px);box-shadow:0 8px 18px -10px rgba(0,255,236,.55)}
.btn-solid:hover::after{transform:translateX(-110%)}
.btn-solid:active{transform:translateY(0);box-shadow:none;background:var(--teal);border-color:var(--teal)}
.btn-solid i{transition:transform .3s}
.btn-solid:hover i{transform:rotate(-10deg) scale(1.12)}
.btn-ghost{background:transparent;color:var(--cyan)}
.btn-ghost:hover{background:var(--cyan-a)}
.btn-sm{padding:.65em 1.1em;font-size:.9rem}
.btn i{font-size:1.05em;flex:none}

/* ---------- hero banner ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;min-height:min(88vh,860px);padding-block:clamp(90px,10vw,140px) clamp(130px,13vw,180px);
  clip-path:polygon(0 0,100% 0,100% calc(100% - clamp(36px,5vw,80px)),0 100%)}
.hero-media{position:absolute;inset:0;z-index:-1;
  background:radial-gradient(70% 90% at 20% 30%,rgba(0,198,168,.35),transparent 70%),
             linear-gradient(135deg,#07302d 0%,#041416 55%,var(--ink) 100%)}
.hero-media img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%;filter:grayscale(1) contrast(1.1) brightness(.55) blur(2px);transform:scale(1.06);animation:drift 24s ease-out both}
.hero-media.no-img img{display:none}
/* layer order: image (0) → teal colour wash (1) → dark readability gradient (2) */
.hero-media::before{content:"";position:absolute;inset:0;z-index:1;background:var(--teal);mix-blend-mode:color;opacity:.3}
.hero-media::after{content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(to left,rgba(3,13,15,.95) 0%,rgba(3,13,15,.85) 35%,rgba(3,13,15,.45) 68%,rgba(3,13,15,.2) 100%),
             linear-gradient(to top,rgba(3,13,15,.9),transparent 30%),
             linear-gradient(to bottom,rgba(3,13,15,.55),transparent 20%)}
/* film grain (3): SVG turbulence noise, jittered for a live-film feel */
.hero-media .grain{position:absolute;inset:-50%;z-index:3;pointer-events:none;opacity:.22;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1s steps(6) infinite}
@keyframes grain{
  0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
/* stays scaled above 1 so the blur never shows soft edges */
@keyframes drift{from{transform:scale(1.14)}to{transform:scale(1.06)}}

/* text block on the start (right) side; city shows on the far side. Two-tier title: small white line over a huge gradient line */
.hero-content{width:100%;display:flex;flex-direction:column;align-items:flex-start}
.hero h1{display:grid;gap:.15em;font-family:var(--f-display);margin:0}
.h1-small{font-weight:700;font-size:clamp(1.5rem,2.9vw,2.4rem);line-height:1.2;color:var(--fg);text-shadow:0 4px 24px rgba(0,0,0,.5)}
.h1-big{font-weight:900;font-size:clamp(3rem,7.6vw,6.6rem);line-height:1.05;letter-spacing:-.02em;padding-bottom:.06em;
  background:linear-gradient(to left,#a6fff8 0%,var(--cyan) 38%,var(--teal) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 28px rgba(0,255,236,.22))}
.hero .lede{font-family:var(--f-display);font-weight:400;font-size:clamp(1.08rem,1.6vw,1.32rem);line-height:1.7;color:#cfe3e0;max-width:42ch;margin-top:22px;text-wrap:balance}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.hero .btn{font-family:var(--f-display);font-size:1.02rem;padding:1em 1.7em}

/* pill buttons */
.btn-pill{border-radius:99px}
.btn-grad{background:linear-gradient(to left,var(--cyan),var(--teal));color:var(--ink);border-color:transparent;font-weight:600}
.btn-grad::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.6) 50%,transparent 65%);transform:translateX(110%);transition:transform .7s ease}
.btn-grad:hover{transform:translateY(-2px);box-shadow:0 10px 22px -12px rgba(0,255,236,.6)}
.btn-grad:hover::after{transform:translateX(-110%)}
.btn-grad:active{transform:translateY(0);box-shadow:none}
.btn-grad .arrow{font-size:.85em;transition:transform .25s}
.btn-grad:hover .arrow{transform:translateX(-4px)}
.btn-outline{background:rgba(3,13,15,.35);color:var(--fg);border-color:rgba(228,250,247,.3);backdrop-filter:blur(6px)}
.btn-outline:hover{border-color:var(--cyan);color:var(--cyan);background:rgba(0,255,236,.06)}

/* status pill (becomes a live player count after launch) */
.live-pill{display:inline-flex;align-items:center;gap:.6em;margin-top:28px;padding:.6em 1.15em;border-radius:99px;font-family:var(--f-display);font-size:.92rem;color:var(--muted);background:rgba(3,13,15,.55);border:1px solid var(--line);backdrop-filter:blur(6px)}
.live-pill strong{color:var(--fg);font-weight:600}
.live-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 0 rgba(0,255,236,.6);animation:ping 2s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(0,255,236,.55)}80%,100%{box-shadow:0 0 0 8px rgba(0,255,236,0)}}

main{padding-bottom:clamp(48px,7vw,80px)}
/* ---------- section heading ---------- */
.sec-head{display:grid;gap:12px;max-width:620px;margin-bottom:clamp(32px,4vw,48px)}
.sec-head h2{font-family:var(--f-display);font-weight:800;font-size:clamp(1.9rem,3.6vw,2.8rem);line-height:1.15;letter-spacing:-.01em}
.sec-head p{font-family:var(--f-display);color:var(--muted);font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.7}

.sec-head-center{margin-inline:auto;text-align:center;justify-items:center}

/* ---------- how to join ---------- */
.join{padding-block:clamp(90px,10vw,140px) 0;overflow-x:clip}
.join .wrap{position:relative}
.join .sec-head{position:relative;z-index:1}

/* arrival flight beside the title */
/* --pw = plane width; the trail is sized from it so its end always lands at the plane's engine, at any window width */
.flight{--pw:clamp(220px,22vw,320px);position:absolute;inset-inline:clamp(16px,4vw,40px);top:clamp(-70px,-5vw,-40px);height:200px;pointer-events:none}
.flight-path{position:absolute;top:0;bottom:0;left:calc(var(--pw) * .74);right:0;width:auto;height:100%;overflow:visible}
.flight-path path{fill:none;stroke:rgba(0,255,236,.35);stroke-width:2;stroke-dasharray:2 12;stroke-linecap:round;vector-effect:non-scaling-stroke;animation:dash 1.6s linear infinite}
@keyframes dash{to{stroke-dashoffset:-28}}
.flight-plane{position:absolute;inset-inline-end:0;top:6px;width:var(--pw);height:auto;
  filter:brightness(.9) contrast(1.05) drop-shadow(0 26px 28px rgba(0,0,0,.6));animation:cruise 7s ease-in-out infinite}
@keyframes cruise{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-10px) rotate(-2deg)}}
/* scroll-linked flight: JS sets --p (0 → 1) from the section's position in the viewport.
   Defaults to 1, so without JS the plane simply sits in place.
   `translate` is separate from the cruise animation's `transform`, so both run together. */
.flight{--p:1}
.flight-plane{translate:calc((1 - var(--p)) * 55vw) 0;opacity:clamp(0,calc(var(--p) * 3),1)}
.flight-path{clip-path:inset(0 0 0 calc((1 - var(--p)) * 100%))}

/* phones/tablets: the plane crosses the full width above the title for as long as the section is on screen.
   --p 0 = off the right edge, .5 = centred, 1 = off the left edge (default .5 so no-JS shows it centred) */
@media (max-width:1100px){
  .flight{--p:.5;position:relative;inset:auto;top:auto;display:block;height:clamp(96px,26vw,140px);margin-bottom:10px}
  .flight-path{display:none}
  .flight-plane{--w:clamp(170px,42vw,250px);position:absolute;top:0;inset-inline-end:auto;left:50%;width:var(--w);margin-left:calc(var(--w) / -2);
    translate:calc((.5 - var(--p)) * (100vw + var(--w) + 40px)) 0;opacity:1}
}
/* three steps in reading order (right → left), joined by a line through the number badges */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;position:relative;isolation:isolate}
.steps::before{content:"";position:absolute;top:55px;inset-inline:16%;height:2px;z-index:-1;
  background:linear-gradient(to left,var(--cyan),rgba(0,255,236,.15))}
.step{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;min-width:0;padding:24px 22px 28px}
.step-num{position:absolute;z-index:1;top:18px;inset-inline-start:calc(50% - 44px);font-family:var(--f-display);font-weight:800;font-size:.8rem;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:var(--cyan);color:var(--ink);box-shadow:0 0 0 4px var(--ink)}
.step-icon{width:64px;height:64px;display:grid;place-items:center;border-radius:50%;background:var(--ink-2);border:1px solid rgba(0,255,236,.35);color:var(--cyan);font-size:1.4rem;box-shadow:0 0 0 8px var(--ink);transition:background .25s,color .25s}
.step:hover .step-icon{background:var(--cyan);color:var(--ink)}
/* icon badges: give every glyph the same square box so it sits dead-centre in its circle/tile */
.step-icon,.why-icon,.card-icon,.why-badge-icon{display:flex;align-items:center;justify-content:center}
.step-icon i,.why-icon i,.card-icon i,.why-badge-icon i{display:block;width:1.25em;height:1em;line-height:1;text-align:center}
.step h3{font-family:var(--f-display);font-weight:700;font-size:1.2rem;line-height:1.35;margin-top:6px}
.step p{font-family:var(--f-display);color:var(--muted);font-size:.98rem;line-height:1.7;max-width:34ch}

.join-note{margin:28px auto 0;max-width:820px;display:flex;align-items:flex-start;gap:14px;padding:18px 22px;border-radius:16px;background:var(--cyan-a);border:1px solid rgba(0,255,236,.3)}
.join-note-icon{flex:none;color:var(--cyan);font-size:1.25rem;line-height:1.6}
.join-note p{font-family:var(--f-display);font-size:1rem;line-height:1.7;color:var(--fg)}
.join-note strong{color:var(--cyan);font-weight:700}

@media (max-width:820px){
  .steps{grid-template-columns:1fr;gap:8px}
  .steps::before{top:52px;bottom:52px;inset-inline:auto;inset-inline-start:53px;width:2px;height:auto;
    background:linear-gradient(to bottom,var(--cyan),rgba(0,255,236,.15))}
  .step{display:grid;grid-template-columns:64px 1fr;column-gap:18px;text-align:start;align-items:start;padding:20px 22px}
  .step-icon{grid-row:span 2}
  .step h3{margin-top:4px}
  .step-num{top:12px;inset-inline-start:14px}
}

/* ---------- why us ---------- */
.why{padding-block:clamp(72px,9vw,120px) 0}
/* RTL: list on the right (read first), photo on the left */
.why-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,6vw,80px);align-items:center}
.why-grid .why-media{order:2}
.why-grid>*{min-width:0}
.why-media{position:relative;margin:0;border-radius:20px;overflow:hidden;aspect-ratio:4/5;max-width:100%;border:1px solid var(--line);isolation:isolate}
.why-media img{width:100%;height:100%;object-fit:cover;object-position:65% 50%;display:block;filter:grayscale(1) contrast(1.1) brightness(.7);transition:transform .8s ease}
.why-media:hover img{transform:scale(1.04)}
/* same treatment as the hero: light teal wash + bottom shade so the badge reads */
.why-media::before{content:"";position:absolute;inset:0;z-index:1;background:var(--teal);mix-blend-mode:color;opacity:.35;pointer-events:none}
.why-media::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(3,13,15,.85),transparent 45%);pointer-events:none}
.why-badge{position:absolute;z-index:2;inset-inline:18px;bottom:18px;display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;background:rgba(3,13,15,.6);border:1px solid rgba(228,250,247,.12);backdrop-filter:blur(10px);font-family:var(--f-display)}
.why-badge strong{display:block;font-weight:700;font-size:1.02rem}
.why-badge span:last-child{font-size:.88rem;color:var(--muted);line-height:1.45}
.why-badge-icon{flex:none;width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:var(--cyan);color:var(--ink);font-size:1.05rem}

.why-body .sec-head{margin-bottom:28px}
.why-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.why-list li{display:grid;grid-template-columns:52px 1fr;gap:18px;align-items:start;padding:16px;border-radius:14px;border:1px solid transparent;transition:background .25s,border-color .25s}
.why-list li:hover{background:var(--ink-2);border-color:var(--line)}
.why-icon{width:52px;height:52px;display:grid;place-items:center;border-radius:50%;background:var(--cyan-a);border:1px solid rgba(0,255,236,.25);color:var(--cyan);font-size:1.15rem;transition:background .25s,color .25s}
.why-list li:hover .why-icon{background:var(--cyan);color:var(--ink)}
.why-list h3{font-family:var(--f-display);font-weight:700;font-size:1.15rem;line-height:1.35;margin:4px 0 4px}
.why-list p{font-family:var(--f-display);color:var(--muted);font-size:.97rem;line-height:1.7}

@media (max-width:900px){
  .why-grid{grid-template-columns:1fr}
  .why-grid .why-media{order:0;aspect-ratio:16/10}
}

/* ---------- features ---------- */
/* full-bleed photo band, same treatment as the hero, slanted top and bottom edges */
.features{position:relative;isolation:isolate;overflow:hidden;margin-top:clamp(56px,8vw,110px);padding-block:clamp(110px,12vw,170px);
  clip-path:polygon(0 clamp(36px,5vw,80px),100% 0,100% calc(100% - clamp(36px,5vw,80px)),0 100%)}
.features-media img{object-position:50% 60%}
.features-media::after{
  background:linear-gradient(to left,rgba(3,13,15,.9) 0%,rgba(3,13,15,.72) 45%,rgba(3,13,15,.6) 100%),
             linear-gradient(to top,rgba(3,13,15,.85),transparent 30%),
             linear-gradient(to bottom,rgba(3,13,15,.85),transparent 30%)}
.features .card,.features .feat-more{background-color:rgba(6,22,25,.72);backdrop-filter:blur(10px)}
.features .card-featured{background:radial-gradient(90% 60% at 100% 0%,rgba(0,255,236,.13),transparent 65%),rgba(6,22,25,.72)}
.features .card-locked{background:repeating-linear-gradient(-45deg,transparent 0 10px,rgba(0,255,236,.03) 10px 20px),rgba(6,22,25,.72)}
.feat-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:16px}
.card{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;gap:12px;min-width:0;padding:26px;background:var(--ink-2);border:1px solid var(--line);border-radius:16px;transition:border-color .25s,transform .25s,background .25s}
.card:hover{border-color:rgba(0,255,236,.35);transform:translateY(-3px)}
.card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.card-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:12px;background:var(--cyan-a);color:var(--cyan);font-size:1.25rem;transition:background .25s,color .25s}
.card:hover .card-icon{background:var(--cyan);color:var(--ink)}
.card-num{font-family:var(--f-mono);font-size:.8rem;color:var(--muted);letter-spacing:.08em}
.card h3{font-family:var(--f-display);font-weight:700;font-size:1.2rem;line-height:1.35}
.card p{font-family:var(--f-display);color:var(--muted);font-size:.98rem;line-height:1.7}

/* featured: spans both rows, carries a soft cyan glow and a large watermark icon */
.card-featured{grid-row:span 2;padding:32px;justify-content:flex-start;
  background:radial-gradient(90% 60% at 100% 0%,rgba(0,255,236,.13),transparent 65%),var(--ink-2)}
.card-featured h3{font-size:clamp(1.5rem,2.4vw,1.9rem);font-weight:800}
.card-featured p{font-size:1.05rem;max-width:38ch}
.card-bg{position:absolute;z-index:-1;inset-inline-end:-18px;bottom:-26px;font-size:11rem;color:var(--cyan);opacity:.05;transform:rotate(-12deg);transition:opacity .3s,transform .4s}
.card-featured:hover .card-bg{opacity:.09;transform:rotate(-6deg) scale(1.04)}
.chips{list-style:none;margin:auto 0 0;padding:18px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{display:inline-flex;align-items:center;gap:.5em;font-family:var(--f-display);font-size:.88rem;padding:.45em .9em;border-radius:99px;background:var(--ink-3);border:1px solid var(--line)}
.chips i{color:var(--cyan);font-size:.85em}

/* locked teaser */
.card-locked{background:repeating-linear-gradient(-45deg,transparent 0 10px,rgba(0,255,236,.025) 10px 20px),var(--ink-2);border-style:dashed}
.card-locked .card-icon{background:var(--ink-3);color:var(--muted)}
.card-locked:hover .card-icon{background:var(--ink-3);color:var(--cyan)}
.card-stamp{font-family:var(--f-display);font-weight:700;font-size:.78rem;color:var(--ink);background:var(--cyan);padding:.3em .8em;border-radius:99px}
.redact{display:inline-block;height:.85em;vertical-align:middle;background:var(--line);border-radius:3px;margin-inline-end:8px}
.redact-lg{width:5.5em}
.redact-sm{width:3.5em}
.mark.mark-sm{font-size:.95rem}
.card-locked p{color:var(--fg)}

/* call-out under the grid */
.feat-more{margin-top:16px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;padding:18px 22px;border:1px solid var(--line);border-radius:16px;font-family:var(--f-display);font-weight:500}
.feat-more i.fa-bell{color:var(--cyan);margin-inline-end:.4em}
.feat-more .btn{font-family:var(--f-display);border-radius:3px}

@media (max-width:900px){
  .feat-grid{grid-template-columns:1fr 1fr}
  .card-featured{grid-row:auto;grid-column:1 / -1}
}
@media (max-width:560px){
  .feat-grid{grid-template-columns:1fr}
  .feat-more{justify-content:center;text-align:center}
}

/* footer */
footer{border-top:1px solid var(--line);padding-block:36px}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px}
footer nav{display:flex;flex-wrap:wrap;gap:22px;font-size:.9rem}
footer nav a{color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;gap:.45em}
footer nav a:hover{color:var(--cyan)}
footer small{display:flex;flex-direction:column;gap:8px;width:100%;color:var(--muted);font-size:.78rem;line-height:1.6;border-top:1px solid var(--line);padding-top:18px}
footer .legal{max-width:95ch;opacity:.8}
footer .footer-links{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px}
footer .footer-links a{color:var(--muted);text-decoration:none}
footer .footer-links a:hover{color:var(--cyan);text-decoration:underline}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* nav: user menu (<details>, no JavaScript needed to open it). Shared by the app pages and the landing page. */
.user-menu{position:relative}
.user-menu summary{list-style:none;display:flex;align-items:center;gap:10px;cursor:pointer;padding:5px 12px 5px 6px;border:1px solid var(--line);border-radius:99px;background:var(--ink-2);font-family:var(--f-display);font-weight:500;font-size:.92rem}
.user-menu summary::-webkit-details-marker{display:none}
.user-menu summary img,.user-menu-fallback{width:30px;height:30px;border-radius:50%;object-fit:cover;display:grid;place-items:center;background:var(--ink-3);color:var(--cyan)}
.user-menu summary .fa-chevron-down{font-size:.7rem;color:var(--muted);transition:transform .2s}
.user-menu[open] summary .fa-chevron-down{transform:rotate(180deg)}
.user-menu-name{max-width:14ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-menu-list{position:absolute;inset-inline-end:0;top:calc(100% + 8px);min-width:200px;z-index:30;display:grid;padding:6px;border-radius:14px;background:var(--ink-2);border:1px solid var(--line);box-shadow:0 20px 40px -15px rgba(0,0,0,.7)}
.user-menu-list a,.user-menu-list button{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;text-decoration:none;color:var(--fg);font:500 .95rem var(--f-display);background:none;border:0;cursor:pointer;text-align:start;width:100%}
.user-menu-list a:hover,.user-menu-list button:hover{background:var(--ink-3);color:var(--cyan)}
.user-menu-list i{width:1.1em;color:var(--muted);text-align:center}
@media (max-width:820px){.user-menu-name{display:none}}