/* Public pages — the landing page, a shared postcard and the level check.
   Built on tokens, base and components; nothing here is used inside the app. */

.pub{min-height:100vh;background:var(--paper);color:var(--ink)}
.pub-wrap{max-width:1240px;margin:0 auto;padding:0 var(--gutter)}
.pub-top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.pub-top .pub-wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:68px}
.pub-top nav{display:flex;align-items:center;gap:24px;font-size:var(--t-sm)}
.pub-top nav a{color:var(--muted);text-decoration:none}
.pub-top nav a:hover{color:var(--ink)}
.pub a.btn{text-decoration:none}
.pub-top nav a.btn-primary,.pub-top nav a.btn-primary:hover{color:var(--on-action)}
.pub-brand{text-decoration:none}
.pub-banner{padding:10px var(--gutter);background:var(--moss);color:var(--on-moss);text-align:center;font-size:var(--t-sm)}
.pub-banner b{font-weight:700}
.label{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}

/* Hero */
.pub-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;align-items:center;padding:72px 0 64px}
.pub-hero h1{margin:14px 0 18px;font-size:clamp(48px,6.4vw,96px);font-weight:600;line-height:.92;letter-spacing:-.058em}
.pub-hero p{max-width:34em;margin:0 0 28px;font-size:var(--t-lg);line-height:1.5;color:var(--ink-2)}
.pub-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.pub-cta .btn{min-height:50px;padding:0 24px;font-size:var(--t-md)}
.pub-cta small{flex-basis:100%;font-size:var(--t-xs);color:var(--muted)}
.pub-cards{position:relative;height:520px}
.pub-card{position:absolute;overflow:hidden;border:1px solid rgba(30,30,27,.13);border-radius:6px;background:#222 center/cover no-repeat;box-shadow:0 28px 74px rgba(15,15,13,.16);color:#fff}
.pub-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.5))}
.pub-card span{position:absolute;z-index:1;left:16px;right:16px;bottom:14px;display:grid;gap:3px}
.pub-card small{font-size:10px;color:rgba(255,255,255,.8)}
.pub-card strong{font-size:22px;font-weight:600;line-height:1.04;letter-spacing:-.035em}
.pub-card:nth-child(1){left:0;top:70px;width:31%;height:380px}
.pub-card:nth-child(2){left:34%;top:0;width:34%;height:470px}
.pub-card:nth-child(3){left:71%;top:50px;width:29%;height:400px}

/* Sections */
.pub-section{padding:80px 0;border-top:1px solid var(--line)}
.pub-section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:36px}
.pub-section-head h2{margin:8px 0 0;max-width:18em;font-family:var(--serif);font-size:clamp(36px,4vw,56px);font-weight:600;line-height:1;letter-spacing:-.02em}
.pub-section-head p{max-width:36em;margin:0;color:var(--muted);line-height:1.6}
.pub-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin:0;padding:0;list-style:none;counter-reset:step}
.pub-steps li{counter-increment:step;padding-top:18px;border-top:1px solid var(--ink)}
.pub-steps li::before{content:counter(step,decimal-leading-zero);display:block;margin-bottom:14px;font-size:var(--t-xs);font-weight:700;color:var(--accent)}
.pub-steps h3{margin:0 0 8px;font-size:var(--t-lg);font-weight:600;letter-spacing:-.02em}
.pub-steps p{margin:0;color:var(--muted);line-height:1.6}

.pub-cities{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}
.pub-city{position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:6px;background:#222 center/cover no-repeat;color:#fff}
.pub-city::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.55))}
.pub-city span{position:absolute;z-index:1;left:10px;bottom:9px;font-size:var(--t-sm);font-weight:600}
.pub-city small{display:block;font-size:10px;font-weight:500;color:rgba(255,255,255,.8)}

.pub-hosts{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.pub-host{display:grid;grid-template-columns:56px 1fr;gap:14px;padding:18px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--cream)}
.pub-host .avatar{width:56px;height:56px}
.pub-host strong{display:block;font-size:var(--t-md)}
.pub-host small{display:block;font-size:var(--t-xs);color:var(--muted)}
.pub-host p{grid-column:1/-1;margin:0;font-family:var(--serif);font-size:18px;font-weight:600;line-height:1.3;color:var(--ink-2)}

