/* ============================================================
   QAuncle - Design System v1
   Rule: Uncle talks in Kalam. The software speaks in Inter.
   ============================================================ */

:root{
  /* Colour */
  --bg:#F6F0E5;
  --card:#FFFDF8;
  --ink:#1D2024;
  --ink-2:#64615B;
  --brown:#8B5E3C;
  --cream:#E9D7B8;
  --yellow:#F3C969;
  --green:#6F9A72;
  --red:#C95C50;
  --blue:#3D6591;   /* darkened from #4D79A8 to clear AA on cream at small sizes */
  --line:#E4DBCA;

  /* Radius */
  --r-sm:8px; --r-btn:11px; --r-card:14px; --r-panel:19px;
  --r-pill:999px; --r-circle:50%;   /* named so a stray 998px can never creep in */

  /* Shadow */
  --sh:0 8px 24px rgba(55,42,30,.08);
  --sh-lg:0 12px 35px rgba(55,42,30,.12);

  /* Type */
  --hand:"Kalam",cursive;
  --ui:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* Fluid type scale - grows with the viewport so wide screens stay in proportion */
  --fs-h1:clamp(32px,3.5vw,60px);
  --fs-h2:clamp(26px,2.2vw,42px);
  --fs-h3:clamp(20px,1.3vw,28px);
  --fs-say:clamp(19px,1.5vw,30px);
  --fs-body:clamp(16px,1vw,19px);
  --fs-small:clamp(15px,.85vw,17px);
  --fs-tiny:clamp(12.5px,.7vw,14px);
  --fs-stat:clamp(30px,2.4vw,40px);       /* score numbers, prices */
  --fs-hero-sm:clamp(30px,3.6vw,46px);    /* welcome + pricing headline */
  --fs-page-title:clamp(25px,2vw,34px);   /* issue detail heading */
  --fs-lead:clamp(18px,1.15vw,24px);      /* brand wordmark, FAQ question */

  /* Fluid spacing */
  --sp-sec:clamp(44px,5.5vw,104px);
  --pad-card:clamp(20px,1.5vw,32px);
  --pad-panel:clamp(24px,2vw,40px);
}

*{box-sizing:border-box}

/* Keyboard users must be able to see where they are. Visible on keyboard focus only,
   so mouse clicks stay clean. */
:focus-visible{outline:3px solid var(--brown);outline-offset:3px;border-radius:var(--r-sm)}
.btn:focus-visible,.gbtn:focus-visible,.langbtn:focus-visible,
.btn-copy:focus-visible,.qa summary:focus-visible{outline:3px solid var(--brown);outline-offset:3px}
.input:focus-visible,.textarea:focus-visible{outline:2px solid var(--brown);outline-offset:1px}
/* skip link - standard visually-hidden pattern, not the left:-9999px hack */
.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap;background:var(--ink);color:#fff;
  padding:12px 18px;border-radius:0 0 var(--r-sm) 0;font-weight:600;font-size:var(--fs-small);z-index:100}
.skip:focus{position:fixed;left:0;top:0;width:auto;height:auto;
  overflow:visible;clip:auto;clip-path:none}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--ui);font-size:var(--fs-body);line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{position:relative;z-index:1}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ---------- Type ---------- */
h1,h2,h3{margin:0}
.hand{font-family:var(--hand);font-weight:700;letter-spacing:.2px}
.h1{font-family:var(--hand);font-weight:700;font-size:var(--fs-h1);line-height:1.12}
.h2{font-family:var(--hand);font-weight:700;font-size:var(--fs-h2);line-height:1.15}
.h3{font-family:var(--hand);font-weight:700;font-size:var(--fs-h3);line-height:1.2}
.sub{font-size:var(--fs-body);color:var(--ink-2);max-width:54ch;line-height:1.55}
.small{font-size:var(--fs-small);color:var(--ink-2)}
.tiny{font-size:var(--fs-tiny);color:var(--ink-2);font-weight:500}
.num{font-weight:700;font-variant-numeric:tabular-nums}

