/* Queso — getqueso.app. Shared stylesheet. System fonts only (no web-font
   requests) for speed + privacy. Light/dark via prefers-color-scheme. */

:root {
  --gold-1:#ffce54; --gold-2:#ffb638; --gold-3:#f0850a; --gold-4:#d4700a;
  --accent:#e07d00; --accent-ink:#9a5600;
  --ink:#1c1a17; --ink-2:#55504a; --ink-3:#857f76;
  --bg:#fffdf8; --bg-2:#fbf6ec; --card:#ffffff; --line:#efe9dc;
  --green:#25b24b; --blue:#2f6fe5;
  --shadow:0 2px 6px rgba(60,40,0,.05), 0 14px 40px rgba(90,60,0,.09);
  --shadow-sm:0 1px 3px rgba(60,40,0,.06), 0 6px 18px rgba(90,60,0,.07);
  --radius:18px; --radius-lg:26px;
  --maxw:1140px; --gutter:20px;
  --phone-shadow:0 10px 30px rgba(50,35,0,.14), 0 30px 70px rgba(50,35,0,.16);
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{
    --ink:#f3efe7; --ink-2:#c3bcae; --ink-3:#938c7f;
    --bg:#161310; --bg-2:#1d1915; --card:#201c17; --line:#2e2820;
    --accent:#ffc15a; --accent-ink:#ffd79a;
    --shadow:0 2px 6px rgba(0,0,0,.3), 0 18px 50px rgba(0,0,0,.45);
    --shadow-sm:0 1px 3px rgba(0,0,0,.3), 0 8px 22px rgba(0,0,0,.4);
    --phone-shadow:0 10px 30px rgba(0,0,0,.5), 0 30px 70px rgba(0,0,0,.55);
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:400 17px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji",sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.12;letter-spacing:-.02em;margin:0 0 .4em;font-weight:800}
h1{font-size:clamp(2.1rem,6vw,3.6rem)}
h2{font-size:clamp(1.7rem,4vw,2.6rem)}
h3{font-size:clamp(1.2rem,2.4vw,1.5rem)}
p{margin:0 0 1em}
.lead{font-size:clamp(1.1rem,2.3vw,1.35rem);color:var(--ink-2);line-height:1.55}
.muted{color:var(--ink-3)}
small{font-size:.82rem}

.container{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding:clamp(48px,8vw,104px) 0}
.section-tight{padding:clamp(32px,5vw,64px) 0}
.center{text-align:center}
.eyebrow{display:inline-block;font-size:.8rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);margin-bottom:.7em}
.narrow{max-width:720px;margin-inline:auto}

/* ---------- Header / nav ---------- */
.site-header{position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:saturate(1.3) blur(14px);-webkit-backdrop-filter:saturate(1.3) blur(14px);
  border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:18px;height:64px}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:1.25rem;
  color:var(--ink);letter-spacing:-.02em}
.brand:hover{text-decoration:none}
.brand img{width:30px;height:30px}
.nav-links{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav-links a{color:var(--ink-2);font-size:.96rem;font-weight:600;padding:8px 12px;border-radius:10px}
.nav-links a:hover{color:var(--ink);background:var(--bg-2);text-decoration:none}
.nav-cta{margin-left:6px}
.nav-toggle{display:none}
.menu-btn{display:none;margin-left:auto;background:none;border:0;cursor:pointer;padding:8px;color:var(--ink)}
.menu-btn svg{width:26px;height:26px}
@media (max-width:860px){
  .menu-btn{display:block}
  .nav-links{position:fixed;inset:64px 0 auto 0;flex-direction:column;align-items:stretch;
    gap:2px;margin:0;padding:10px var(--gutter) 18px;background:var(--bg);
    border-bottom:1px solid var(--line);box-shadow:var(--shadow);
    transform:translateY(-120%);transition:transform .25s ease;max-height:calc(100vh - 64px);overflow:auto}
  .nav-links a{padding:13px 12px;font-size:1.05rem}
  .nav-toggle:checked ~ .nav-links{transform:translateY(0)}
  .nav-cta{margin:8px 0 0}
}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-weight:700;font-size:1rem;line-height:1;padding:14px 22px;border-radius:999px;
  border:1px solid transparent;cursor:pointer;transition:transform .12s ease,box-shadow .2s ease;white-space:nowrap}