.pub-postcards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pub-pc{display:grid;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--cream);color:inherit;text-decoration:none}
.pub-pc-img{aspect-ratio:3/2;background:#ddd center/cover no-repeat}
.pub-pc-body{display:grid;gap:8px;padding:16px 18px 18px}
.pub-pc-body small{font-size:var(--t-xs);color:var(--muted)}
.pub-pc-body strong{font-family:var(--serif);font-size:21px;font-weight:600;line-height:1.2}

.pub-stories{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pub-story{display:grid;gap:14px;align-content:start;padding:24px;border-radius:var(--r-lg);background:var(--paper-2)}
.pub-story blockquote{margin:0;font-family:var(--serif);font-size:23px;font-weight:600;line-height:1.25}
.pub-story footer{display:flex;align-items:center;gap:10px;font-size:var(--t-xs);color:var(--muted)}
.pub-story footer b{display:block;color:var(--ink);font-size:var(--t-sm)}
.pub-mono{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:var(--moss);color:var(--on-moss);font-size:12px;font-weight:700}

.pub-prices{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:880px}
.pub-price{display:grid;gap:10px;padding:26px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--cream)}
.pub-price.is-plus{border-color:var(--ink)}
.pub-price h3{margin:0;font-size:var(--t-lg)}
.pub-price .amount{font-size:40px;font-weight:600;letter-spacing:-.04em}
.pub-price .amount small{margin-left:4px;font-size:var(--t-sm);font-weight:500;letter-spacing:0;color:var(--muted)}
.pub-price .btn{justify-self:start;margin-top:6px}
.pub-price ul{margin:0;padding:0 0 0 16px;color:var(--ink-2);line-height:1.8;font-size:var(--t-sm)}
.pub-region{margin-top:14px;font-size:var(--t-xs);color:var(--muted)}
.pub-offer-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:880px;padding:26px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--cream)}
.pub-offer-form label{display:grid;gap:6px;font-size:var(--t-sm);font-weight:600}
.pub-offer-form input:not([type="checkbox"]),.pub-offer-form select{width:100%;min-width:0;min-height:42px;padding:8px 12px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--paper);color:var(--ink);font:inherit}
.pub-offer-form .pub-offer-consent{display:flex;align-items:flex-start;gap:8px;grid-column:1/-1;font-weight:400}
.pub-offer-form .pub-offer-consent input{margin-top:3px}
.pub-offer-form button{justify-self:start}
.pub-offer-form #launchMessage{align-self:center;margin:0;font-size:var(--t-sm);color:var(--ink-2)}

.pub-safety{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;padding:28px;border-radius:var(--r-lg);background:var(--moss);color:var(--on-moss)}
.pub-safety .i{width:34px;height:34px}
.pub-safety p{margin:0;max-width:60em;line-height:1.6}
.pub-faq details{padding:16px 0;border-bottom:1px solid var(--line)}
.pub-faq summary{cursor:pointer;font-weight:600}
.pub-faq p{margin:10px 0 0;color:var(--muted);line-height:1.6;max-width:60em}
.pub-foot{padding:40px 0 56px;border-top:1px solid var(--line);font-size:var(--t-xs);color:var(--muted)}
.pub-foot .pub-wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px}
.pub-foot a{color:inherit}