/* Uncle speaking */
.say{font-family:var(--hand);font-weight:700;font-size:var(--fs-say);line-height:1.25}

/* ---------- Layout ---------- */
/* Full-bleed shell: nav + hero art run to the viewport edge. */
.page{max-width:2000px;margin:0 auto;padding:0 clamp(16px,1.2vw,30px)}
/* Content shell: everything readable lives inside this. Cards and pricing must NOT
   stretch across a 1920px screen - that is what made the sections look empty. */
.narrow{max-width:1320px;margin-left:auto;margin-right:auto;width:100%}
.between{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.center{display:flex;align-items:center;gap:10px;min-width:0}
.grid{display:grid;gap:18px}
.sec{padding:var(--sp-sec) 0}

/* two-column split used on hero / welcome / check / analyzing */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,48px);align-items:center}
.split > *{min-width:0}
@media(max-width:900px){.split{grid-template-columns:1fr}}
/* three across */
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:860px){.g3{grid-template-columns:1fr}}
/* before -> after */
.compare{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center}
@media(max-width:700px){.compare{grid-template-columns:1fr}.compare .arrow{transform:rotate(90deg);justify-self:center}}

/* ---------- Hero: fills the first screen, art bleeds to the right edge ---------- */
.hero{position:relative;overflow:hidden;
  min-height:calc(100vh - clamp(62px,4.2vw,80px));display:flex;align-items:center}
.hero .page{position:relative;z-index:2;width:100%}
.hero-copy{max-width:min(780px,54%);padding:clamp(20px,3vh,44px) 0}
/* cap the art so it never dwarfs the copy on very wide screens */
.hero-art{position:absolute;top:0;right:0;bottom:0;width:min(44%,820px);z-index:1}
.hero-art img{width:100%;height:100%;object-fit:cover;object-position:center right;border-radius:0}
/* the art already carries its own alpha fade - this only cleans the hard left edge */
.hero-art::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,var(--bg) 0%,rgba(246,240,229,0) 10%)}
@media(max-width:940px){
  .hero{min-height:0;display:block;padding:clamp(20px,5vw,40px) 0}
  .hero-art{position:static;width:auto;margin-top:16px}
  .hero-art img{height:auto;border-radius:var(--r-card)}
  .hero-art::before{display:none}
  .hero-copy{max-width:none;padding-bottom:0}
}

/* four feature chips on one row */
.chips{display:flex;gap:clamp(8px,.5vw,12px);flex-wrap:wrap}
.chips .chip{padding:clamp(7px,.5vw,11px) clamp(10px,.75vw,16px);
  font-size:var(--fs-tiny);gap:7px}
.chips .chip svg{width:1.1em;height:1.1em;color:var(--brown);flex:none}
@media(max-width:620px){.chips .chip{font-size:var(--fs-tiny);padding:8px 12px}}

/* closing CTA band - art, copy and action on one line, no dead space */
.cta-band{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(20px,2vw,40px);align-items:center}
.cta-band .bust{width:clamp(96px,8vw,150px)}
@media(max-width:820px){
  .cta-band{grid-template-columns:auto 1fr;row-gap:20px}
  .cta-band .btn{grid-column:1/-1;justify-self:start}
}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:40;background:rgba(246,240,229,.88);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav .page{display:flex;align-items:center;justify-content:space-between;height:clamp(62px,4.2vw,80px)}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--hand);font-weight:700;
  font-size:var(--fs-lead)}
.brand .av{width:clamp(34px,2.2vw,44px);height:clamp(34px,2.2vw,44px);border-radius:var(--r-circle);
  object-fit:cover;border:2px solid var(--cream);flex:none}
.navlinks{display:flex;gap:clamp(22px,1.8vw,38px);font-size:var(--fs-small);
  font-weight:500;color:var(--ink-2)}
.navlinks a:hover{color:var(--ink)}
@media(max-width:860px){.navlinks{display:none}}