.btn:hover{text-decoration:none}
.btn-primary{background:linear-gradient(180deg,var(--gold-2),var(--gold-3));color:#3a2600;
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 8px 22px rgba(224,125,0,.35)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-ghost{background:var(--card);color:var(--ink);border-color:var(--line);box-shadow:var(--shadow-sm)}
.btn-ghost:hover{border-color:var(--ink-3)}
.btn-lg{padding:17px 30px;font-size:1.08rem}
.btn[aria-disabled="true"],.btn.is-disabled{opacity:.6;cursor:not-allowed;pointer-events:none;
  filter:grayscale(.15)}

/* App Store badge (disabled = coming soon) */
.store{display:inline-flex;flex-direction:column;align-items:center;gap:7px}
.store-badge{display:inline-flex;align-items:center;gap:11px;background:#111;color:#fff;
  border-radius:14px;padding:11px 18px;font-weight:600;position:relative}
.store-badge svg{width:26px;height:26px;flex:none}
.store-badge .s1{font-size:.68rem;opacity:.85;line-height:1;display:block;font-weight:500}
.store-badge .s2{font-size:1.18rem;line-height:1.1;font-weight:600;letter-spacing:-.01em}
.store-badge.is-soon{opacity:.72;cursor:default;filter:grayscale(.3)}
.soon-tag{font-size:.78rem;font-weight:700;color:var(--accent);
  background:color-mix(in srgb,var(--gold-2) 22%,transparent);
  padding:3px 10px;border-radius:999px}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;
  background:
    radial-gradient(1100px 520px at 78% -8%,color-mix(in srgb,var(--gold-1) 55%,transparent),transparent 60%),
    radial-gradient(760px 420px at 6% 8%,color-mix(in srgb,var(--gold-2) 34%,transparent),transparent 58%),
    var(--bg)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:42px;align-items:center;
  padding:clamp(40px,7vw,84px) 0 clamp(36px,6vw,68px)}
.hero h1{margin-bottom:.3em}
.hero .lead{max-width:30ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:1.6em}
.hero-media{justify-self:center}
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr;text-align:center;gap:28px}
  .hero .lead{max-width:none}
  .hero-cta{justify-content:center}
}

/* ---------- Phone frame ---------- */
.phone{position:relative;width:var(--pw,300px);aspect-ratio:1320/2868;
  background:#0c0c0e;border-radius:12.5% / 5.8%;padding:2.3%;
  box-shadow:var(--phone-shadow);border:1px solid rgba(255,255,255,.06)}
.phone>img,.phone>video{width:100%;height:100%;object-fit:cover;border-radius:10% / 4.6%;display:block;background:var(--bg-2)}
.phone::after{content:"";position:absolute;top:1.4%;left:50%;transform:translateX(-50%);
  width:34%;height:2.1%;background:#0c0c0e;border-radius:0 0 14px 14px;z-index:2}
.phone-sm{--pw:230px}
.phone-tilt{transform:rotate(2deg)}

/* ---------- Feature rows ---------- */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center;
  padding:clamp(40px,6vw,72px) 0;border-top:1px solid var(--line)}
.feature:first-of-type{border-top:0}
.feature.reverse .feature-media{order:-1}
.feature-media{display:flex;justify-content:center}
.feature-body h2{font-size:clamp(1.5rem,3.2vw,2.1rem)}
.feature-list{list-style:none;padding:0;margin:1.2em 0 0}
.feature-list li{position:relative;padding-left:30px;margin:.55em 0;color:var(--ink-2)}
.feature-list li::before{content:"";position:absolute;left:0;top:.42em;width:18px;height:18px;
  border-radius:50%;background:var(--gold-2);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/13px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/13px no-repeat}