/* A shared postcard */
.pc-public{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;align-items:start;padding:48px 0 72px}
.pc-public-img{aspect-ratio:4/5;border-radius:var(--r-lg);background:#ddd center/cover no-repeat}
.pc-public-body{display:grid;gap:16px}
.pc-public-host{display:flex;align-items:center;gap:12px}
.pc-public-host .avatar{width:48px;height:48px}
.pc-public-host small{display:block;color:var(--muted);font-size:var(--t-xs)}
.pc-public h1{margin:0;font-family:var(--serif);font-size:clamp(34px,3.6vw,50px);font-weight:600;line-height:1.05}
.pc-public-player{display:flex;align-items:center;gap:12px;padding:10px 14px 10px 10px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--cream)}
.pc-public-player button{width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--ink);color:var(--paper);cursor:pointer}
.pc-public-player .i{width:16px;height:16px}
.pc-public-bar{flex:1;height:4px;border-radius:999px;background:var(--paper-3);overflow:hidden}
.pc-public-bar i{display:block;width:0;height:100%;background:var(--accent)}
.pc-public-words{margin:0;font-size:var(--t-lg);line-height:1.5}
.pc-public-words.is-veiled,.pc-public-tr.is-veiled{filter:blur(5px);user-select:none}
.pc-public h1 small{display:block;margin-top:10px;font-family:var(--font);font-size:var(--t-md);font-weight:500;color:var(--muted)}
.pc-public-tr{margin:0;color:var(--muted)}
.pc-public-note{padding:14px 16px;border-radius:var(--r-sm);background:var(--paper-2);font-size:var(--t-sm);color:var(--ink-2);line-height:1.5}

/* Level check */
.level{max-width:760px;margin:0 auto;padding:56px 0 80px}
.level h1{margin:10px 0 12px;font-size:clamp(40px,5vw,68px);font-weight:600;line-height:.95;letter-spacing:-.05em}
.level-lede{margin:0 0 28px;color:var(--ink-2);font-size:var(--t-lg);line-height:1.5}
.level-langs{display:flex;gap:10px;margin-bottom:28px}
.level-langs button{min-height:44px;padding:0 18px;border:1px solid var(--line-strong);border-radius:var(--r-pill);background:var(--cream);font-weight:600;cursor:pointer}
.level-langs button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.level-progress{height:3px;margin-bottom:28px;border-radius:999px;background:var(--paper-3);overflow:hidden}
.level-progress span{display:block;height:100%;background:var(--accent);transition:width .3s var(--ease)}
.level-q small{font-size:var(--t-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.level-q h2{margin:8px 0 18px;font-family:var(--serif);font-size:30px;font-weight:600;line-height:1.2}
.level-options{display:grid;gap:10px}
.level-options button{padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--cream);text-align:left;font-size:var(--t-md);cursor:pointer}
.level-options button:hover{border-color:var(--line-strong)}
.level-foot{display:flex;justify-content:space-between;align-items:center;margin-top:18px;font-size:var(--t-xs);color:var(--muted)}
.level-result{display:grid;grid-template-columns:260px 1fr;gap:32px;align-items:start}
.level-card{aspect-ratio:4/5;display:grid;align-content:space-between;padding:22px;border-radius:var(--r-lg);background:var(--moss);color:var(--on-moss)}
.level-card b{font-size:96px;font-weight:600;letter-spacing:-.06em;line-height:.9}
.level-card span{font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;opacity:.8}
.level-card .brand-sig{font-size:22px;color:inherit}
.level-result h2{margin:0 0 12px;font-family:var(--serif);font-size:34px;font-weight:600;line-height:1.05}
.level-result ul{margin:0 0 20px;padding:0 0 0 18px;line-height:1.8;color:var(--ink-2)}
.level-note{font-size:var(--t-xs);color:var(--muted);line-height:1.5}

@media (max-width:980px){
  .pub-hero{grid-template-columns:1fr;padding-top:48px}
  .pub-cards{height:420px}
  .pub-cities{grid-template-columns:repeat(4,1fr)}
  .pub-hosts{grid-template-columns:1fr 1fr}
  .pub-postcards,.pub-stories{grid-template-columns:1fr}
  .pc-public{grid-template-columns:1fr}
}
@media (max-width:640px){
  .pub-top nav a:not(.btn){display:none}
  .pub-steps{grid-template-columns:1fr}
  .pub-cards{height:340px}
  .pub-cities{grid-template-columns:repeat(2,1fr)}
  .pub-hosts,.pub-prices{grid-template-columns:1fr}
  .pub-offer-form{grid-template-columns:1fr}
  .pub-section{padding:56px 0}
  .pub-section-head{flex-direction:column;align-items:flex-start}
  .level-result{grid-template-columns:1fr}
  .level-card{max-width:260px}
}