/* ==========================================================================
   PDF Scanner — marketing site
   --------------------------------------------------------------------------
   The :root block below is copied VERBATIM from the project design-token SSOT
   (docs/design-token/design-tokens.md, transcribed in docs/mockups/components.css).
   Do not edit values here — change the SSOT and re-copy.

   Everything below :root must use var(--*). No hardcoded colours.
   The .ps-* component classes from components.css are phone-mockup specific and
   are deliberately NOT reused; marketing components are prefixed .mk-*.

   Versioned by FILENAME (site-v1.css) because production serves public/ with a
   one-year cache-control and this app has no digest pipeline. Bump to -v2 on
   any change, and update the <link> in layouts/marketing.html.erb.
   ========================================================================== */

:root{
  /* ── brand (anchor · iOS blue) ── */
  --brand:#2563EB; --brand-press:#1D4ED8; --brand-weak:#E7EFFE; --brand-faint:#F3F7FF; --on-brand:#FFFFFF;
  /* ── neutral ── */
  --bg:#FFFFFF; --surface:#F5F6F8; --surface-2:#ECEEF2;
  --text:#111418; --text-2:#5B6472; --muted:#8A93A0; --border:#E4E7EC; --divider:#EEF0F3;
  /* ── semantic state (success/warning/error) ── */
  --success:#16A34A; --success-bg:#F0FDF4;
  --warning:#D97706; --warning-bg:#FFFBEB;
  --error:#DC2626;   --error-bg:#FEF2F2;
  /* ── gate (locked / premium) ── */
  --lock-tint:rgba(236,238,242,.55); --lock-blur:blur(5px); --lock-fg:var(--brand); --lock-bg:var(--brand-weak);
  /* ── camera chrome (dark · scan viewfinder only) ── */
  --cam-bg:#0B0D10; --cam-chrome:#16191E; --cam-fg:#FFFFFF; --cam-fg-2:#A7AEB8; --cam-edge:#2563EB; --cam-shutter:#FFFFFF;
  /* ── type ── */
  --font-sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,system-ui,sans-serif;
  --font-num:"SF Pro Rounded",ui-rounded,-apple-system,system-ui,sans-serif;
  /* ── spacing / radius / shadow ── */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;
  --r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:24px;--r-full:999px;
  --sh-card:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06);
  --sh-raised:0 4px 16px rgba(16,24,40,.08);
  --sh-fab:0 6px 16px rgba(37,99,235,.28);
  --sh-tabbar:0 -0.5px 0 var(--border);
}

/* marketing-only scale — derived, not new brand values */
:root{
  --mk-maxw:1080px;
  --mk-sp-10:48px; --mk-sp-12:64px; --mk-sp-16:96px;
}

/* ── reset ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-sans);
  font-size:17px; line-height:1.65;
  color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0; letter-spacing:-.02em; line-height:1.2}
p{margin:0}
ul,ol,dl,dd{margin:0; padding:0}
li{list-style:none}

.mk-wrap{max-width:var(--mk-maxw); margin:0 auto; padding-inline:var(--sp-5)}
.mk-section{padding-block:var(--mk-sp-12)}
.mk-h1{font-size:clamp(30px,5vw,44px); font-weight:800; margin-bottom:var(--sp-5)}
.mk-h2{font-size:clamp(22px,3vw,28px); font-weight:800; margin-bottom:var(--sp-5)}
.mk-h3{font-size:18px; font-weight:700; margin-bottom:var(--sp-3)}

.mk-skip{position:absolute; left:-9999px}
.mk-skip:focus{left:var(--sp-4); top:var(--sp-4); z-index:10; background:var(--bg);
  padding:var(--sp-3) var(--sp-4); border-radius:var(--r-md); box-shadow:var(--sh-raised)}

/* ── buttons ───────────────────────────────────────────────────────────── */
.mk-btn{
  display:inline-block; font-weight:600; font-size:15px; cursor:pointer;
  padding:var(--sp-3) var(--sp-5); border-radius:var(--r-full);
  background:var(--brand); color:var(--on-brand); border:1px solid var(--brand);
  box-shadow:var(--sh-fab); transition:background .15s ease, transform .15s ease;
}
.mk-btn:hover{background:var(--brand-press); border-color:var(--brand-press); text-decoration:none}
.mk-btn:active{transform:translateY(1px)}
.mk-btn[disabled]{opacity:.55; cursor:default; box-shadow:none}
.mk-btn--lg{font-size:17px; padding:var(--sp-4) var(--sp-6)}
.mk-btn--sm{font-size:14px; padding:var(--sp-2) var(--sp-4); box-shadow:none}
.mk-btn--ghost{background:transparent; color:var(--brand); border-color:var(--border); box-shadow:none}
.mk-btn--ghost:hover{background:var(--brand-faint); border-color:var(--brand-weak)}