@media (max-width:820px){
  .feature{grid-template-columns:1fr;gap:24px;text-align:center}
  .feature.reverse .feature-media{order:0}
  .feature-list{display:inline-block;text-align:left}
}

/* ---------- Cards / grids ---------- */
.grid{display:grid;gap:22px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;box-shadow:var(--shadow-sm)}
.card h3{margin-bottom:.35em}
.card p{margin:0;color:var(--ink-2);font-size:.98rem}
.card .ico{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--gold-2) 20%,transparent);margin-bottom:14px;font-size:1.4rem}
.ico svg{width:24px;height:24px;fill:none;stroke:var(--accent);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}

/* Dark "Queso Network for business" band: make card titles readable. */
.band-ink .card{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.14);box-shadow:none}
.band-ink .card h3{color:#fff}
.band-ink .card p{color:#cfc8ba}
.band-ink .card .ico{background:rgba(255,255,255,.1)}
.band-ink .card .ico svg{stroke:var(--gold-1)}
.band-ink .card.link-card:hover{border-color:var(--gold-2)}
.band-ink a{color:var(--gold-1)}

/* Use-case spreads (PTT / Offline pages) */
.usecases{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.usecase{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:var(--shadow-sm)}
.usecase .ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--gold-2) 20%,transparent);margin-bottom:12px}
.usecase h3{font-size:1.08rem;margin-bottom:.3em}
.usecase p{margin:0;color:var(--ink-2);font-size:.95rem}
.card.link-card:hover{border-color:var(--gold-2);box-shadow:var(--shadow);transform:translateY(-2px);
  transition:transform .15s ease,box-shadow .2s ease,border-color .2s ease}

.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;box-shadow:var(--shadow-sm)}
.tile b{display:block;margin-bottom:3px}
.tile span{color:var(--ink-3);font-size:.92rem}