/* right side of the header: language toggle + primary action */
.navright{display:flex;align-items:center;gap:clamp(10px,.8vw,16px)}
.langbtn{background:var(--card);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:clamp(5px,.4vw,8px) clamp(10px,.7vw,14px);font-family:var(--ui);
  font-size:var(--fs-tiny);font-weight:700;letter-spacing:.6px;
  color:var(--ink-2);cursor:pointer;line-height:1;flex:none}
.langbtn:hover{border-color:var(--brown);color:var(--brown)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--ui);font-weight:600;font-size:var(--fs-small);
  padding:clamp(11px,.72vw,15px) clamp(18px,1.25vw,28px);
  border-radius:var(--r-btn);border:1px solid transparent;
  cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,background .12s ease}
.btn:active{transform:translateY(1px)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{box-shadow:var(--sh)}
.btn-ghost{background:var(--card);color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--brown)}
.btn-yellow{background:var(--yellow);color:var(--ink)}
.btn-full{width:100%}
.btn-lg{padding:clamp(13px,.9vw,18px) clamp(24px,1.7vw,36px);font-size:var(--fs-body)}

/* ---------- Cards / inputs ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh)}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-panel);box-shadow:var(--sh-lg)}
.pad{padding:var(--pad-card)}
.pad-lg{padding:var(--pad-panel)}

label.lab{display:block;font-size:var(--fs-tiny);font-weight:600;color:var(--ink-2);margin-bottom:7px}
.input,.textarea{width:100%;font-family:var(--ui);font-size:var(--fs-small);color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:var(--r-btn);
  padding:clamp(11px,.72vw,15px) clamp(13px,.9vw,18px);outline:none}
.textarea{min-height:92px;resize:vertical;line-height:1.5}
.input:focus,.textarea:focus{border-color:var(--brown);box-shadow:0 0 0 3px rgba(139,94,60,.12)}

/* ---------- Chips / badges ---------- */
.chip{display:inline-flex;align-items:center;gap:8px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 14px;font-size:var(--fs-tiny);font-weight:500}
.badge{display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-pill);
  padding:3px 10px;font-size:var(--fs-tiny);font-weight:600;letter-spacing:.2px}