/* ── nav ───────────────────────────────────────────────────────────────── */
.mk-nav{position:sticky; top:0; z-index:5; background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--divider)}
.mk-nav__inner{display:flex; align-items:center; gap:var(--sp-6); height:60px}
.mk-nav__brand{display:flex; align-items:center; gap:var(--sp-2);
  font-weight:800; color:var(--text); font-size:16px; letter-spacing:-.01em}
.mk-nav__brand:hover{text-decoration:none}
.mk-nav__mark{display:inline-grid; place-items:center; width:30px; height:30px;
  border-radius:var(--r-sm); background:var(--brand); color:var(--on-brand);
  font-size:10px; font-weight:800; letter-spacing:0}
.mk-nav__links{display:flex; gap:var(--sp-5); margin-left:auto; font-size:15px}
.mk-nav__links a{color:var(--text-2); font-weight:500}
.mk-nav__links a:hover{color:var(--text); text-decoration:none}

/* ── hero ──────────────────────────────────────────────────────────────── */
.mk-hero{background:linear-gradient(180deg,var(--brand-faint) 0%,var(--bg) 78%);
  padding-block:var(--mk-sp-16) var(--mk-sp-12); border-bottom:1px solid var(--divider)}
.mk-hero__inner{display:grid; grid-template-columns:1.15fr .85fr; gap:var(--mk-sp-10); align-items:center}
.mk-hero__title{font-size:clamp(34px,5.4vw,54px); font-weight:800; margin-bottom:var(--sp-5)}
.mk-hero__lede{font-size:19px; color:var(--text-2); max-width:52ch; margin-bottom:var(--sp-6)}
.mk-hero__actions{display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-bottom:var(--sp-6)}
.mk-hero__proof{display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-5); font-size:14px; color:var(--text-2)}
.mk-hero__proof li{position:relative; padding-left:var(--sp-5)}
.mk-hero__proof li::before{content:""; position:absolute; left:0; top:.55em;
  width:8px; height:8px; border-radius:var(--r-full); background:var(--success)}
.mk-hero__shot{display:flex; justify-content:center}
/* Screenshots hidden (Site::Settings.screenshots_enabled? == false): collapse the
   hero to one column and cap the measure so the copy does not run to 100ch. */
.mk-hero__inner--nomedia{grid-template-columns:1fr; max-width:760px; margin-inline:auto; text-align:center}
.mk-hero__inner--nomedia .mk-hero__lede{margin-inline:auto}
.mk-hero__inner--nomedia .mk-hero__actions,
.mk-hero__inner--nomedia .mk-hero__proof{justify-content:center}

/* ── phone frame (marketing-only; not the .ps-phone mockup component) ──── */
.mk-phone{border-radius:var(--r-xl); padding:var(--sp-2); background:var(--cam-chrome);
  box-shadow:var(--sh-raised); width:max-content}
.mk-phone img{border-radius:var(--r-lg); display:block; width:320px; height:auto}
.mk-phone--sm img{width:260px}

/* ── generic sections ──────────────────────────────────────────────────── */
.mk-section__lede{color:var(--text-2); max-width:62ch; margin-bottom:var(--sp-6)}
.mk-grid{display:grid; gap:var(--sp-6)}
.mk-grid--3{grid-template-columns:repeat(3,1fr)}
.mk-card{background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:var(--sp-6); box-shadow:var(--sh-card)}
.mk-card__shot{width:100%; max-width:200px; margin:0 auto var(--sp-5);
  border-radius:var(--r-md); box-shadow:var(--sh-card)}
.mk-card__title{font-size:17px; font-weight:700; margin-bottom:var(--sp-2)}
.mk-card__body{font-size:15px; color:var(--text-2)}

.mk-linklist{display:grid; gap:var(--sp-2)}
.mk-linklist li{padding-block:var(--sp-1)}
.mk-linklist a{font-weight:500}
.mk-more{font-weight:600; display:inline-block; margin-top:var(--sp-4)}

/* ── article pages ─────────────────────────────────────────────────────── */
.mk-article{max-width:760px; padding-block:var(--mk-sp-10)}
.mk-crumbs{font-size:14px; color:var(--muted); margin-bottom:var(--sp-5)}
.mk-crumbs a{color:var(--text-2)}
.mk-crumbs span{margin-inline:var(--sp-2)}

/* the answer-first paragraph — visually the lead, because it is the lead */
.mk-answer{font-size:19px; line-height:1.6; color:var(--text);
  padding:var(--sp-5); background:var(--brand-faint);
  border-left:3px solid var(--brand); border-radius:0 var(--r-md) var(--r-md) 0;
  margin-bottom:var(--sp-8)}