/* ---------- Band (tinted section) ---------- */
.band{background:var(--bg-2)}
.band-gold{background:linear-gradient(160deg,var(--gold-2),var(--gold-3));color:#3a2600}
.band-gold .eyebrow,.band-gold a{color:#5a3a00}
.band-gold h2,.band-gold p{color:#3a2600}
.band-ink{background:#17140f;color:#f3efe7}
.band-ink h2{color:#fff}.band-ink p{color:#cdc6b8}.band-ink .eyebrow{color:var(--gold-1)}

/* ---------- Showcase screenshot ---------- */
.shot{border-radius:20px;overflow:hidden;box-shadow:var(--phone-shadow);
  border:1px solid var(--line);background:var(--bg-2)}
.shot img,.shot video{display:block;width:100%}
/* Cropped feature media sits in clean cards (no phone frame). Cap width so a
   portrait crop doesn't tower and a wide clip doesn't stretch edge to edge. */
.feature-media .shot{max-width:440px;width:100%;margin-inline:auto}
.hero-media .shot{max-width:540px;width:100%}
.hero-media{width:100%}
.prose figure .shot{max-width:460px}
figure{margin:0}
figcaption{font-size:.86rem;color:var(--ink-3);margin-top:10px;text-align:center}

/* ---------- Pricing ---------- */
.price-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:820px;margin-inline:auto}
@media (max-width:620px){.price-grid{grid-template-columns:1fr}}
.plan{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:30px;box-shadow:var(--shadow-sm);position:relative}
.plan.featured{border-color:var(--gold-2);box-shadow:0 0 0 2px var(--gold-2) inset,var(--shadow)}
.plan .pname{font-weight:800;font-size:1.3rem}
.plan .pprice{font-size:2.4rem;font-weight:800;margin:.1em 0}
.plan .pprice small{font-size:.9rem;font-weight:600;color:var(--ink-3)}
.plan ul{list-style:none;padding:0;margin:18px 0 24px}
.plan li{padding-left:28px;position:relative;margin:.5em 0;color:var(--ink-2)}
.plan li::before{content:"🧀";position:absolute;left:0;top:0;font-size:.95em}
.pill{position:absolute;top:-13px;right:22px;background:var(--gold-3);color:#3a2600;
  font-weight:800;font-size:.76rem;padding:5px 13px;border-radius:999px;letter-spacing:.03em}

/* ---------- Prose (guides / blog / legal) ---------- */
.prose{max-width:760px;margin-inline:auto}
.prose h2{margin-top:1.6em}
.prose h3{margin-top:1.3em}
.prose img,.prose .shot{margin:1.4em auto}
.prose ul,.prose ol{padding-left:1.3em}
.prose li{margin:.4em 0}
.prose blockquote{margin:1.4em 0;padding:4px 18px;border-left:4px solid var(--gold-2);
  color:var(--ink-2);font-style:italic}
.prose code{background:var(--bg-2);padding:2px 6px;border-radius:6px;font-size:.9em}
.meta-row{color:var(--ink-3);font-size:.9rem;margin-bottom:1.4em}
.callout{background:var(--bg-2);border:1px solid var(--line);border-left:4px solid var(--gold-2);
  border-radius:12px;padding:16px 18px;margin:1.4em 0}
.callout p:last-child{margin:0}

/* ---------- FAQ (details) ---------- */
.faq details{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:4px 18px;margin:12px 0;box-shadow:var(--shadow-sm)}
.faq summary{cursor:pointer;font-weight:700;padding:14px 0;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;color:var(--accent);font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq details[open] summary{border-bottom:1px solid var(--line)}
.faq details p{padding:14px 0 6px;margin:0;color:var(--ink-2)}

/* ---------- Logo strip ---------- */
.nets{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center}
.net{display:inline-flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);
  border-radius:999px;padding:9px 18px;font-weight:600;box-shadow:var(--shadow-sm);color:var(--ink-2)}
.net svg{width:20px;height:20px}

/* ---------- Footer ---------- */
.site-footer{background:var(--bg-2);border-top:1px solid var(--line);
  padding:56px 0 40px;margin-top:24px}
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:32px}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr 1fr;gap:28px}}
@media (max-width:460px){.foot-grid{grid-template-columns:1fr}}
.foot-grid h4{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:1em}
.foot-grid a{display:block;color:var(--ink-2);font-size:.95rem;padding:5px 0}
.foot-grid a:hover{color:var(--accent)}
.foot-brand .brand{margin-bottom:12px}
.foot-brand p{color:var(--ink-3);font-size:.92rem;max-width:34ch}
.foot-bottom{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;align-items:center;
  margin-top:40px;padding-top:24px;border-top:1px solid var(--line);color:var(--ink-3);font-size:.88rem}
.lang-switch{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.lang-switch a{padding:4px 9px;border-radius:8px;font-size:.86rem;color:var(--ink-2)}
.lang-switch a:hover,.lang-switch a[aria-current]{background:var(--card);color:var(--accent);text-decoration:none}

/* ---------- Misc ---------- */
.kicker-cheese::after{content:" 🧀"}
.hr{height:1px;background:var(--line);border:0;margin:0}
.pagehero{padding:clamp(40px,6vw,76px) 0 clamp(24px,3vw,40px);
  background:radial-gradient(900px 360px at 80% -20%,color-mix(in srgb,var(--gold-1) 40%,transparent),transparent 60%),var(--bg)}
.pagehero .eyebrow{margin-bottom:.5em}
.breadcrumb{font-size:.85rem;color:var(--ink-3);margin-bottom:1em}
.breadcrumb a{color:var(--ink-3)}
.badge-soft{display:inline-block;background:color-mix(in srgb,var(--gold-2) 18%,transparent);
  color:var(--accent-ink);font-weight:700;font-size:.78rem;padding:4px 11px;border-radius:999px}
.stat{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:800;color:var(--accent);line-height:1}
.cta-final{text-align:center}
.cta-final .btn{margin:6px}