/* AICheck — calm, high-contrast light-blue product theme. */
:root{
  --bg:#f2f9ff;
  --bg-soft:#e7f4fd;
  --card:#ffffff;
  --border:#c7ddec;
  --border-soft:#dceaf4;
  --text:#122b45;
  --muted:#48657f;
  --muted-dim:#5f7488;
  --accent:#096db5;
  --accent-hover:#075a98;
  --accent-dim:rgba(9,109,181,.10);
  --aqua:#25bdb8;
  --danger:#a93d42;
  --shadow:0 18px 48px rgba(23,74,112,.10);
  --radius:16px;
  --maxw:820px;
  color-scheme:light;
  font-synthesis:none;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scrollbar-gutter:stable}
body{
  background:
    radial-gradient(circle at 18% -10rem, rgba(80,222,211,.16), transparent 30rem),
    radial-gradient(circle at 82% -12rem, rgba(76,165,224,.20), transparent 34rem),
    var(--bg);
  color:var(--text);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
button:disabled{cursor:not-allowed;opacity:.62}
.skip-link{
  position:fixed;z-index:200;top:calc(8px + env(safe-area-inset-top));left:calc(8px + env(safe-area-inset-left));
  min-height:46px;padding:10px 14px;border:2px solid var(--accent);border-radius:10px;
  background:var(--card);color:var(--text);font-weight:800;transform:translateY(-180%);
}
.skip-link:focus{transform:translateY(0)}
a:focus-visible,button:focus-visible,textarea:focus-visible,input:focus-visible,[tabindex]:focus-visible{
  outline:3px solid #0878c9;
  outline-offset:3px;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.page{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}

/* top nav — floating frosted-glass capsule (matches the PicPlots glass dock
   material: translucent base + saturate/blur backdrop + hairline white border +
   inset top highlight), tinted for AICheck's cool-blue theme. Sticky so content
   visibly blurs through the glass while scrolling. */
.nav{position:sticky;top:calc(10px + env(safe-area-inset-top));z-index:90;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  width:calc(100% - 32px);max-width:1240px;margin:14px auto 6px;
  padding:8px 12px 8px 20px;border-radius:999px;
  background:rgba(255,255,255,.42);
  -webkit-backdrop-filter:saturate(180%) blur(28px);
  backdrop-filter:saturate(180%) blur(28px);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 12px 32px rgba(23,74,112,.14), inset 0 1px 0 rgba(255,255,255,.6);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav{background:rgba(255,255,255,.93)}   /* no-blur engines: near-solid glass */
}
/* anchor jumps must clear the floating glass bar */
.section,.pricing,.how,.faq,.detector-head{scroll-margin-top:92px}
.nav .brand{display:flex;align-items:center;gap:9px;min-height:44px;font-weight:850;font-size:19px;letter-spacing:-.02em}
.nav .brand .logo{width:32px;height:32px;display:grid;place-items:center}
.nav .brand .logo img{display:block;width:100%;height:100%}

/* brand wordmark — “AI” carries the gradient of the mark, “Check” stays ink */
.wordmark{letter-spacing:-.03em}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .wm-ai{background:linear-gradient(130deg,#12ac9e,#0e7fd1);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
}
.nav .links{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:15px}
.nav .links a{display:inline-flex;align-items:center;min-height:44px}
.nav .links a:hover{color:var(--text)}
/* always-visible Go Pro / plans pill, pinned at the top right of every page */
.nav .links a.nav-pro{min-height:44px;min-width:141px;justify-content:center;padding:7px 18px;border-radius:99px;background:var(--accent);color:#fff;font-weight:800;box-shadow:0 6px 16px rgba(9,109,181,.24)}
.nav .links a.nav-pro:hover{background:var(--accent-hover);color:#fff}

/* hero / landing */
.hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:48px calc(24px + env(safe-area-inset-right)) 64px calc(24px + env(safe-area-inset-left))}
.hero-inner{display:grid;grid-template-columns:1fr;gap:44px;align-items:center;width:100%;max-width:1232px;margin:0 auto}
.hero-trust{display:inline-flex;align-items:flex-start;gap:9px;margin:22px 0 0;color:var(--muted);font-size:14.5px;font-weight:650;text-align:left}
.hero-trust::before{content:"";flex:0 0 auto;width:8px;height:8px;margin-top:7px;border-radius:50%;background:var(--aqua);box-shadow:0 0 0 4px rgba(37,189,184,.16)}
.hero-lockup{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:24px}
.hero-mark{display:block;width:clamp(58px,8.6vw,90px);height:auto;filter:drop-shadow(0 10px 26px rgba(13,45,75,.18))}

/* hero visual — a static "evidence card" preview of the checker's result UI */
.hero-visual{position:relative;width:min(100%,460px);margin:8px auto 0;padding:18px 0 26px}
.hv-card{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:22px;box-shadow:var(--shadow);text-align:left}
.hv-kicker{margin:0 0 12px;color:var(--accent);font-size:13px;font-weight:850;letter-spacing:.1em;text-transform:uppercase}
.hv-row{display:flex;align-items:flex-start;gap:12px;padding:11px 0;border-top:1px solid var(--border-soft)}
.hv-dot{flex:0 0 auto;width:12px;height:12px;margin-top:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-dim)}
.hv-dot-aqua{background:var(--aqua);box-shadow:0 0 0 4px rgba(37,189,184,.14)}
.hv-row-copy b{display:block;font-size:15.5px;line-height:1.3}
.hv-row-copy small{display:block;color:var(--muted);font-size:13.5px;line-height:1.4}
.hv-limit{margin-top:12px;padding:10px 13px;border-left:4px solid var(--accent);background:var(--bg-soft);border-radius:0 10px 10px 0;color:var(--muted);font-size:13.5px;font-weight:650}
.hv-chip{position:absolute;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:99px;background:var(--card);border:1px solid var(--border);box-shadow:0 10px 26px rgba(23,74,112,.14);font-size:13.5px;font-weight:750;white-space:nowrap}
.hv-chip-a{top:0;left:-10px}
.hv-chip-b{bottom:0;right:-6px;color:var(--accent)}

/* feature row — fills the landing width below the hero spread */
.feature-row{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;width:100%;max-width:1232px;margin:52px auto 0;padding:0}
.feature-row li{display:flex;align-items:flex-start;gap:12px;background:rgba(255,255,255,.72);border:1px solid var(--border-soft);border-radius:16px;padding:16px 17px;text-align:left;box-shadow:0 6px 18px rgba(23,74,112,.05)}
.feat-icon{flex:0 0 auto;width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:var(--accent-dim);font-size:18px}
.feat-copy b{display:block;font-size:15.5px;line-height:1.3;margin-bottom:2px}
.feat-copy small{display:block;color:var(--muted);font-size:13.5px;line-height:1.45}
@media (min-width:1020px){
  .hero-inner{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);text-align:left}
  .hero-copy .hero-lockup{justify-content:flex-start}
  .hero-copy .lede{margin-left:0;margin-right:0}
  .hero-copy .btn-row{justify-content:flex-start}
  .hero-visual{margin:0 0 0 auto}
  .feature-row{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:560px){
  .feature-row{grid-template-columns:1fr}
  .hv-chip-a{left:0}
  .hv-chip-b{right:0}
}
.eyebrow{color:var(--accent);font-size:14px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;margin-bottom:14px}
h1.big{font-size:clamp(44px,8vw,86px);line-height:1;font-weight:800;margin:0;letter-spacing:-.02em}
.tagline{font-size:22px;font-weight:700;margin:0 0 18px}
.lede{color:var(--muted);max-width:620px;margin:0 auto 28px;font-size:17px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:11px 18px;border-radius:12px;font-weight:700;font-size:16px;line-height:1.25;cursor:pointer;border:1px solid transparent;transition:background-color .15s,border-color .15s,transform .15s,box-shadow .15s}
.btn-outline{border-color:var(--accent);color:var(--accent);background:transparent}
.btn-outline:hover,.btn-line:hover{background:var(--accent-dim)}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 8px 20px rgba(9,109,181,.18)}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn-hero{min-height:68px;padding:20px 52px;font-size:22px;font-weight:800;letter-spacing:.01em;border-radius:18px;box-shadow:0 18px 44px rgba(9,109,181,.34)}
.btn-hero:hover{transform:translateY(-2px);box-shadow:0 22px 52px rgba(9,109,181,.40)}
.btn-hero:active{transform:translateY(0);box-shadow:0 12px 30px rgba(9,109,181,.30)}
.btn-primary:active,.btn-outline:active,.btn-line:active{transform:translateY(1px)}
.btn-line{border-color:var(--border);color:var(--accent);background:var(--card)}
.btn-ghost{border-color:var(--border);color:var(--muted);background:transparent}
.btn-ghost:hover{color:var(--text);border-color:var(--muted-dim)}

/* detector card */
.section{padding:42px calc(20px + env(safe-area-inset-right)) 36px calc(20px + env(safe-area-inset-left))}
.center{text-align:center}
.detector-head{max-width:700px;margin:0 auto 24px;text-align:center}
.detector-head h1{font-size:clamp(36px,6vw,58px);line-height:1.06;font-weight:850;margin:.2em 0 .3em;letter-spacing:-.035em}
.detector-head p.sub{font-size:20px;line-height:1.45;font-weight:650;margin:0 0 12px}
.detector-head p.caveat{color:var(--muted);font-size:16px;max-width:680px;margin:0 auto 8px}
.learn-link{display:inline-flex;align-items:center;min-height:44px;color:var(--accent);font-weight:700;text-decoration:underline;text-decoration-color:rgba(9,109,181,.35);text-underline-offset:3px}
.scan-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:660px;margin:0 auto 14px;padding:0;list-style:none}
.scan-steps li{display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:left;background:rgba(255,255,255,.7);border:1px solid var(--border-soft);border-radius:14px;padding:12px}
.scan-steps li > span{grid-row:1/3;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--accent-dim);color:var(--accent);font-weight:850}
.scan-steps b{font-size:15px;line-height:1.2}
.scan-steps small{color:var(--muted);font-size:13px;line-height:1.25}
.card{max-width:660px;margin:0 auto;background:var(--card);border:1px solid var(--border);border-radius:20px;padding:22px;box-shadow:var(--shadow)}
.card[aria-busy="true"]{cursor:progress}
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.tab{min-height:48px;padding:11px 12px;border-radius:12px;border:1px solid var(--border-soft);background:var(--bg-soft);color:var(--muted);font-weight:700;text-align:center;cursor:pointer}
.tab.active{color:var(--accent);border-color:var(--accent);background:var(--accent-dim);box-shadow:inset 0 0 0 1px rgba(9,109,181,.08)}
.input-label{display:block;font-size:15px;font-weight:800;margin:0 0 7px}
textarea{width:100%;min-height:220px;resize:vertical;background:#fbfdff;border:1px solid var(--border);border-radius:14px;color:var(--text);padding:15px;font:inherit;font-size:16px;line-height:1.55}
textarea:hover{border-color:#8eb8d5}
textarea:focus{border-color:var(--accent)}
textarea::placeholder{color:var(--muted-dim)}
.field-meta{display:flex;justify-content:flex-end;margin-top:7px}
.field-meta .ready{color:#286b4e}
.field-note{margin:8px 0 0;color:var(--muted);font-size:14px;line-height:1.5}
.writing-assist{margin-top:18px;padding:16px;border:1px solid #b9d9ee;border-radius:16px;background:#f2f9ff}
.writing-assist-copy h2{margin:0 0 5px;font-size:19px;line-height:1.25}
.writing-assist-copy p{margin:0;color:var(--muted);font-size:15px;line-height:1.5}
.writing-assist-controls{display:grid;grid-template-columns:minmax(120px,1fr) minmax(150px,1.4fr) auto;align-items:end;gap:10px;margin-top:14px}
.writing-assist-controls label{font-size:14px;font-weight:750;grid-column:1/-1}
.writing-assist-controls select{width:100%;min-height:48px;padding:10px 38px 10px 12px;border:1px solid var(--border);border-radius:12px;background:#fff;color:var(--text);font:inherit;font-size:16px;grid-column:1/3}
.writing-assist-controls select:focus-visible{outline:3px solid rgba(9,109,181,.28);outline-offset:2px;border-color:var(--accent)}
.writing-output-wrap{margin-top:16px;padding-top:16px;border-top:1px solid #c7e1f1}
.writing-output-wrap[hidden]{display:none}
.writing-output-wrap textarea{min-height:180px;background:#fff}
.writing-summary{margin:8px 0 0;color:#245e86;font-size:14px;font-weight:750;line-height:1.4}
.writing-output-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.writing-output-actions .btn{flex:1 1 150px}
.quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:8px}
.uploader{display:flex;flex-direction:column;align-items:center;gap:4px;border:2px dashed var(--border);border-radius:14px;padding:30px 20px;text-align:center;color:var(--muted);cursor:pointer;background:#fbfdff;transition:.15s}
.uploader:hover,.uploader.is-dragging{border-color:var(--accent);color:var(--text);background:var(--accent-dim)}
.uploader.has-file{border-style:solid;border-color:#65a8d5;background:#f3faff}
.upload-title{color:var(--text);font-size:17px;font-weight:800}
.upload-sub{font-size:14px}
.uploader .hint{display:block;margin-top:8px;max-width:520px}
.uploader.hidden,.pane.hidden{display:none}
.cam-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.consent{display:flex;gap:10px;align-items:flex-start;margin-top:14px;padding:12px;border-radius:12px;background:var(--bg-soft);color:var(--muted);cursor:pointer;font-size:14px;line-height:1.5}
.consent input{flex:0 0 auto;width:20px;height:20px;margin:1px 0 0;accent-color:var(--accent)}
.consent:has(input:disabled){cursor:default}
.actions{display:flex;align-items:center;gap:14px;margin-top:16px}
.actions .btn{flex:0 0 auto}
.hint{color:var(--muted-dim);font-size:14px;line-height:1.45}
.quota-upgrade{display:inline-flex;align-items:center;min-height:44px;color:var(--accent);font-weight:750;text-decoration:underline;text-decoration-color:rgba(9,109,181,.32);text-underline-offset:3px}

/* accessibility: screen-scan button + frame-scan progress */
.btn-screen{line-height:1.35;white-space:normal}
.screen-note{text-align:center;margin:0 0 12px}
.scan-progress{margin-top:14px}
.scan-progress-track{height:12px;border-radius:99px;background:var(--bg-soft);border:1px solid var(--border-soft);overflow:hidden}
.scan-progress-track > span{display:block;height:100%;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left center;transition:transform .3s;will-change:transform}

/* result */
.result{margin-top:20px;border:1px solid var(--border);border-radius:16px;padding:18px;display:none;background:#f8fcff}
.result.show{display:block}
.result-kicker{margin:0 0 5px;color:var(--accent);font-size:14px;font-weight:850;letter-spacing:.1em;text-transform:uppercase}
.meter{height:22px;border-radius:99px;background:#d7e9f6;overflow:hidden;margin:14px 0;box-shadow:inset 0 1px 4px rgba(23,74,112,.14)}
.meter[hidden]{display:none}
.meter > span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#3ec8bd,var(--accent));width:0;transition:width .8s cubic-bezier(.22,.8,.3,1);box-shadow:0 0 10px rgba(9,109,181,.35)}
.score-line{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-weight:750}
.score-line #verdict{font-size:21px;line-height:1.3}
.score-line #score{flex:0 0 auto;color:var(--accent);font-size:17px;font-weight:800;text-align:right}
.verdict-tech{color:var(--muted-dim);font-size:13.5px;margin:6px 0 0;letter-spacing:.01em}
.verdict-tech[hidden]{display:none}
.content-desc{color:var(--muted);font-size:15px;font-weight:650;margin:10px 0 0;padding:9px 12px;background:var(--bg-soft);border:1px solid var(--border-soft);border-radius:12px}
.content-desc[hidden]{display:none}

/* analyzing beat — a short on-device scan animation before the answer */
.analyzing{margin-top:16px;text-align:center}
.analyzing[hidden]{display:none}
.analyzing-frame{position:relative;width:min(260px,72%);height:150px;margin:6px auto 12px;border-radius:16px;background:linear-gradient(160deg,#eaf5fd,#dbeefb);overflow:hidden}
.analyzing-grid{position:absolute;inset:0;background:
  repeating-linear-gradient(0deg,transparent 0 19px,rgba(9,109,181,.07) 19px 20px),
  repeating-linear-gradient(90deg,transparent 0 19px,rgba(9,109,181,.07) 19px 20px)}
.analyzing-corner{position:absolute;width:18px;height:18px;border:3px solid var(--accent);opacity:.85}
.analyzing-corner.tl{top:8px;left:8px;border-right:0;border-bottom:0;border-radius:6px 0 0 0}
.analyzing-corner.tr{top:8px;right:8px;border-left:0;border-bottom:0;border-radius:0 6px 0 0}
.analyzing-corner.bl{bottom:8px;left:8px;border-right:0;border-top:0;border-radius:0 0 0 6px}
.analyzing-corner.br{bottom:8px;right:8px;border-left:0;border-top:0;border-radius:0 0 6px 0}
/* The on-device model pins the main thread while it runs, so rAF/JS-driven
   motion freezes for the whole scan. Everything below animates ONLY transform
   and opacity and is promoted to its own layer, which keeps it running on the
   compositor thread — the scan visibly animates even while inference blocks. */
.analyzing-scanline{position:absolute;left:6px;right:6px;top:0;height:3px;border-radius:99px;background:linear-gradient(90deg,transparent,#12ac9e 30%,var(--accent) 70%,transparent);box-shadow:0 0 14px rgba(18,172,158,.55);animation:aicheck-scan 1.15s ease-in-out infinite alternate;will-change:transform;backface-visibility:hidden}
@keyframes aicheck-scan{from{transform:translate3d(0,10px,0)}to{transform:translate3d(0,134px,0)}}
.analyzing-grid{will-change:opacity;animation:aicheck-grid 2.3s ease-in-out infinite}
@keyframes aicheck-grid{0%,100%{opacity:.55}50%{opacity:1}}
.analyzing-corner{will-change:transform,opacity;animation:aicheck-corner 1.9s ease-in-out infinite}
.analyzing-corner.tr{animation-delay:.15s}
.analyzing-corner.bl{animation-delay:.3s}
.analyzing-corner.br{animation-delay:.45s}
@keyframes aicheck-corner{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.18)}}
.analyzing-label{margin:0;font-size:18px;font-weight:800}
.analyzing-dots span{animation:aicheck-dot 1.2s infinite;display:inline-block}
.analyzing-dots span:nth-child(2){animation-delay:.2s}
.analyzing-dots span:nth-child(3){animation-delay:.4s}
@keyframes aicheck-dot{0%,60%,100%{opacity:.25}30%{opacity:1}}
.analyzing-sub{margin:4px 0 0}
/* staged "thorough scan" narration + progress under the frame */
.analyzing-stage{margin:8px 0 0;min-height:1.4em;color:var(--accent);font-size:15px;font-weight:750;letter-spacing:.01em;transition:opacity .25s}
.analyzing-stage.stage-swap{opacity:0}
.analyzing-progress{position:relative;height:8px;max-width:300px;margin:10px auto 0;border-radius:99px;background:var(--bg-soft);border:1px solid var(--border-soft);overflow:hidden}
/* Determinate fill uses scaleX (compositor) rather than width (layout, and
   frozen while the model runs). */
.analyzing-progress > span{display:block;height:100%;width:100%;border-radius:inherit;background:linear-gradient(90deg,#3ec8bd,var(--accent));box-shadow:0 0 10px rgba(9,109,181,.35);transform:scaleX(0);transform-origin:left center;transition:transform .55s cubic-bezier(.25,.7,.35,1);will-change:transform}
/* Indeterminate sweep: proves work is happening even when no JS can run. */
.analyzing-progress::after{content:"";position:absolute;inset:0;width:38%;border-radius:inherit;background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);animation:aicheck-sweep 1.25s linear infinite;will-change:transform}
@keyframes aicheck-sweep{from{transform:translate3d(-100%,0,0)}to{transform:translate3d(330%,0,0)}}
@media (prefers-reduced-motion:reduce){
  .analyzing-scanline,.analyzing-dots span,.analyzing-grid,.analyzing-corner{animation:none}
  .analyzing-progress::after{animation:none;opacity:0}
  .analyzing-corner{opacity:.85;transform:none}
  .analyzing-scanline{top:73px}
  .analyzing-stage{transition:none}
  .analyzing-progress > span{transition:none}
}

/* result upsell (free plan only; hidden for Pro by app.js) */
.result-upsell{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px;padding:13px 15px;background:linear-gradient(120deg,rgba(18,172,158,.09),rgba(9,109,181,.10));border:1px solid var(--border);border-radius:14px;font-weight:650}
.result-upsell[hidden]{display:none}
.result-upsell span{flex:1 1 260px}
.result-upsell .btn{flex:0 0 auto}
.result-evidence{white-space:pre-line;color:var(--muted);font-size:15px;line-height:1.6;margin:12px 0}
.result-next{border-left:4px solid var(--accent);background:var(--card);border-radius:0 10px 10px 0;padding:11px 13px;margin-top:14px}
.result-next strong{font-size:14px}
.result-next p{margin:2px 0 0;color:var(--muted);font-size:15px}
.result-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.result-actions .btn{flex:1 1 180px}
.result-disclaimer{margin:14px 0 0;color:var(--muted-dim);font-size:14px;line-height:1.5}
.result[data-kind="error"]{border-color:#e2b7ba;background:#fffafa}
.result[data-kind="error"] .result-kicker{color:var(--danger)}
.badge{display:inline-block;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:700;border:1px solid var(--border)}

/* how it works */
.how{max-width:660px;margin:36px auto 0}
.how h2{font-size:26px;margin:0 0 14px}
.how ol{color:var(--muted);padding-left:20px}
.how ol li{margin:10px 0}
.how b{color:var(--text)}

/* pricing */
.pricing{max-width:660px;margin:36px auto 0}
.pricing h2{font-size:26px;margin:0 0 14px}
.price-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.price-grid{grid-template-columns:1fr}}
.price-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:0 9px 24px rgba(23,74,112,.06)}
.price-card.featured{border-color:var(--accent);box-shadow:0 9px 28px rgba(9,109,181,.11)}
.price-card h3{margin:0 0 2px;font-size:18px}
.price-card .price{font-size:30px;font-weight:800;margin-bottom:8px}
.price-card .price span{font-size:14px;font-weight:600;color:var(--muted)}
.price-card ul{list-style:none;margin:0 0 14px;padding:0;color:var(--muted);font-size:15px}
.price-card ul li{margin:6px 0}
.price-card .btn{margin-top:auto}

/* FAQ */
.faq{max-width:660px;margin:36px auto 0}
.faq h2{font-size:26px;margin:0 0 14px}
.faq details{background:var(--card);border:1px solid var(--border);border-radius:14px;margin:10px 0;padding:0 16px;box-shadow:0 6px 18px rgba(23,74,112,.04)}
.faq summary{display:flex;align-items:center;min-height:52px;cursor:pointer;font-weight:750;padding:12px 0}
.faq summary:hover{color:var(--accent)}
.faq details p{color:var(--muted);font-size:16px;margin:0 0 16px}
.faq details a{color:var(--accent)}

/* generic content pages */
.content{max-width:720px;margin:0 auto;padding:48px calc(20px + env(safe-area-inset-right)) 64px calc(20px + env(safe-area-inset-left))}
.content h1{font-size:clamp(36px,7vw,48px);line-height:1.1;margin:0 0 8px}
.content h2{margin-top:30px}
.content p,.content li{color:var(--muted);font-size:16px}
.content a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.content .muted{color:var(--muted-dim);font-size:15px}

/* the page ends AT the footer — no tall bluish band after "NIRO Corp" */
footer{border-top:1px solid var(--border-soft);color:var(--muted-dim);font-size:14px;text-align:center;padding:18px calc(20px + env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left))}
footer a{display:inline-flex;align-items:center;min-height:44px;padding:0 3px;color:var(--muted)}
footer a:hover{color:var(--text)}

/* AICheck Pro paywall */
html.pw-open,html.pw-open body{overflow:hidden}
.pw-overlay{position:fixed;inset:0;z-index:100;background:rgba(12,35,55,.58);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:calc(20px + env(safe-area-inset-top)) calc(18px + env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) calc(18px + env(safe-area-inset-left))}
.pw-card{position:relative;width:100%;max-width:440px;max-height:90vh;max-height:90dvh;overflow:auto;background:var(--card);border:1px solid var(--border);border-radius:20px;padding:26px 22px;box-shadow:0 28px 80px rgba(8,35,56,.28)}
.pw-x{position:absolute;top:10px;right:10px;width:44px;height:44px;border-radius:12px;border:1px solid var(--border);background:var(--bg-soft);color:var(--muted);cursor:pointer;font-size:16px}
.pw-x:hover{color:var(--text)}
.pw-badge{display:inline-block;margin-right:52px;color:var(--accent);background:var(--accent-dim);border:1px solid var(--accent);font-size:14px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:5px 10px;border-radius:99px}
.pw-title{font-size:26px;font-weight:800;margin:14px 0 6px;letter-spacing:-.01em}
.pw-sub{color:var(--muted);font-size:15px;margin:0 0 18px}
.pw-plans{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.pw-plan{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:64px;text-align:left;padding:14px 16px;border-radius:12px;border:1px solid var(--border);background:var(--bg-soft);color:var(--text);font:inherit;cursor:pointer;transition:.15s}
.pw-plan:hover{border-color:var(--accent);background:var(--accent-dim)}
.pw-plan:disabled{cursor:progress;opacity:.85}
.pw-plan-main{display:flex;flex-direction:column;gap:2px}
.pw-plan-name{font-weight:700;font-size:16px}
.pw-plan-blurb{color:var(--muted);font-size:14px}
.pw-plan-price{font-weight:800;color:var(--accent);white-space:nowrap}
.pw-plan-status{display:flex;flex-direction:column;gap:5px;padding:15px 16px;border:1px solid var(--border);border-radius:12px;background:var(--bg-soft);color:var(--text);line-height:1.45}
.pw-plan-status strong{font-size:16px}
.pw-plan-status span{color:var(--muted);font-size:15px}
.pw-retry{width:100%}
.pw-restore{font-size:15px}
.pw-legal{color:var(--muted-dim);font-size:14px;line-height:1.55;margin:14px 0 0}
.pw-legal a{color:var(--muted);text-decoration:underline}
.pw-legal a:hover{color:var(--text)}
.pw-toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translate(-50%,20px);background:#12304a;border:1px solid #234c6b;color:#fff;padding:12px 17px;border-radius:12px;font-size:15px;z-index:110;opacity:0;pointer-events:none;transition:.25s;max-width:88vw;text-align:center;box-shadow:0 12px 32px rgba(8,35,56,.24)}
.pw-toast.show{opacity:1;transform:translate(-50%,0)}

@media (max-width:680px){
  /* Once the links wrap, the navigation is too tall to remain an overlay:
     keeping it sticky can cover the verdict after result auto-scroll. Let the
     compact header leave with the document so the whole result stays visible. */
  .nav{position:static;align-items:flex-start;flex-wrap:wrap;gap:4px;width:calc(100% - 20px);margin-top:10px;padding:10px 16px;border-radius:26px}
  .nav .links{width:100%;gap:8px;justify-content:space-between;overflow-x:auto;white-space:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .nav .links::-webkit-scrollbar{display:none}
  .nav .links a{flex:0 0 auto}
  .hero-lockup{gap:12px;margin-bottom:20px}
  .btn-hero{width:100%;max-width:420px;padding:18px 28px;font-size:20px}
  .nav .links a{min-width:44px;justify-content:center}
  .nav .links a.nav-pro{min-width:0}
  .section{padding:24px calc(14px + env(safe-area-inset-right)) 44px calc(14px + env(safe-area-inset-left))}
  .scan-steps{grid-template-columns:1fr}
  .scan-steps li{grid-template-columns:32px auto 1fr;grid-template-rows:auto}
  .scan-steps li > span{grid-row:auto;width:32px;height:32px}
  .scan-steps small{margin-left:3px}
  .card{padding:16px;border-radius:18px}
  .quick-actions,.cam-row{grid-template-columns:1fr}
  .actions{align-items:stretch;flex-direction:column}
  .actions .btn{width:100%}
  .writing-assist-controls{grid-template-columns:1fr}
  .writing-assist-controls label,.writing-assist-controls select{grid-column:1}
  .writing-assist-controls .btn{width:100%}
  .score-line{align-items:flex-start;flex-direction:column;gap:4px}
  .score-line #score{text-align:left}
  .hero{padding:44px calc(18px + env(safe-area-inset-right)) 44px calc(18px + env(safe-area-inset-left))}
  .hint,.field-note,.result-disclaimer,.pw-plan-blurb,.pw-legal,footer{font-size:15px}
}

/* narrow phones: Guide and Blog fold into the footer, and the remaining links
   wrap into balanced rows inside the glass capsule instead of clipping the
   billing pill behind a hidden horizontal scroll */
@media (max-width:540px){
  .nav .links a[href="/free-ai-image-checker"],.nav .links a[href="/blog"]{display:none}
  .nav .links{flex-wrap:wrap;justify-content:center;row-gap:2px;overflow-x:visible;white-space:normal}
}

@media (max-width:380px){
  .nav .links{font-size:14px}
  .detector-head h1{font-size:32px}
  .detector-head p.sub{font-size:18px}
  .tabs{gap:7px}
  .tab{padding-left:8px;padding-right:8px;font-size:15px}
}

@media (max-width:430px){
  .pw-plan{align-items:flex-start;flex-direction:column;gap:8px}
  .pw-plan-price{white-space:normal;text-align:left}
}

@media (orientation:landscape) and (max-height:500px){
  .section{padding-top:16px}
  .detector-head{margin-bottom:14px}
  .detector-head .eyebrow{margin-bottom:6px}
  .detector-head h1{font-size:34px;margin:.1em 0 .2em}
  .detector-head p.sub{font-size:17px;margin-bottom:6px}
  .detector-head p.caveat{font-size:14px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
/* ---- explicit, optional analytics choice ---------------------------------
   The dialog is shared by web and native. Insets keep it clear of the Dynamic
   Island, Android cutouts, and the home indicator without adding persistent UI
   over the checker. Both decisions receive identical visual weight. */
.footer-link-button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border: 0;
  padding: 0 3px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
html.analytics-open body { overflow: hidden; }
.analytics-choice-overlay[hidden] { display: none !important; }
.analytics-choice-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  overflow-y: auto;
  padding: calc(18px + env(safe-area-inset-top))
    calc(18px + env(safe-area-inset-right))
    calc(18px + env(safe-area-inset-bottom))
    calc(18px + env(safe-area-inset-left));
  background: rgba(8, 32, 52, .58);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.analytics-choice-card {
  position: relative;
  width: min(100%, 620px);
  max-height: calc(100dvh - 36px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 28px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(9, 44, 70, .24);
  color: var(--text);
}
.analytics-choice-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface, #fff);
  color: var(--text);
  font-size: 18px;
  cursor: pointer;
}
.analytics-choice-badge {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  margin: 0 52px 10px 0;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--accent-dim);
  color: var(--accent);
  font-size: 14px;
  font-weight: 800;
}
.analytics-choice-card h2 {
  margin: 0 0 12px;
  font-size: clamp(24px, 5vw, 32px);
  line-height: 1.12;
}
.analytics-choice-card p {
  font-size: 16px;
  line-height: 1.58;
}
.analytics-choice-status {
  margin: 16px 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--accent-dim);
  color: var(--text);
  font-weight: 700;
}
.analytics-choice-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.analytics-choice-button {
  min-height: 50px;
  border: 2px solid var(--accent);
  border-radius: 14px;
  padding: 11px 14px;
  background: #fff;
  color: var(--accent);
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
}
.analytics-choice-button[aria-pressed="true"] {
  background: var(--accent-dim);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.analytics-choice-button:disabled {
  border-color: var(--muted-dim);
  color: var(--muted-dim);
  cursor: not-allowed;
}
.analytics-choice-note {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 14px !important;
}
@media (max-width: 430px) {
  .analytics-choice-card { padding: 24px 18px; border-radius: 20px; }
  .analytics-choice-actions { grid-template-columns: 1fr; }
}

/* ---- analytics dialog auto-dismiss fade (analytics.js drives the class) ---- */
.analytics-choice-overlay{transition:opacity .45s ease}
.analytics-choice-overlay.analytics-fading{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){
  .analytics-choice-overlay{transition:none}
}

/* ---- wide-desktop layout: use the side space, cut the scroll ------------
   At >=1100px the checker page becomes a two-column spread: the intro, how-it-
   works, and FAQ sit in the left rail beside the tall checker card, instead of
   stacking above and below it. Pricing spans the full width underneath. Mobile
   and native layouts are untouched. */
/* between phone and the two-column spread, let the single column breathe wider */
@media (min-width:700px) and (max-width:1019px){
  html:not(.is-native) .detector-page .card,
  html:not(.is-native) .detector-page .how,
  html:not(.is-native) .detector-page .faq,
  html:not(.is-native) .detector-page .pricing{max-width:760px}
  html:not(.is-native) .detector-page .detector-head{max-width:760px}
}
@media (min-width:1020px){
  html:not(.is-native) .detector-page{
    max-width:1280px;margin:0 auto;width:100%;
    display:grid;grid-template-columns:minmax(360px,440px) minmax(0,1fr);
    column-gap:56px;row-gap:0;align-items:start;
    /* pricing sits in the right column directly under the checker card, with
       the FAQ running parallel in the left rail — both reachable with barely
       any scroll instead of stacked at the far bottom of the page */
    grid-template-areas:"head card" "how card" "faq card" "faq pricing";
  }
  html:not(.is-native) .detector-page .detector-head{grid-area:head;text-align:left;margin:0 0 6px;max-width:none}
  html:not(.is-native) .detector-page .detector-head h1{font-size:clamp(36px,3.4vw,50px)}
  html:not(.is-native) .detector-page .detector-head p.caveat{margin-left:0;margin-right:0}
  html:not(.is-native) .detector-page #detector-card{grid-area:card;max-width:none;margin:0}
  html:not(.is-native) .detector-page .how{grid-area:how;margin:26px 0 0;max-width:none}
  html:not(.is-native) .detector-page .faq{grid-area:faq;margin:26px 0 0;max-width:none}
  html:not(.is-native) .detector-page .pricing{grid-area:pricing;margin:26px 0 0;width:100%;max-width:none}
}

/* ---- account sign-in (Supabase; web only — native builds hide this) ------- */
.nav .links a.nav-account{font-weight:750;color:var(--accent)}
.nav .links a.nav-account:hover{color:var(--accent-hover)}
html.account-open body{overflow:hidden}
.account-overlay[hidden]{display:none !important}
.account-overlay{position:fixed;inset:0;z-index:9990;display:grid;place-items:center;overflow-y:auto;
  padding:calc(18px + env(safe-area-inset-top)) calc(18px + env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) calc(18px + env(safe-area-inset-left));
  background:rgba(8,32,52,.58);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.account-card{position:relative;width:min(100%,440px);max-height:calc(100dvh - 36px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow-y:auto;border:1px solid var(--border);border-radius:22px;padding:26px;background:#fff;
  box-shadow:0 24px 70px rgba(9,44,70,.24);color:var(--text)}
.account-card h2{margin:0 0 6px;padding-right:56px;font-size:22px}
.account-sub{margin:0 0 16px;color:var(--muted);font-size:15px}
.account-close{position:absolute;top:12px;right:12px;width:44px;height:44px;border:1px solid var(--border);border-radius:12px;background:var(--card);cursor:pointer;font-size:15px}
.account-close:hover{background:var(--bg-soft)}
.account-provider{width:100%;margin:0 0 10px;justify-content:center}
.account-divider{display:flex;align-items:center;gap:10px;margin:14px 0;color:var(--muted-dim);font-size:13.5px}
.account-divider::before,.account-divider::after{content:"";flex:1;height:1px;background:var(--border-soft)}
.account-card input{width:100%;min-height:48px;background:#fbfdff;border:1px solid var(--border);border-radius:12px;padding:11px 13px;font:inherit;margin-bottom:10px}
.account-card input:focus{border-color:var(--accent)}
.account-mainbtn{width:100%}
#account-code-step{margin-top:12px}
.account-status{margin:10px 0 0;min-height:1.2em}
.account-identity{margin:0 0 6px;font-weight:800;font-size:17px;word-break:break-all}
#account-signedin .btn{margin-top:12px}