.mk-tools{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); margin-bottom:var(--sp-8)}
.mk-tools__label{font-size:14px; color:var(--muted)}
.mk-chip{display:inline-block; font-size:13px; font-weight:500;
  padding:var(--sp-1) var(--sp-3); border-radius:var(--r-full);
  background:var(--brand-weak); color:var(--brand-press)}

.mk-figure{margin:0 0 var(--sp-8); display:flex; justify-content:center}

.mk-steps{margin-bottom:var(--mk-sp-10)}
.mk-steps__list{counter-reset:step; display:grid; gap:var(--sp-6)}
.mk-steps__item{counter-increment:step; position:relative; padding-left:var(--mk-sp-10)}
.mk-steps__item::before{content:counter(step); position:absolute; left:0; top:0;
  width:32px; height:32px; display:grid; place-items:center;
  border-radius:var(--r-full); background:var(--brand); color:var(--on-brand);
  font-family:var(--font-num); font-weight:700; font-size:15px}
.mk-steps__name{font-size:17px; font-weight:700; margin-bottom:var(--sp-2)}
.mk-steps__text{color:var(--text-2)}

.mk-facts{margin-bottom:var(--mk-sp-10)}
.mk-facts__list{display:grid; gap:var(--sp-3)}
.mk-facts__list li{position:relative; padding-left:var(--sp-8); color:var(--text-2)}
.mk-facts__list li::before{content:""; position:absolute; left:var(--sp-2); top:.6em;
  width:10px; height:10px; border-radius:var(--r-full);
  background:var(--success-bg); border:2px solid var(--success)}

.mk-faq{margin-bottom:var(--mk-sp-10)}
.mk-faq__list{display:grid; gap:var(--sp-5)}
.mk-faq__item{padding-bottom:var(--sp-5); border-bottom:1px solid var(--divider)}
.mk-faq__q{font-weight:700; margin-bottom:var(--sp-2)}
.mk-faq__a{color:var(--text-2); margin:0}

.mk-compare{margin-bottom:var(--mk-sp-10)}
.mk-compare__note{font-size:14px; color:var(--muted); margin-bottom:var(--sp-5)}
.mk-compare__list{display:grid; gap:var(--sp-4)}
.mk-compare__row{padding:var(--sp-5); background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-md)}
.mk-compare__name{font-weight:700; margin-bottom:var(--sp-1)}
.mk-compare__note-text{color:var(--text-2); margin:0}

.mk-related{margin-bottom:var(--sp-8)}
.mk-updated{font-size:14px; color:var(--muted)}

.mk-index{display:grid; gap:var(--sp-6)}
.mk-index__item{padding-bottom:var(--sp-6); border-bottom:1px solid var(--divider)}
.mk-index__link{font-size:19px; font-weight:700}
.mk-index__blurb{color:var(--text-2); font-size:15px; margin-top:var(--sp-2)}

/* ── install CTA (terminus block on every page) ────────────────────────── */
.mk-cta{background:var(--surface); border-top:1px solid var(--border); padding-block:var(--mk-sp-12)}
.mk-cta__inner{display:grid; grid-template-columns:1fr auto; gap:var(--mk-sp-10); align-items:center}
.mk-cta__title{font-size:clamp(22px,3vw,30px); font-weight:800; margin-bottom:var(--sp-4)}
.mk-cta__body{color:var(--text-2); max-width:58ch; margin-bottom:var(--sp-6)}
.mk-cta__actions{margin-bottom:var(--sp-3)}
.mk-cta__meta{font-size:14px; color:var(--muted)}
.mk-cta__qr{text-align:center; background:var(--bg); padding:var(--sp-5);
  border-radius:var(--r-lg); border:1px solid var(--border); box-shadow:var(--sh-card)}
.mk-cta__qr svg{display:block; margin:0 auto}
.mk-cta__qr-label{font-size:13px; color:var(--muted); margin-top:var(--sp-3)}

/* ── install / 404 page ────────────────────────────────────────────────── */
.mk-install{max-width:640px; padding-block:var(--mk-sp-12); text-align:center}
.mk-install .mk-answer{text-align:left}
.mk-install__qr{display:inline-block; padding:var(--sp-6); background:var(--bg);
  border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--sh-card);
  margin-bottom:var(--sp-8)}
.mk-install__qr svg{display:block; margin:0 auto}
.mk-install__label{font-size:14px; color:var(--muted); margin-top:var(--sp-4)}
.mk-install__facts{text-align:left; margin-bottom:var(--sp-8)}

/* ── /create card maker ────────────────────────────────────────────────── */
.mk-maker{display:grid; grid-template-columns:1fr 420px; gap:var(--mk-sp-10);
  align-items:start; padding-bottom:var(--mk-sp-12)}