/* badge text is small, so these are darkened to clear WCAG AA (4.5:1) on cream */
.b-high{background:rgba(201,92,80,.14);color:#9E3529}
.b-med{background:rgba(243,201,105,.26);color:#7D5406}
.b-low{background:rgba(77,121,168,.14);color:#325A85}
.b-good{background:rgba(111,154,114,.16);color:#3F6B43}
.b-tag{background:var(--cream);color:var(--brown)}

.coin{display:inline-flex;align-items:center;gap:8px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:7px 14px;font-size:var(--fs-tiny);font-weight:600}
.coin .dot{width:18px;height:18px;border-radius:var(--r-circle);background:var(--yellow);
  display:grid;place-items:center;font-size:var(--fs-tiny);color:#7a5a12;flex:none}

/* ---------- Uncle art + placeholder ---------- */
.uncle{display:block;width:100%;height:auto;border-radius:var(--r-card)}
.uncle.ph{
  background:repeating-linear-gradient(45deg,#EFE4CE,#EFE4CE 12px,#E8DBC1 12px,#E8DBC1 24px);
  border:2px dashed var(--brown);display:grid;place-items:center;text-align:center;
  color:var(--brown);font-family:var(--ui);font-size:var(--fs-tiny);font-weight:600;padding:16px;
  min-height:var(--ph-h,220px);line-height:1.5;
}
.uncle.ph::after{content:attr(data-ph);white-space:pre-line}
.bust{width:100%;aspect-ratio:1/1;border-radius:var(--r-card);object-fit:cover}
.bust.ph{min-height:0;font-size:var(--fs-tiny);padding:8px;aspect-ratio:1/1}
/* small placeholders: keep their box size, drop the label */
.uncle.av.ph{width:clamp(34px,2.2vw,44px);height:clamp(34px,2.2vw,44px);
  min-height:0;padding:0;border-width:1.5px;border-radius:var(--r-circle)}
.uncle.av.ph::after{content:""}

/* ---------- Speech bubble ---------- */
.bubble{position:relative;background:var(--card);border:1.5px solid var(--ink);
  border-radius:var(--r-card);padding:14px 18px;box-shadow:4px 4px 0 rgba(29,32,36,.12)}
.bubble::after{content:"";position:absolute;left:28px;bottom:-11px;width:18px;height:18px;
  background:var(--card);border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);
  transform:rotate(45deg)}
.bubble.r::after{left:auto;right:28px}

/* ---------- Analyzing screen ---------- */
/* a section that fills exactly one screen, content centred */
.screen{min-height:calc(100vh - clamp(62px,4.2vw,80px));display:flex;align-items:center;
  padding:clamp(24px,3vh,48px) 0}
.scan{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,3vw,64px);align-items:center}
/* The bubble row and the pill row have FIXED heights, and the art has a fixed width.
   That makes the column height constant, so the artwork never moves while the text
   changes or pills come and go. min-height is not enough here - it still grows. */
/* --art-w is a HARD width, resolved only from the viewport. It must never depend on a
   parent's width, or the art resizes as the grid settles and the whole column jumps. */
.scan-uncle{display:grid;grid-template-rows:auto auto auto;gap:14px;
  justify-items:start;min-width:0;width:var(--art-w)}
.scan-uncle .bubble{height:calc(var(--fs-say) * 2.5 + 30px);
  display:flex;align-items:center;max-width:100%;box-sizing:border-box}
.scan-uncle .pills{height:92px;align-content:flex-start;overflow:hidden;width:100%}
/* the art is deliberately capped - it must not dominate the screen.
   Two layers stacked: the expression cross-fades in place so the scene never jumps. */
/* one source of truth for the art width - the column is sized from it */
.scan{--art-w:clamp(320px,30vw,540px)}
.scan-art{position:relative;width:var(--art-w);
  aspect-ratio:1374/1145;border-radius:var(--r-panel);overflow:hidden;box-shadow:var(--sh-lg);
  background:var(--cream)}
.scan-art .layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .9s ease}
.scan-art .layer.on{opacity:1}
@media (prefers-reduced-motion:reduce){.scan-art .layer{transition:none}}
.scan-panel{min-width:0}
.scan-title{font-family:var(--ui);font-size:var(--fs-small);font-weight:600}
@media(max-width:940px){
  .screen{min-height:0;padding:clamp(24px,5vw,44px) 0}
  /* viewport-based, never a percentage - a % here resolves against the element the
     column is itself sized from, which makes the width oscillate */
  /* subtract page padding + scrollbar so it can never push the page wider */
  .scan{grid-template-columns:1fr;--art-w:min(420px,calc(100vw - 72px))}
  .scan-uncle{justify-self:center}
  /* the pill row needs more height once it is narrow, or pills get clipped */
  .scan-uncle .pills{height:118px}
}

/* ---------- Toast pills (analyzing) ---------- */
.pills{display:flex;flex-wrap:wrap;gap:10px}
.pill{display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:9px 16px;font-size:var(--fs-tiny);box-shadow:var(--sh);
  animation:pop .4s ease both}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- Checklist ---------- */
.check{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.check li{display:flex;align-items:center;gap:11px;font-size:var(--fs-small);color:var(--ink-2)}
.check li .mk{width:19px;height:19px;border-radius:var(--r-circle);border:2px solid var(--line);
  display:grid;place-items:center;font-size:var(--fs-tiny);flex:none}
.check li.done{color:var(--ink)}
.check li.done .mk{background:var(--green);border-color:var(--green);color:#fff}
.check li.now .mk{border-color:var(--brown);border-right-color:transparent;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Progress ---------- */
.bar{height:8px;border-radius:var(--r-pill);background:var(--cream);overflow:hidden}
.bar > i{display:block;height:100%;background:var(--brown);border-radius:var(--r-pill);transition:width .5s ease}

/* ---------- Score cards ---------- */
.scores{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:820px){.scores{grid-template-columns:repeat(2,1fr)}}
.score{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:16px}
.score .t{display:flex;align-items:center;justify-content:space-between;font-size:var(--fs-small);font-weight:600;color:var(--ink-2)}
.score .v{font-size:var(--fs-stat);font-weight:700;margin-top:6px;font-variant-numeric:tabular-nums}
.score .v small{font-size:var(--fs-small);font-weight:600;color:var(--ink-2)}

/* Images now carry intrinsic width/height so the browser reserves the right box before
   they load - that is what stops the layout jumping. height:auto keeps the CSS width in
   charge of layout while the attributes supply only the aspect ratio. */
img{height:auto}

/* Account chips. The balance sits next to the action that spends it, so nobody has
   to go looking for it before deciding to run a scan. */
.credits-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--r-pill);
  background:var(--cream);color:var(--brown);font-size:var(--fs-tiny);font-weight:600;white-space:nowrap}
.side-account{display:grid;gap:10px;padding-top:14px;border-top:1px solid var(--line)}
.side-account .cl-userButtonBox{justify-content:flex-start}

/* ---------- App shell ---------- */
/* align-items:start lets .side be sticky - a stretched grid item cannot stick. */
.app{display:grid;grid-template-columns:232px 1fr;min-height:100vh;align-items:start}
@media(max-width:940px){.app{grid-template-columns:1fr}.side{display:none}}
/* Frozen rail: the report scrolls, the nav does not. Never set display here - the
   <=940px rule above hides the rail and a display value here would override it. */
.side{background:var(--card);border-right:1px solid var(--line);padding:20px 16px;
  position:sticky;top:0;height:100vh;overflow-y:auto;overscroll-behavior:contain}
.side nav{display:grid;gap:4px;margin-top:22px}
.side nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-sm);
  font-size:var(--fs-small);font-weight:500;color:var(--ink-2)}
.side nav a:hover{background:var(--bg)}
.side nav a.on{background:var(--cream);color:var(--brown);font-weight:600}
/* min-width:0 - without it a 1fr grid item refuses to shrink below its content */
.main{padding:26px 30px 60px;min-width:0}
@media(max-width:600px){.main{padding:20px 18px 48px}}

/* ---------- Tabs ---------- */
.tabs{display:flex;gap:22px;border-bottom:1px solid var(--line);margin:22px 0 20px;overflow-x:auto}
.tabs a{padding:10px 0;font-size:var(--fs-small);font-weight:600;color:var(--ink-2);
  border-bottom:2px solid transparent;white-space:nowrap}
.tabs a.on{color:var(--ink);border-bottom-color:var(--brown)}

/* A lock the reader can see through: the finding is fully visible above it, only the
   prompt is held back. Quiet styling on purpose - it should read as a door, not a wall. */
.btn.locked{color:var(--ink-2);border-color:var(--line);font-weight:600}
.btn.locked:hover{color:var(--brown);border-color:var(--brown)}

/* ---------- Issue row ---------- */
.issue{display:grid;grid-template-columns:132px 1fr auto;gap:18px;align-items:start;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:18px}
@media(max-width:760px){.issue{grid-template-columns:1fr}}
.shot{width:132px;height:96px;border-radius:var(--r-sm);border:1px solid var(--line);
  background:var(--cream);object-fit:cover}
.shot.ph{display:grid;place-items:center;font-size:var(--fs-tiny);color:var(--brown);text-align:center;padding:6px}

/* ---------- Code / prompt panel ---------- */
.codewrap{background:#15181C;border-radius:var(--r-panel);padding:20px;color:#E7E3DB}
.codehead{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:12px}
.codehead h3{font-family:var(--ui);font-size:var(--fs-small);font-weight:600;color:#fff}
pre.code{margin:0;font-family:ui-monospace,Menlo,Consolas,monospace;
/* No inner scroll and no height cap: the prompt IS the product, so it gets the whole
   page. An inner scrollbar hid two thirds of it and made it feel like a snippet. */
  font-size:var(--fs-small);line-height:1.8;white-space:pre-wrap;color:#CFD6DC}
pre.code b{color:var(--yellow);font-weight:600}
.btn-copy{background:#2A2F35;color:#fff;border:1px solid #3A4048;padding:8px 14px;
  border-radius:var(--r-sm);font-size:var(--fs-small);font-weight:600;cursor:pointer;flex:none}
.btn-copy:hover{background:#333940}

/* A feature we have not built yet says so, on the row itself. Listing it plain
   would be a claim; removing it would hide the roadmap. This is the honest middle. */
.feat li.soon{color:var(--ink-2)}
.feat li.soon::after{content:"soon";margin-left:8px;padding:2px 8px;border-radius:var(--r-pill);
  background:var(--cream);color:var(--brown);font-size:var(--fs-tiny);font-weight:700;
  letter-spacing:.4px;text-transform:uppercase;white-space:nowrap}

/* ---------- Pricing ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
/* two-tier pricing: keep the cards a sane width instead of stretching them */
.plans.two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:900px;margin-left:auto;margin-right:auto}
@media(max-width:900px){.plans,.plans.two{grid-template-columns:1fr}}
.plan{background:var(--card);border:1px solid var(--line);border-radius:var(--r-panel);padding:26px;
  display:flex;flex-direction:column;gap:16px;position:relative}
.plan.pop{border-color:var(--brown);box-shadow:var(--sh-lg)}
.plan .tag{position:absolute;top:-11px;left:26px;background:var(--brown);color:#fff;
  font-size:var(--fs-tiny);font-weight:700;padding:4px 11px;border-radius:var(--r-pill)}
.plan .price{font-size:var(--fs-stat);font-weight:700}
.plan .price span{font-size:var(--fs-small);font-weight:500;color:var(--ink-2)}
.feat{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:var(--fs-small);flex:1}
.feat li{display:flex;gap:9px;align-items:flex-start;color:var(--ink-2)}
.feat li::before{content:"\2713";color:var(--green);font-weight:700;flex:none}

/* ---------- FAQ ---------- */
.faq-head{display:grid;grid-template-columns:1fr auto;gap:clamp(24px,3vw,56px);align-items:center}
.faq-art{width:clamp(110px,10vw,180px)}
@media(max-width:700px){.faq-head{grid-template-columns:1fr}.faq-art{display:none}}

.faq{display:grid;gap:12px;max-width:900px}
.qa{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  padding:clamp(16px,1.2vw,24px) clamp(18px,1.4vw,28px);box-shadow:var(--sh)}
.qa summary{font-family:var(--hand);font-weight:700;font-size:var(--fs-lead);
  cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";font-family:var(--ui);font-weight:600;font-size:1.1em;
  color:var(--brown);flex:none;transition:transform .18s ease}
.qa[open] summary::after{content:"\2212"}
.qa p{margin:12px 0 0;font-size:var(--fs-small);color:var(--ink-2);line-height:1.7}
.qa p b{color:var(--ink)}

/* ---------- Modal ---------- */
.ovl{position:fixed;inset:0;background:rgba(29,32,36,.55);display:none;
  place-items:center;z-index:60;padding:20px}
.ovl.on{display:grid}
.modal{background:var(--card);border-radius:var(--r-panel);max-width:430px;width:100%;
  padding:30px;box-shadow:var(--sh-lg);animation:pop .25s ease both}
.gbtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-btn);padding:13px;
  font-weight:600;font-size:var(--fs-small);cursor:pointer}
.gbtn:hover{box-shadow:var(--sh)}
.gbtn svg{width:19px;height:19px;flex:none}

.hr{height:1px;background:var(--line);border:0;margin:0}
.mt6{margin-top:6px}.mt10{margin-top:10px}.mt16{margin-top:16px}
.mt24{margin-top:24px}.mt32{margin-top:32px}.mt40{margin-top:40px}