.mk-field{border:0; padding:0; margin:0 0 var(--sp-6)}
.mk-field__legend{font-size:13px; font-weight:600; color:var(--muted);
  text-transform:uppercase; letter-spacing:.04em; padding:0; margin-bottom:var(--sp-3)}
.mk-field__options{display:flex; flex-wrap:wrap; gap:var(--sp-2)}
.mk-opt{font:inherit; font-size:14px; font-weight:500; cursor:pointer;
  padding:var(--sp-2) var(--sp-4); border-radius:var(--r-full);
  background:var(--bg); color:var(--text-2); border:1px solid var(--border)}
.mk-opt:hover{border-color:var(--brand-weak); background:var(--brand-faint)}
.mk-opt.is-active{background:var(--brand-weak); border-color:var(--brand);
  color:var(--brand-press); font-weight:600}
.mk-opt--swatch{display:inline-flex; align-items:center; gap:var(--sp-2)}
.mk-opt__dot{width:14px; height:14px; border-radius:var(--r-full);
  background:var(--swatch); border:1px solid var(--border)}
.mk-maker__actions{margin-bottom:var(--sp-3)}
.mk-maker__note{font-size:13px; color:var(--muted); margin-bottom:var(--sp-8)}
.mk-maker__links{border-top:1px solid var(--divider); padding-top:var(--sp-6)}

.mk-cardframe{width:420px; height:525px; overflow:hidden; border-radius:var(--r-lg);
  box-shadow:var(--sh-raised)}

/* The card is authored at true export size and scaled down for display; the
   export path resets this transform so html2canvas captures 1080x1350. */
.mk-card-art{
  width:1080px; height:1350px; padding:96px 88px;
  display:flex; flex-direction:column;
  transform:scale(.38888); transform-origin:top left;
  font-family:var(--font-sans);
}
.mk-card-art__kicker{font-size:30px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; opacity:.72}
.mk-card-art__title{font-size:88px; font-weight:800; line-height:1.05;
  letter-spacing:-.02em; margin:28px 0 20px}
.mk-card-art__blurb{font-size:34px; line-height:1.4; opacity:.78; max-width:22ch}
.mk-card-art__items{flex:1; display:flex; flex-direction:column;
  justify-content:center; gap:34px; margin-block:56px}
.mk-card-art__items li{display:flex; align-items:center; gap:28px;
  font-size:40px; font-weight:600; line-height:1.25}
.mk-card-art__box{flex:none; width:40px; height:40px; border-radius:10px;
  border:4px solid currentColor; opacity:.55}
.mk-card-art__foot{display:flex; align-items:center; gap:36px;
  border-top:3px solid currentColor; padding-top:44px}
.mk-card-art__qr{flex:none; background:#FFFFFF; padding:18px; border-radius:18px}
.mk-card-art__qr svg{display:block}
.mk-card-art__brand{display:flex; flex-direction:column; gap:8px}
.mk-card-art__brand strong{font-size:44px; font-weight:800; letter-spacing:-.01em}
.mk-card-art__brand span{font-size:28px; opacity:.78; line-height:1.35}
.mk-card-art__host{font-weight:600; opacity:.6 !important}

/* ── footer ────────────────────────────────────────────────────────────── */
.mk-footer{border-top:1px solid var(--border); padding-block:var(--mk-sp-10);
  background:var(--bg); color:var(--text-2); font-size:15px}
.mk-footer__tagline{font-weight:600; color:var(--text); margin-bottom:var(--sp-5)}
.mk-footer__links{display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-6);
  margin-bottom:var(--sp-5)}
.mk-footer__links a{color:var(--text-2)}
.mk-footer__legal{font-size:13px; color:var(--muted); max-width:60ch}

/* ── legal pages ───────────────────────────────────────────────────────── */
.mk-legal{max-width:720px; padding-block:var(--mk-sp-10)}
.mk-legal h2{font-size:19px; font-weight:700; margin:var(--sp-8) 0 var(--sp-3)}
.mk-legal p{color:var(--text-2)}
.mk-legal__updated{font-size:14px; color:var(--muted); margin-bottom:var(--sp-8)}

/* ── responsive ────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .mk-hero__inner{grid-template-columns:1fr; gap:var(--sp-8)}
  .mk-hero__shot{order:-1}
  .mk-grid--3{grid-template-columns:1fr}
  .mk-cta__inner{grid-template-columns:1fr}
  .mk-maker{grid-template-columns:1fr}
  .mk-nav__links{display:none}
}
@media (max-width:480px){
  body{font-size:16px}
  .mk-cardframe{width:100%; height:auto; aspect-ratio:1080/1350}
  .mk-card-art{transform:scale(.3); }
  .mk-answer{font-size:17px; padding:var(--sp-4)}
}

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