/* SnapUp Studio — website stylesheet (ONE file for every public page, sign-up / sign-in pages and the selfie demo).
   Sections: 1 tokens + site  2 selfie demo  3 account pages  4 logo  5 responsive */

/* ============== 1 · TOKENS + SITE ============== */
/* ============ TOKENS ============
   Light = LIGHTBOX (5500K viewing panel). Dark = DARKROOM (safelight).
   Signal vermilion = the grease pencil a photographer marks selects with. */
:root{
  --ground:#E6EBEC; --sheet:#D8E0E1; --panel:#FAFCFC; --panel-2:#F1F5F6;
  --ink:#0E1518; --ink-2:#3B484D; --muted:#6B797E;
  --line:#C4CFD1; --line-soft:#D8E0E2;
  --signal:#E50914; --signal-2:#e6010c; --on-signal:#FFF7F3;
  --cyan:#0C7A8A;
  --invert-bg:#101719; --invert-ink:#EDF2F3; --invert-line:#2C3A3E;
  --grain:.055;
  --shadow:0 1px 0 rgba(14,21,24,.06), 0 18px 40px -28px rgba(14,21,24,.45);
  --f-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-body:"Newsreader",Georgia,"Times New Roman",serif;
  --f-mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0B0F11; --sheet:#080B0C; --panel:#141A1D; --panel-2:#1B2326;
    --ink:#E8EEEF; --ink-2:#B2C0C4; --muted:#7C8B90;
    --line:#283236; --line-soft:#1E2629;
    --signal:#E50914; --signal-2:#e6010c; --on-signal:#FFF7F3;
    --cyan:#3FC4D6;
    --invert-bg:#F7FAFA; --invert-ink:#0E1518; --invert-line:#D3DCDE;
    --grain:.085;
    --shadow:0 1px 0 rgba(0,0,0,.5), 0 18px 44px -28px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  --ground:#0B0F11; --sheet:#080B0C; --panel:#141A1D; --panel-2:#1B2326;
  --ink:#E8EEEF; --ink-2:#B2C0C4; --muted:#7C8B90;
  --line:#283236; --line-soft:#1E2629;
  --signal:#E50914; --signal-2:#e6010c; --on-signal:#FFF7F3;
  --cyan:#3FC4D6;
  --invert-bg:#F7FAFA; --invert-ink:#0E1518; --invert-line:#D3DCDE;
  --grain:.085;
  --shadow:0 1px 0 rgba(0,0,0,.5), 0 18px 44px -28px rgba(0,0,0,.9);
}

*{box-sizing:border-box}
body{background:var(--ground);color:var(--ink);font-family:var(--f-body);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:200;opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}

/* ============ SHELL ============ */
.wrap{width:100%;max-width:1180px;margin-inline:auto;padding-inline:clamp(16px,4vw,44px)}
.band{padding-block:clamp(52px,7.5vw,100px);border-top:1px solid var(--line-soft)}
.band.first{border-top:0}
.rail{position:fixed;left:0;top:0;bottom:0;width:52px;z-index:60;display:none;
  border-right:1px solid var(--line-soft);background:var(--sheet)}
.rail .sprocket{position:absolute;inset:0;opacity:.75;
  background-image:repeating-linear-gradient(to bottom,transparent 0 14px,var(--line-soft) 14px 15px,transparent 15px 42px)}
.rail .rail-mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(180deg);
  writing-mode:vertical-rl;font-family:var(--f-mono);font-size:10px;letter-spacing:.34em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap}
.rail .rail-code{position:absolute;left:0;right:0;bottom:14px;text-align:center;
  font-family:var(--f-mono);font-size:10px;color:var(--signal);letter-spacing:.08em}
.rail .rail-top{position:absolute;left:0;right:0;top:14px;text-align:center;
  font-family:var(--f-mono);font-size:10px;color:var(--muted)}
@media (min-width:1160px){.rail{display:block} body{padding-left:52px}}

/* ============ NAV ============ */
header.top{position:sticky;top:0;z-index:80;border-bottom:1px solid var(--line-soft);
  background:color-mix(in srgb,var(--ground) 88%,transparent);backdrop-filter:blur(10px)}
.topinner{display:flex;align-items:center;gap:18px;min-height:64px}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;flex:0 0 auto}
.brand .wm{font-family:var(--f-display);font-variation-settings:'wdth' 112;font-weight:800;
  font-size:17px;letter-spacing:-.012em;text-transform:uppercase;line-height:1}
.brand .wm i{font-style:normal;font-weight:500;color:var(--muted);letter-spacing:.02em}
nav.main{display:none;gap:2px;margin-left:auto;align-items:center}
nav.main a{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;
  text-decoration:none;color:var(--muted);padding:8px 12px;border-radius:2px}
nav.main a:hover{color:var(--ink)}
nav.main a[aria-current="page"]{color:var(--ink);background:var(--panel-2)}
.topactions{display:flex;align-items:center;gap:8px;margin-left:auto}
nav.main + .topactions{margin-left:14px}
.lamp{appearance:none;border:1px solid var(--line);background:var(--panel);color:var(--muted);
  font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  padding:7px 10px;border-radius:2px;cursor:pointer;display:flex;align-items:center;gap:7px}
.lamp:hover{color:var(--ink);border-color:var(--ink-2)}
.lamp .bulb{width:7px;height:7px;border-radius:50%;background:var(--signal);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--signal) 22%,transparent)}
.menu-btn{display:flex;appearance:none;background:var(--panel);border:1px solid var(--line);
  border-radius:2px;padding:8px 11px;cursor:pointer;color:var(--ink);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.topactions > .btn.sm{display:none}
@media (min-width:900px){nav.main{display:flex} .menu-btn{display:none} .topactions > .btn.sm{display:inline-flex}}
.drawer{border-top:1px solid var(--line-soft);background:var(--panel);padding-block:8px}
.drawer a{display:block;padding:11px 0;text-decoration:none;font-family:var(--f-mono);
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);
  border-bottom:1px solid var(--line-soft)}
.drawer a:last-child{border-bottom:0}

/* ============ TYPE ============ */
.eyebrow{font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cyan);display:flex;align-items:center;gap:8px;margin:0 0 18px}
.eyebrow::before{content:"";width:16px;height:1px;background:currentColor;flex:0 0 auto}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:800;margin:0;text-wrap:balance;letter-spacing:-.022em}
.h1{font-variation-settings:'wdth' 116;font-size:clamp(32px,4.2vw,54px);line-height:1.0}
.h2{font-variation-settings:'wdth' 112;font-size:clamp(27px,3.7vw,45px);line-height:1.03}
.h3{font-variation-settings:'wdth' 106;font-size:clamp(20px,2.4vw,26px);line-height:1.15;font-weight:700}
.h4{font-variation-settings:'wdth' 100;font-size:16px;line-height:1.25;font-weight:700;letter-spacing:-.006em}
.lede{font-size:clamp(17px,1.9vw,21px);line-height:1.55;color:var(--ink-2);max-width:60ch;margin:20px 0 0}
p{margin:14px 0 0;max-width:64ch}
.small{font-size:15px;color:var(--ink-2)}
.mono{font-family:var(--f-mono);font-size:12px;letter-spacing:.04em;color:var(--muted)}
.tag{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.hr{height:1px;background:var(--line-soft);margin:34px 0}

/* ============ BUTTONS ============ */
.btn{display:inline-flex;align-items:center;gap:9px;text-decoration:none;cursor:pointer;
  font-family:var(--f-mono);font-size:12px;letter-spacing:.11em;text-transform:uppercase;
  padding:13px 20px;border-radius:2px;border:1px solid var(--signal);
  background:var(--signal);color:var(--on-signal);transition:background .15s,border-color .15s,transform .15s}
.btn:hover{background:var(--signal-2);border-color:var(--signal-2)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--ink);background:var(--panel)}
.btn.sm{padding:10px 15px;font-size:11px}
.btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.textlink{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;border-bottom:1px solid var(--signal);padding-bottom:2px}
.textlink:hover{color:var(--signal)}

/* ============ HERO ============ */
.hero{display:grid;gap:clamp(32px,5vw,52px);grid-template-columns:1fr;align-items:center}
@media (min-width:1000px){.hero{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr)}}
.hero-kicker{display:flex;flex-wrap:wrap;gap:10px 16px;margin-top:26px}
.hero-kicker span{font-family:var(--f-mono);font-size:11px;letter-spacing:.07em;color:var(--muted);
  display:flex;align-items:center;gap:7px}
.hero-kicker span::before{content:"";width:5px;height:5px;background:var(--cyan)}

/* ============ CONTACT SHEET ============ */
.sheet{background:var(--sheet);border:1px solid var(--line);border-radius:2px;
  padding:clamp(12px,2vw,18px);box-shadow:var(--shadow)}
.sheet-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-bottom:13px}
.sheet-head .t{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2)}
.readout{font-family:var(--f-mono);font-size:11px;color:var(--muted);
  font-variant-numeric:tabular-nums;display:flex;gap:12px;flex-wrap:wrap}
.readout b{color:var(--signal);font-weight:500}
.guests{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:13px}
.guest{appearance:none;cursor:pointer;display:flex;align-items:center;gap:8px;
  background:var(--panel);border:1px solid var(--line);border-radius:2px;padding:5px 12px 5px 5px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.05em;color:var(--ink-2);transition:.15s}
.guest:hover{border-color:var(--ink-2)}
.guest[aria-pressed="true"]{border-color:var(--signal);color:var(--ink);box-shadow:inset 0 0 0 1px var(--signal)}
.guest img{width:24px;height:24px;border-radius:1px;object-fit:cover;flex:0 0 auto}
.grid-frames{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}
@media (max-width:620px){.grid-frames{grid-template-columns:repeat(5,1fr)}}
.frame{position:relative;aspect-ratio:3/2;transition:filter .35s ease,opacity .35s ease}
.frame img{width:100%;height:100%;object-fit:cover;border-radius:1px}
.frame.miss{filter:grayscale(.72) contrast(.92) brightness(.88);opacity:.66}
.frame .ring{position:absolute;inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px);
  pointer-events:none;opacity:0}
.frame.hit .ring{opacity:1}
.frame.hit .ring ellipse{stroke:var(--signal);stroke-width:3.4;fill:none;stroke-linecap:round;
  stroke-dasharray:240;stroke-dashoffset:240;animation:scribe .5s ease forwards}
@keyframes scribe{to{stroke-dashoffset:0}}
.sheet-foot{display:flex;justify-content:space-between;gap:12px;margin-top:12px;flex-wrap:wrap}
.sheet-foot .n{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}

/* ============ FILMSTRIP ============ */
.strip{overflow:hidden;border-block:1px solid var(--line);background:var(--sheet);padding-block:14px}
.strip-track{display:flex;gap:8px;width:max-content;animation:slide 64s linear infinite}
.strip:hover .strip-track{animation-play-state:paused}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.strip img{width:210px;height:140px;object-fit:cover;border-radius:1px;flex:0 0 auto}
.strip-cap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-block:12px 0}

/* ============ PLATE ============ */
.plate{position:relative;border-radius:2px;overflow:hidden;border:1px solid var(--line)}
.plate img{width:100%;height:clamp(240px,34vw,420px);object-fit:cover}
.plate .over{position:absolute;left:0;right:0;bottom:0;padding:clamp(18px,3vw,30px);
  background:linear-gradient(to top,rgba(8,11,12,.93),rgba(8,11,12,.62) 55%,rgba(8,11,12,.12));color:#F2F6F7}
.plate .over .h3{color:#fff}
.plate .over p{color:rgba(242,246,247,.82);margin-top:8px}
.plate .over .tag{color:rgba(242,246,247,.8)}

/* ============ SPLIT ============ */
.split{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);
  border-radius:2px;overflow:hidden}
@media (min-width:860px){.split{grid-template-columns:1fr 1fr}}
.split > div{background:var(--panel);padding:clamp(22px,3.2vw,38px)}
.split .dark{background:var(--invert-bg);color:var(--invert-ink)}
.split .dark .tag,.split .dark .mono{color:color-mix(in srgb,var(--invert-ink) 55%,transparent)}
.split .dark p{color:color-mix(in srgb,var(--invert-ink) 78%,transparent)}
.split ul{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:9px}
.split li{font-size:15.5px;line-height:1.45;padding-left:18px;position:relative}
.split li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:1px;background:var(--signal)}

/* ============ INDEX ============ */
.index{border-top:1px solid var(--line);margin-top:34px}
.index a{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:baseline;
  text-decoration:none;padding:18px 0;border-bottom:1px solid var(--line-soft);transition:padding-left .2s ease}
@media (min-width:760px){.index a{grid-template-columns:56px minmax(0,20ch) 1fr;gap:22px}}
.index a:hover{padding-left:8px}
.index a:hover .h4{color:var(--signal)}
.index .num{font-family:var(--f-mono);font-size:11px;color:var(--muted);letter-spacing:.06em}
.index .desc{grid-column:2;font-size:15px;color:var(--ink-2);margin:6px 0 0;max-width:56ch}
@media (min-width:760px){.index .desc{grid-column:3;margin:0}}

/* ============ SPEC TABLE ============ */
.spec{width:100%;border-collapse:collapse;font-family:var(--f-mono);font-size:12.5px}
.spec th,.spec td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line-soft);vertical-align:top}
.spec th{font-weight:400;color:var(--muted);letter-spacing:.05em;width:46%}
.spec td{color:var(--ink);font-variant-numeric:tabular-nums}
.spec tr:first-child th,.spec tr:first-child td{border-top:1px solid var(--line)}
.scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ============ FEATURES ============ */
.feat{display:grid;gap:clamp(24px,3.4vw,44px);align-items:start}
@media (min-width:940px){.feat{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .feat.flip > .art{order:-1}}
.art{background:var(--panel);border:1px solid var(--line-soft);border-radius:2px;
  padding:clamp(16px,2.4vw,24px);display:flex;flex-direction:column;gap:14px;justify-content:center}
.art.plain{padding:0;border:0;background:none}
.steps{list-style:none;margin:24px 0 0;padding:0;display:grid;counter-reset:s}
.steps li{display:grid;grid-template-columns:26px 1fr;gap:14px;padding:15px 0;border-top:1px solid var(--line-soft)}
.steps li::before{counter-increment:s;content:counter(s,decimal-leading-zero);
  font-family:var(--f-mono);font-size:11px;color:var(--signal);padding-top:3px}
.steps b{grid-column:2;font-family:var(--f-display);font-variation-settings:'wdth' 100;
  font-weight:700;font-size:15.5px;display:block}
.steps span{grid-column:2;font-size:15px;color:var(--ink-2);display:block;margin-top:3px}
.queue{display:grid;gap:7px;font-family:var(--f-mono);font-size:11px}
.qrow{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
.qname{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qbar{height:4px;background:var(--panel-2);border-radius:2px;overflow:hidden;grid-column:1/-1}
.qbar i{display:block;height:100%;background:var(--cyan)}
.qbar i.done{background:var(--signal)}
.qmeta{color:var(--muted);font-variant-numeric:tabular-nums}
.qrbox{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.qrcode{width:104px;height:104px;flex:0 0 auto;background:#fff;padding:8px;border-radius:2px}
.qrcode svg{display:block;width:100%;height:100%}
.dns{font-family:var(--f-mono);font-size:11.5px;display:grid}
.dns div{display:grid;grid-template-columns:78px 1fr;gap:10px;padding:9px 0;border-top:1px solid var(--line-soft)}
.dns span:first-child{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-size:10px;padding-top:2px}
.dns span:last-child{color:var(--ink);word-break:break-all}
.photogrid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.photogrid img{aspect-ratio:3/2;object-fit:cover;width:100%;border-radius:1px}

/* ============ PRICING ============ */
.toggle{display:inline-flex;border:1px solid var(--line);border-radius:2px;overflow:hidden;margin-top:26px}
.toggle button{appearance:none;cursor:pointer;background:var(--panel);border:0;color:var(--muted);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;padding:11px 16px}
.toggle button[aria-pressed="true"]{background:var(--ink);color:var(--ground)}
.plans{display:grid;gap:14px;margin-top:34px}
@media (min-width:880px){.plans{grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);
  border-radius:2px;overflow:hidden} .plan + .plan{border-left:1px solid var(--line)}}
.plan{background:var(--panel);border:1px solid var(--line);border-radius:2px;
  padding:clamp(22px,2.8vw,30px);display:flex;flex-direction:column}
@media (min-width:880px){.plan{border:0;border-radius:0} .plan .who{min-height:56px}}
.plan.pick{background:var(--invert-bg);color:var(--invert-ink)}
.plan.pick .price-sub,.plan.pick .tag,.plan.pick li{color:color-mix(in srgb,var(--invert-ink) 74%,transparent)}
.plan.pick .btn.ghost{color:var(--invert-ink);border-color:var(--invert-line)}
.plan.pick .btn.ghost:hover{background:color-mix(in srgb,var(--invert-ink) 10%,transparent);border-color:var(--invert-ink)}
.plan .who{font-size:14.5px;color:var(--ink-2);margin:8px 0 0}
.plan.pick .who{color:color-mix(in srgb,var(--invert-ink) 72%,transparent)}
.price{font-family:var(--f-display);font-variation-settings:'wdth' 110;font-weight:800;
  font-size:clamp(34px,4vw,44px);line-height:1;margin:22px 0 0;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.price small{font-family:var(--f-mono);font-size:12px;font-weight:400;letter-spacing:.06em;color:var(--muted);margin-left:6px}
.plan.pick .price small{color:color-mix(in srgb,var(--invert-ink) 60%,transparent)}
.price-sub{font-family:var(--f-mono);font-size:11px;color:var(--muted);margin-top:8px;letter-spacing:.05em}
.plan ul{list-style:none;margin:22px 0 26px;padding:0;display:grid;gap:9px;font-size:15px;color:var(--ink-2)}
.plan li{padding-left:18px;position:relative;line-height:1.4}
.plan li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:1px;background:var(--signal)}
.plan .btn{margin-top:auto;justify-content:center}
.cmp{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
.cmp th,.cmp td{padding:12px 14px;border-bottom:1px solid var(--line-soft);text-align:left}
.cmp thead th{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);border-bottom:1px solid var(--line)}
.cmp tbody th{font-weight:400;color:var(--ink-2);font-family:var(--f-body)}
.cmp td{font-family:var(--f-mono);font-size:12px;color:var(--ink);font-variant-numeric:tabular-nums}
.cmp td.no{color:var(--muted)}

/* ============ FAQ ============ */
.faq{border-top:1px solid var(--line);margin-top:8px}
.faq details{border-bottom:1px solid var(--line-soft)}
.faq summary{cursor:pointer;list-style:none;padding:18px 0;display:flex;justify-content:space-between;gap:16px;
  font-family:var(--f-display);font-variation-settings:'wdth' 100;font-weight:700;font-size:16.5px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--f-mono);color:var(--signal);font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq p{margin:0 0 20px;font-size:15.5px;color:var(--ink-2)}

/* ============ PORTFOLIO MOCKS ============ */
.mocks{display:grid;gap:16px;margin-top:34px}
@media (min-width:820px){.mocks{grid-template-columns:repeat(3,1fr)}}
.mock{border:1px solid var(--line);border-radius:2px;background:var(--panel);overflow:hidden;
  display:flex;flex-direction:column}
.mock .chrome{display:flex;align-items:center;gap:7px;padding:9px 11px;
  border-bottom:1px solid var(--line-soft);background:var(--panel-2)}
.mock .dot{width:7px;height:7px;border-radius:50%;background:var(--line)}
.mock .url{font-family:var(--f-mono);font-size:10px;color:var(--muted);margin-left:5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mock .screen{padding:12px;display:grid;gap:8px;background:var(--sheet);align-content:start}
.mock .cap{padding:15px;border-top:1px solid var(--line-soft)}
.mock .cap p{font-size:14.5px;margin:7px 0 0}
.bar{height:8px;background:var(--line);border-radius:1px}
.bar.w40{width:40%} .bar.w60{width:60%} .bar.w28{width:28%} .bar.w70{width:70%}
.bar.ink{background:var(--ink);height:13px}
.bar.sig{background:var(--signal);height:8px;width:34%}
.tiles{display:grid;gap:4px}
.tiles.t3{grid-template-columns:repeat(3,1fr)}
.tiles.t2{grid-template-columns:repeat(2,1fr)}
.tiles img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:1px}
.tiles.wide img{aspect-ratio:16/9}

/* ============ ANATOMY / FLOW ============ */
.anatomy{display:grid;margin-top:30px;border-top:1px solid var(--line)}
.anatomy > div{display:grid;grid-template-columns:1fr;gap:4px;padding:17px 0;border-bottom:1px solid var(--line-soft)}
@media (min-width:760px){.anatomy > div{grid-template-columns:150px 1fr;gap:24px;align-items:baseline}}
.anatomy .k{font-family:var(--f-mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--cyan)}
.anatomy .v{font-size:15.5px;color:var(--ink-2);max-width:62ch}
.anatomy .v b{color:var(--ink);font-family:var(--f-display);font-variation-settings:'wdth' 100;font-weight:700}
.flow{display:grid;margin-top:32px;border-left:1px solid var(--line)}
.flow > div{position:relative;padding:0 0 24px 26px}
.flow > div::before{content:"";position:absolute;left:-4.5px;top:7px;width:8px;height:8px;
  background:var(--signal);border-radius:50%}
.flow .t{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.flow .h{font-family:var(--f-display);font-variation-settings:'wdth' 102;font-weight:700;font-size:17px;margin-top:5px}
.flow p{margin-top:5px;font-size:15.5px}

/* ============ CTA / NOTE / FOOTER ============ */
.cta{background:var(--invert-bg);color:var(--invert-ink);border-radius:2px;
  padding:clamp(30px,5vw,56px);display:grid;gap:26px;align-items:end}
@media (min-width:880px){.cta{grid-template-columns:1.25fr .75fr}}
.cta .h2{color:var(--invert-ink)}
.cta p{color:color-mix(in srgb,var(--invert-ink) 76%,transparent)}
.cta .btn.ghost{color:var(--invert-ink);border-color:var(--invert-line)}
.cta .btn.ghost:hover{background:color-mix(in srgb,var(--invert-ink) 10%,transparent);border-color:var(--invert-ink)}
.note{border:1px dashed var(--line);border-radius:2px;padding:18px 20px;background:var(--panel-2);
  font-family:var(--f-mono);font-size:12px;color:var(--muted);line-height:1.7}
.note b{color:var(--ink-2);font-weight:500}
.grid2{display:grid;gap:clamp(24px,3.4vw,44px)}
@media (min-width:900px){.grid2{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}
footer.site{border-top:1px solid var(--line);padding-block:46px 60px;background:var(--sheet)}
.foot{display:grid;gap:30px}
@media (min-width:760px){.foot{grid-template-columns:1.4fr repeat(3,1fr)}}
.foot h5{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:0 0 14px;font-weight:400}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot a{text-decoration:none;font-size:14.5px;color:var(--ink-2)}
.foot a:hover{color:var(--signal)}
.foot .blurb{font-size:14.5px;color:var(--ink-2);max-width:40ch;margin-top:14px}
.legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:40px;
  padding-top:18px;border-top:1px solid var(--line-soft);font-family:var(--f-mono);
  font-size:10.5px;letter-spacing:.07em;color:var(--muted);text-transform:uppercase}

/* ============ BRAND + NAV (Snap [UP logo] Studio, "Your branding" menu) ============ */
[hidden]:not([hidden=until-found i]){display:none!important}
.brand .wm{display:inline-flex;align-items:center}
.brand .uplogo{display:block;height:30px;width:auto;margin:0 3px 0 2px}
.brand .wm i{margin-left:6px;color:inherit}
.dd{position:relative}
.dd-btn{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);
  background:none;border:0;cursor:pointer;padding:8px 12px;border-radius:2px;display:inline-flex;align-items:center;gap:7px}
.dd-btn:hover,.dd-btn.cur{color:var(--ink)}
.dd-btn.cur{background:var(--panel-2)}
.dd-btn svg{transition:transform .15s}
.dd-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.dd-menu{position:absolute;top:calc(100% + 10px);right:0;min-width:260px;background:var(--panel);
  border:1px solid var(--line);border-radius:2px;box-shadow:var(--shadow);padding:6px;z-index:90}
nav.main .dd-menu a{display:block;padding:11px 12px;text-transform:none;letter-spacing:0;color:var(--ink-2)}
nav.main .dd-menu a:hover{background:var(--panel-2);color:var(--ink)}
.dd-menu a b{display:block;font-family:var(--f-display);font-size:14px;font-weight:700;color:var(--ink);margin-bottom:2px}
.dd-menu a span{display:block;font-family:var(--f-body);font-size:13px;line-height:1.4;color:var(--muted)}
.drawer .grp{padding:12px 0 2px;font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.drawer .sub{padding-left:14px}

/* ============ HERO: search-by-selfie demo (home) — desktop app window, 8 x 6 roll ============ */
@media (min-width:1000px){.hero.hero-wide{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)}.hero-wide .h1{font-size:clamp(30px,3.3vw,44px)}}
.sd{display:flex;flex-direction:column;align-items:stretch;min-width:0}
.sd .win{background:var(--panel);border:1px solid var(--line);border-radius:6px;overflow:hidden;box-shadow:var(--shadow)}
.sd .wbar{display:flex;align-items:center;gap:12px;padding:9px 12px;background:var(--panel-2);border-bottom:1px solid var(--line-soft)}
.sd .wdots{display:flex;gap:6px}
.sd .wdots i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.sd .wurl{flex:1;display:flex;align-items:center;gap:7px;justify-content:center;max-width:320px;margin-inline:auto;padding:4px 12px;border:1px solid var(--line-soft);border-radius:999px;background:var(--panel);font-family:var(--f-mono);font-size:10.5px;letter-spacing:.03em;color:var(--muted)}
.sd .wmeta{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
@media (max-width:620px){.sd .wmeta{display:none}}
.sd .ctl{display:flex;align-items:center;justify-content:space-between;gap:14px 20px;flex-wrap:wrap;padding:14px 16px 10px}
.sd .who{display:flex;align-items:center;gap:12px;min-width:0}
.sd .who b{display:block;font-family:var(--f-display);font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.sd .who span{display:block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.03em;color:var(--muted);margin-top:2px}
.sd .slot{width:46px;height:46px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;color:var(--muted);background:var(--panel-2) center/cover no-repeat;border:1.5px dashed var(--line);position:relative;transition:border-color .25s}
.sd .slot.has{border:2px solid var(--signal);color:transparent}
.sd .slot.busy:after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1.5px solid var(--signal);border-right-color:transparent;animation:sdspin .9s linear infinite}
@keyframes sdspin{to{transform:rotate(360deg)}}
.sd .acts{display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap}
.sd .up{background:var(--signal);color:var(--on-signal);border:0;border-radius:2px;padding:10px 16px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;white-space:nowrap}
.sd .up:hover{background:var(--signal-2)}
.sd .sep{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.sd .av{display:flex;gap:8px}
.sd .av button{width:38px;height:38px;border-radius:50%;border:2px solid transparent;padding:0;cursor:pointer;overflow:hidden;background:var(--sheet);transition:transform .15s,border-color .15s}
.sd .av button:hover,.sd .av button:focus-visible{transform:translateY(-2px);border-color:var(--signal)}
.sd .av button.cur{border-color:var(--signal)}
.sd .av img{width:100%;height:100%;object-fit:cover;display:block}
.sd .steps{display:flex;gap:6px;list-style:none;margin:0;padding:0 16px 12px}
.sd .steps li{flex:1;display:flex;align-items:center;gap:8px;padding-top:9px;border-top:2px solid var(--line);font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);transition:color .25s,border-color .25s}
.sd .steps li span{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%;border:1px solid currentColor;font-size:9.5px}
.sd .steps li.on{color:var(--ink);border-top-color:var(--signal)}
.sd .steps li.on span{background:var(--signal);border-color:var(--signal);color:var(--on-signal)}
.sd .steps li.done{color:var(--ink);border-top-color:var(--ink)}
.sd .steps li.done span{background:var(--ink);border-color:var(--ink);color:var(--panel)}
@media (max-width:520px){.sd .steps li{font-size:9px;letter-spacing:.04em}}
.sd .gwrap{position:relative;margin:0 16px;background:var(--sheet);padding:4px;border-radius:3px;overflow:hidden}
.sd .sdgrid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}
@media (max-width:620px){.sd .sdgrid{grid-template-columns:repeat(6,1fr)}}
.sd .t{position:relative;aspect-ratio:4/3;border-radius:2px;background-size:cover;background-position:center;background-color:var(--line);transition:opacity .3s,transform .3s,filter .3s}
.sd .t.u{opacity:.35;filter:grayscale(1) brightness(.9)}
.sd .t.x{opacity:.28;filter:grayscale(1)}
.sd .t.m{outline:2px solid var(--signal);outline-offset:-2px;z-index:1;animation:sdhit .5s cubic-bezier(.2,1.5,.4,1)}
.sd .t.m:after{content:"";position:absolute;right:4px;bottom:4px;width:15px;height:15px;border-radius:50%;background:var(--signal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5'/%3E%3C/svg%3E") center/11px no-repeat}
@keyframes sdhit{0%{transform:scale(.88)}100%{transform:none}}
.sd .sdgrid.mine{grid-template-columns:repeat(var(--mc,4),1fr);grid-auto-rows:1fr;gap:6px;height:var(--gh,auto)}
.sd .sdgrid.mine .t:not(.m){display:none}
.sd .sdgrid.mine .t.m{aspect-ratio:auto;animation:sdhit .45s cubic-bezier(.2,1.4,.4,1) both}
.sd .beam{position:absolute;left:0;right:0;height:46px;top:-46px;pointer-events:none;opacity:0;z-index:3;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--signal) 26%,transparent) 88%,var(--signal))}
.sd .beam.on{opacity:1}
.sd .veil{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:4;font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:color-mix(in srgb,var(--panel) 80%,transparent);backdrop-filter:blur(3px);border:2px dashed var(--signal);border-radius:3px;opacity:0;pointer-events:none;transition:opacity .15s}
.sd .gwrap.over .veil{opacity:1}
.sd .wfoot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 16px;padding:12px 16px 14px}
.sd .ro{display:flex;gap:18px;flex-wrap:wrap;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;color:var(--muted)}
.sd .ro b{font-weight:500;color:var(--signal);font-variant-numeric:tabular-nums}
.sd .tog{display:inline-flex;border:1px solid var(--line);border-radius:2px;overflow:hidden}
.sd .tog button{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;padding:7px 12px;background:var(--panel);color:var(--muted);border:0;cursor:pointer}
.sd .tog button+button{border-left:1px solid var(--line)}
.sd .tog button.on{background:var(--ink);color:var(--panel)}
.sd .tog b{font-weight:500;margin-left:4px;color:var(--signal)}
.sd .tog button.on b{color:inherit}
.sd-cap{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;color:var(--muted);margin:12px 0 0;text-align:center;text-transform:uppercase}
@media (prefers-reduced-motion:reduce){.sd .slot.busy:after{animation:none}.sd .t.m,.sd .sdgrid.mine .t.m{animation:none}.sd .beam{display:none}}


/* ============== 2 · SELFIE DEMO (hero) ============== */
/* SnapUp home hero — centered pitch + desktop "app window" search-by-selfie demo.
   Self-contained: every colour is defined here (.sx scope), so it renders correctly on its own. */
.hx{position:relative;text-align:center;padding:0}
.hx .eyebrow{display:inline-flex;margin-inline:auto}
.hx .h1{max-width:19ch;margin:14px auto 0;font-size:clamp(34px,4.8vw,58px);line-height:1.02;letter-spacing:-.03em}
.hx .lede{max-width:60ch;margin:20px auto 0;font-size:clamp(16px,1.5vw,19px)}
.hx .btns{justify-content:center;margin-top:28px}
.hx .hero-kicker{justify-content:center;margin-top:22px}

.sx{--bg:#F7FAFB;--p1:#FFFFFF;--p2:#EDF2F3;--ln:rgba(11,15,17,.09);--ln2:rgba(11,15,17,.17);--tx:#0F1719;--mu:#5B6B70;--sg:#E8420F;--sg2:#FF6A3A;--ok:#12A67C;--ph:#DCE4E6;--ovc:11,15,17;--scrim:rgba(247,250,251,.84);
  position:relative;margin:clamp(30px,4vw,48px) auto 0;max-width:1180px;text-align:left;isolation:isolate;
  font-family:var(--f-display,system-ui,sans-serif);color:var(--tx)}
.sx:before{content:"";position:absolute;inset:-9% -6% -14%;z-index:-1;pointer-events:none;
  background:radial-gradient(48% 52% at 28% 30%,rgba(255,95,46,.16),transparent 70%);filter:blur(40px)}
.sx *{box-sizing:border-box}
.sx .win{background:var(--bg);border:1px solid var(--ln2);border-radius:12px;overflow:hidden;
  box-shadow:0 1px 0 rgba(var(--ovc),.07) inset,0 40px 90px -24px rgba(5,10,14,.55),0 18px 36px -18px rgba(5,10,14,.45)}
.sx .tb{display:flex;align-items:center;gap:14px;padding:11px 16px;background:linear-gradient(var(--p2),var(--p1));border-bottom:1px solid var(--ln)}
.sx .dots{display:flex;gap:7px}.sx .dots i{width:11px;height:11px;border-radius:50%;background:#2A3438}
.sx .dots i:nth-child(1){background:#FF5F57}.sx .dots i:nth-child(2){background:#FEBC2E}.sx .dots i:nth-child(3){background:#28C840}
.sx .url{flex:1;max-width:380px;margin-inline:auto;display:flex;align-items:center;justify-content:center;gap:8px;padding:6px 14px;border-radius:8px;
  background:rgba(var(--ovc),.05);border:1px solid var(--ln);font-family:var(--f-display,system-ui,sans-serif);font-size:11.5px;color:var(--mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx .live{display:flex;align-items:center;gap:7px;font-family:var(--f-display,system-ui,sans-serif);font-size:10.5px;color:var(--mu);white-space:nowrap}
.sx .live:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(61,214,168,.18)}
.sx .body{display:grid;grid-template-columns:292px minmax(0,1fr)}
.sx .side{padding:22px 20px;background:var(--p1);border-right:1px solid var(--ln);display:flex;flex-direction:column;gap:20px;min-width:0}
.sx .ttl{font-size:19px;font-weight:700;letter-spacing:-.02em;margin:0}
.sx .sub{font:11px/1.5 var(--f-display,system-ui,sans-serif);color:var(--mu);margin:5px 0 0}
.sx .drop{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:20px 14px;border:1.5px dashed var(--ln2);border-radius:14px;background:rgba(var(--ovc),.025);transition:border-color .2s,background .2s}
.sx .drop.over{border-color:var(--sg);background:rgba(255,95,46,.09)}
.sx .dropc{display:flex;flex-direction:column;gap:8px;width:100%;align-items:stretch;text-align:center}
.sx .slot{position:relative;width:104px;height:104px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--mu);background:var(--ph) center/cover no-repeat;border:2px solid var(--ln2);transition:border-color .3s,box-shadow .3s}
.sx .slot.has{border-color:var(--sg);color:transparent;box-shadow:0 0 0 5px rgba(255,95,46,.14);animation:sxpop .5s cubic-bezier(.2,1.5,.4,1)}
@keyframes sxpop{0%{transform:scale(.82)}100%{transform:none}}
.sx .slot.busy:after{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid transparent;border-top-color:var(--sg);border-right-color:var(--sg);animation:sxspin .9s linear infinite}
@keyframes sxspin{to{transform:rotate(360deg)}}
.sx .up{appearance:none;border:0;cursor:pointer;width:100%;padding:11px 16px;border-radius:9px;font:600 13.5px/1 var(--f-display,system-ui,sans-serif);color:#1A0803;
  background:linear-gradient(180deg,#FF7A4D,#FF5F2E);box-shadow:0 8px 20px -8px rgba(255,95,46,.7),0 1px 0 rgba(var(--ovc),.35) inset;transition:transform .15s,filter .15s}
.sx .up:hover{filter:brightness(1.08);transform:translateY(-1px)}
.sx .hint{font:10.5px var(--f-display,system-ui,sans-serif);color:var(--mu);margin:0}
.sx .sxst{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.sx .sxst li{display:flex;align-items:center;gap:12px;font-size:13.5px;font-weight:500;color:var(--mu);transition:color .25s}
.sx .sxst li span{flex:none;width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid var(--ln2);font:500 11px var(--f-display,system-ui,sans-serif);transition:all .25s}
.sx .sxst li.on{color:var(--tx)}.sx .sxst li.on span{border-color:var(--sg);color:var(--sg);box-shadow:0 0 0 4px rgba(255,95,46,.15)}
.sx .sxst li.done{color:var(--tx)}.sx .sxst li.done span{background:var(--ok);border-color:var(--ok);color:#04201A;font-size:0}
.sx .sxst li.done span:after{content:"";width:9px;height:5px;border-left:2px solid #04201A;border-bottom:2px solid #04201A;transform:rotate(-45deg) translate(1px,-1px)}
.sx .stats{margin-top:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ln);border:1px solid var(--ln);border-radius:12px;overflow:hidden}
.sx .stats div{background:var(--p2);padding:11px 8px;text-align:center}
.sx .stats b{display:block;font:600 16px var(--f-display,system-ui,sans-serif);color:var(--tx);font-variant-numeric:tabular-nums}
.sx .stats span{display:block;margin-top:3px;font:11.5px var(--f-display,system-ui,sans-serif);color:var(--mu)}
.sx .main{padding:18px 20px 20px;min-width:0;display:flex;flex-direction:column;gap:14px;background:var(--bg);border:0}
.sx .mh{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sx .mh b{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em}
.sx .mh small{display:block;font:11px var(--f-display,system-ui,sans-serif);color:var(--mu);margin-top:3px}
.sx .tog{display:inline-flex;padding:3px;border-radius:10px;background:rgba(var(--ovc),.06);border:1px solid var(--ln)}
.sx .tog button{appearance:none;border:0;cursor:pointer;border-radius:7px;padding:7px 13px;font:500 12.5px var(--f-display,system-ui,sans-serif);color:var(--mu);background:transparent;transition:all .2s}
.sx .tog button.on{background:var(--tx);color:var(--bg)}
.sx .tog em{font-style:normal;margin-left:6px;padding:1px 6px;border-radius:99px;background:var(--sg);color:#1A0803;font:600 10.5px var(--f-display,system-ui,sans-serif)}
.sx .gwrap{position:relative;border-radius:10px;overflow:hidden}
.sx .sdgrid{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}
.sx .t{position:relative;aspect-ratio:4/3;border-radius:4px;background:var(--ph) center/cover no-repeat;transition:opacity .4s,filter .4s}
.sx .t.u{opacity:.3;filter:grayscale(1) brightness(.8)}
.sx .t.x{opacity:.2;filter:grayscale(1) brightness(.7)}
.sx .t.m{z-index:1;box-shadow:0 0 0 2px var(--sg),0 8px 22px -6px rgba(255,95,46,.65);animation:sxhit .5s cubic-bezier(.2,1.5,.4,1)}
.sx .t.m:after{content:"";position:absolute;right:5px;bottom:5px;width:18px;height:18px;border-radius:50%;
  background:var(--sg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5'/%3E%3C/svg%3E") center/12px no-repeat}
@keyframes sxhit{0%{transform:scale(.86)}100%{transform:none}}
/* result view: only the found photos, centred in the same box */
.sx .sdgrid.mine{box-sizing:border-box;padding:4px;display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:10px;height:var(--gh,auto)}
.sx .sdgrid.mine .t:not(.m){display:none}
.sx .sdgrid.mine .t.m{flex:0 0 calc((100% - (var(--mc,5) - 1) * 10px - 1px) / var(--mc,5));border-radius:10px;opacity:0;animation:sxin .55s cubic-bezier(.2,1.2,.4,1) forwards;animation-delay:var(--d,0ms)}
.sx .sdgrid.mine .t.m:after{width:22px;height:22px;right:8px;bottom:8px;background-size:14px}
@keyframes sxin{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}}
.sx .beam{position:absolute;left:0;right:0;top:-70px;height:70px;pointer-events:none;opacity:0;z-index:3;
  background:linear-gradient(180deg,transparent,rgba(255,95,46,.20) 70%,rgba(255,138,94,.55) 98%,#FFB08F 100%);box-shadow:0 8px 28px rgba(255,95,46,.45)}
.sx .beam.on{opacity:1}
/* selfie analysis — plays over the roll area only */
.sx .sf{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:var(--scrim);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .4s}
.sx .sf.on{opacity:1}
.sx .fc{position:relative;width:min(230px,44%);aspect-ratio:3/4;border-radius:12px;overflow:hidden;background:var(--ph) center/cover no-repeat;box-shadow:0 0 0 1px var(--ln2),0 30px 70px -20px rgba(0,0,0,.8);transform:scale(.9);transition:transform .6s cubic-bezier(.2,1.2,.4,1)}
.sx .sf.on .fc{transform:none}
.sx .fc:before{content:"";position:absolute;inset:14px;border-radius:10px;pointer-events:none;
  background:linear-gradient(var(--sg2),var(--sg2)) 0 0/22px 2px,linear-gradient(var(--sg2),var(--sg2)) 0 0/2px 22px,linear-gradient(var(--sg2),var(--sg2)) 100% 0/22px 2px,linear-gradient(var(--sg2),var(--sg2)) 100% 0/2px 22px,
  linear-gradient(var(--sg2),var(--sg2)) 0 100%/22px 2px,linear-gradient(var(--sg2),var(--sg2)) 0 100%/2px 22px,linear-gradient(var(--sg2),var(--sg2)) 100% 100%/22px 2px,linear-gradient(var(--sg2),var(--sg2)) 100% 100%/2px 22px;background-repeat:no-repeat}
.sx .fc i{position:absolute;left:0;right:0;top:0;height:60px;background:linear-gradient(180deg,transparent,rgba(255,95,46,.35) 80%,#FF8A5E);box-shadow:0 6px 24px rgba(255,95,46,.5);animation:sxline 1.3s ease-in-out infinite alternate}
@keyframes sxline{from{transform:translateY(-60px)}to{transform:translateY(calc(230px * 4 / 3))}}
.sx .sf p{margin:0;font:500 12px var(--f-display,system-ui,sans-serif);color:var(--tx)}
.sx .sf p span{color:var(--sg2)}
.sx .prog{height:3px;border-radius:3px;background:rgba(var(--ovc),.07);overflow:hidden}
.sx .prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--sg),var(--sg2));transition:width .08s linear}
.sx .sxcap{margin:16px 0 0;text-align:center;font:11px var(--f-display,system-ui,sans-serif);color:var(--muted,#8C9CA1)}
@media (max-width:900px){
  .sx .body{grid-template-columns:1fr}
  .sx .side{border-right:0;border-bottom:1px solid var(--ln);padding:18px 16px;gap:16px}
  .sx .drop{flex-direction:row;text-align:left;padding:14px}.sx .slot{width:68px;height:68px;flex:none}.sx .dropc{flex:1;min-width:0}
  .sx .sxst{flex-direction:row;gap:8px}.sx .sxst li{flex:1;flex-direction:column;gap:6px;font-size:11.5px;text-align:center}
  .sx .stats{margin-top:0}.sx .main{padding:14px}
  .sx .sdgrid{grid-template-columns:repeat(8,1fr);gap:3px}.sx .url{display:none}
  .sx .sdgrid.mine{--mc:3!important}.sx .fc{width:150px}
}
@media (prefers-reduced-motion:reduce){.sx .slot.busy:after,.sx .t.m,.sx .fc i{animation:none}.sx .sdgrid.mine .t.m{animation:none;opacity:1}.sx .beam{display:none}}


/* ---- layout: copy left, product right, 80% of the screen ---- */
.hx{width:80vw;max-width:1900px;position:relative;left:50%;transform:translateX(-50%);display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(36px,4vw,56px);text-align:left}
.hx .sx{margin:0;max-width:none}
.hx .h1{margin:0;max-width:none;font-size:clamp(38px,3.7vw,62px);line-height:1.02;letter-spacing:-.038em;font-weight:700;font-variation-settings:'wdth' 108}
.hx .lede{margin:22px 0 0;max-width:42ch;font-size:clamp(17px,1.35vw,20px);line-height:1.55;color:var(--ink-2)}
.hx .btns{display:flex;justify-content:flex-start;gap:12px;align-items:center;flex-wrap:wrap;margin-top:30px}
.hx .btns .btn{font-family:var(--f-display);text-transform:none;letter-spacing:-.005em;font-size:15px;font-weight:600;padding:14px 22px;border-radius:8px;white-space:nowrap}
.hx .btns .btn.ghost{border-color:transparent;background:transparent;padding-inline:6px;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:5px}
.hx .btns .btn.ghost:hover{text-decoration-color:var(--signal);color:var(--ink)}
.hx-points{list-style:none;margin:34px 0 0;padding:22px 0 0;border-top:1px solid var(--line);display:grid;gap:11px}
.hx-points li{position:relative;padding-left:26px;font-family:var(--f-display);font-size:15px;font-weight:500;color:var(--ink-2);letter-spacing:-.005em}
.hx-points li:before{content:"";position:absolute;left:0;top:2px;width:17px;height:17px;border-radius:50%;background:var(--signal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 8.5l2.4 2.4 4.6-4.8'/%3E%3C/svg%3E") center/11px no-repeat}
@media (min-width:1100px){
  .hx{grid-template-columns:minmax(320px,.34fr) minmax(0,.66fr);align-items:center}
  .hx .sx .body{grid-template-columns:240px minmax(0,1fr)}
  .hx .sx .side{padding:20px 18px;gap:18px}
  .hx .sx .slot{width:88px;height:88px}
}
@media (max-width:1099px){.hx .h1,.hx .lede{max-width:none}}
@media (max-width:620px){.hx{width:92vw}}

/* ---- one floating confirmation, shown when the search finishes ---- */
.sx .win{position:relative}
.sx .fl{position:absolute;z-index:6;display:flex;align-items:center;gap:11px;padding:11px 16px 11px 12px;border-radius:12px;background:var(--p1);color:var(--tx);border:1px solid var(--ln2);box-shadow:0 22px 44px -16px rgba(5,10,14,.5);font-family:var(--f-display,system-ui,sans-serif)}
.sx .fl b{display:block;font-size:13.5px;font-weight:600;letter-spacing:-.01em}
.sx .fl span{display:block;margin-top:2px;font-size:12px;color:var(--mu)}
.sx .fl-toast{top:-22px;right:-14px;opacity:0;transform:translateY(8px);transition:opacity .45s,transform .5s cubic-bezier(.2,1.2,.4,1)}
.sx .fl-toast.show{opacity:1;transform:none}
.sx .fl-toast .ok{flex:none;width:30px;height:30px;border-radius:50%;background:var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5'/%3E%3C/svg%3E") center/16px no-repeat}
@media (max-width:1099px){.sx .fl{display:none}}
.sx .sxcap{font-size:13px;color:var(--muted,#8C9CA1);margin:18px 0 0;text-align:left}

/* theme: light window in Lightbox, dark window in Darkroom */
:root[data-theme="dark"] .sx{--bg:#0B0F11;--p1:#10161A;--p2:#151D21;--ln:rgba(255,255,255,.08);--ln2:rgba(255,255,255,.14);--tx:#EAF0F1;--mu:#8C9CA1;--sg:#FF5F2E;--sg2:#FF8A5E;--ok:#3DD6A8;--ph:#1A2327;--ovc:255,255,255;--scrim:rgba(8,12,14,.82);}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sx{--bg:#0B0F11;--p1:#10161A;--p2:#151D21;--ln:rgba(255,255,255,.08);--ln2:rgba(255,255,255,.14);--tx:#EAF0F1;--mu:#8C9CA1;--sg:#FF5F2E;--sg2:#FF8A5E;--ok:#3DD6A8;--ph:#1A2327;--ovc:255,255,255;--scrim:rgba(8,12,14,.82);}}

/* ============== 3 · ACCOUNT PAGES (sign up, sign in, confirm email) ============== */
:root{--accent:var(--signal);--accent-2:var(--signal-2);--on-accent:var(--on-signal);
  --sunk:#DDE4E6;--s1:#2a78d6;--s2:#1baf7a;--s3:#4a3aa7;--ok-ink:#046B04;--warn-ink:#8A6100;--crit-ink:#A82020}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--sunk:#0A0E10;--s1:#3987e5;--s2:#199e70;--s3:#9085e9;--ok-ink:#3FBF3F;--warn-ink:#E0A521;--crit-ink:#E06A6A}}
:root[data-theme="dark"]{--sunk:#0A0E10;--s1:#3987e5;--s2:#199e70;--s3:#9085e9;--ok-ink:#3FBF3F;--warn-ink:#E0A521;--crit-ink:#E06A6A}
body.portal::after{display:none}
body.portal{padding-left:0}
body.portal .btn{letter-spacing:0;text-transform:none;gap:8px;transition:none}
body.portal .btn:active{transform:none}
body.portal .foot{display:block}
body.portal .foot a{font-size:inherit;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
body.portal h1,body.portal h2,body.portal h3{text-wrap:wrap}
body.portal{margin:0;background:var(--ground);color:var(--ink);font-family:var(--f-mono);font-size:13px;line-height:1.5;-webkit-font-smoothing:antialiased}
body.portal a{color:inherit}
body.portal :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
body.portal h1,body.portal h2,body.portal h3{font-family:var(--f-display);margin:0;letter-spacing:-.018em;font-weight:700}
body.portal .h1{font-variation-settings:'wdth' 108;font-size:clamp(21px,2.4vw,27px);line-height:1.1;font-weight:800}
body.portal .h2{font-variation-settings:'wdth' 102;font-size:15px;line-height:1.2}
body.portal .prose{font-family:var(--f-body);font-size:15px;line-height:1.55;color:var(--ink-2);max-width:66ch;margin:6px 0 0}
body.portal .wm{font-family:var(--f-display);font-variation-settings:'wdth' 110;font-weight:800;font-size:14px;text-transform:uppercase;letter-spacing:-.01em;line-height:1.1}
body.portal .wm i{font-style:normal;font-weight:500;color:var(--muted)}
body.portal .tnum{font-variant-numeric:tabular-nums}
body.portal .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:500 12.5px var(--f-mono);padding:10px 16px;border-radius:2px;border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer;text-decoration:none}
body.portal .btn:hover{background:var(--panel-2)}
body.portal .btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
body.portal .btn.primary:hover{background:var(--accent-2);border-color:var(--accent-2)}
body.portal .btn.sm{padding:5px 9px;font-size:11.5px}
body.portal .btn.danger{color:var(--crit-ink)}
body.portal label.f{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 5px}
body.portal input[type=text],body.portal input[type=email],body.portal input[type=password],body.portal input[type=search],body.portal select{width:100%;font:13px var(--f-mono);padding:10px 11px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:2px}
body.portal input::placeholder{color:var(--muted)}
body.portal .field{margin-bottom:14px}
body.portal .alert{border:1px solid var(--line);border-left:3px solid var(--accent);background:var(--panel);padding:10px 12px;margin-bottom:16px;font-size:12.5px}
body.portal .alert.ok{border-left-color:var(--ok-ink)}
body.portal .alert ul{margin:0;padding-left:16px}
body.portal .chip{display:inline-block;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border:1px solid var(--line);border-radius:2px;color:var(--ink-2)}
body.portal .chip.good{color:var(--ok-ink);border-color:currentColor}
body.portal .chip.warn{color:var(--warn-ink);border-color:currentColor}
body.portal .chip.crit{color:var(--crit-ink);border-color:currentColor}
body.portal .themebtn{position:fixed;top:12px;right:14px;z-index:5}
/* ---- account pages ---- */
body.portal .shell{min-height:100vh;display:grid;place-items:center;padding:56px 16px 32px}
body.portal .card{width:100%;background:var(--panel);border:1px solid var(--line);padding:28px}
body.portal .card .head{margin:18px 0 22px}
body.portal .foot{margin-top:18px;font-size:12px;color:var(--muted)}
body.portal .foot a{color:var(--ink);text-underline-offset:3px}
/* ---- sign-up role cards ---- */
body.portal .roles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
body.portal .role{position:relative;display:block;cursor:pointer}
body.portal .role input{position:absolute;opacity:0;inset:0;cursor:pointer}
body.portal .role span{display:block;border:1px solid var(--line);background:var(--panel-2);padding:12px;border-radius:2px}
body.portal .role b{display:block;font-family:var(--f-display);font-size:15px;margin-bottom:2px}
body.portal .role small{color:var(--muted);font-size:11.5px}
body.portal .role input:checked + span{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
body.portal .role input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}
/* ---- wordmark: Snap [UP logo] Studio ---- */
body.portal .wm{display:inline-flex;align-items:center}
body.portal .wm .uplogo{display:block;height:24px;width:auto;margin:0 2px 0 1px}
body.portal .wm i{margin-left:5px;color:inherit}
body.portal .shell .card{max-width:440px}

/* ============== 4 · LOGO ============== */

/* ---- logo: transparent, no backing box. In dark surfaces the dark arrow gets a 1px light outline that follows the artwork itself ---- */
.uplogo{background:none;padding:0;border-radius:0}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .uplogo{filter:drop-shadow(1px 0 0 var(--logo-edge)) drop-shadow(-1px 0 0 var(--logo-edge)) drop-shadow(0 1px 0 var(--logo-edge)) drop-shadow(0 -1px 0 var(--logo-edge))}}
:root[data-theme="dark"] .uplogo{filter:drop-shadow(1px 0 0 var(--logo-edge)) drop-shadow(-1px 0 0 var(--logo-edge)) drop-shadow(0 1px 0 var(--logo-edge)) drop-shadow(0 -1px 0 var(--logo-edge))}
:root{--logo-edge:#E8EEEF}

/* ============== 5 · RESPONSIVE ============== */
/* Fluid by default: nothing may push the page sideways, grid children may shrink, media scales. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{max-width:100%;overflow-x:clip}
img,svg,video,canvas{max-width:100%}
.feat,.split,.grid2,.mocks,.plans,.cta,.foot,.anatomy > div{min-width:0}
.feat > *,.split > *,.grid2 > *,.mocks > *,.plans > *,.cta > *,.foot > *{min-width:0}
@media (max-width:939px){.feat{grid-template-columns:minmax(0,1fr)}}
.steps b,.steps span,.plan li,.faq summary,p,li,h1,h2,h3{overflow-wrap:break-word}

/* big screens: let the page use more of the room instead of floating in the middle */
@media (min-width:1600px){.wrap{max-width:1360px}}
@media (min-width:2000px){.wrap{max-width:1560px} body{font-size:18px}}
@media (min-width:2400px){.wrap{max-width:1760px}}

/* tablets */
@media (max-width:1099px){.hx{width:92vw}}
@media (max-width:899px){
  .wrap{padding-inline:clamp(16px,4vw,32px)}
  .hx .btns{gap:10px}
  .table-wrap,.cmp{overflow-x:auto}
}
/* phones */
@media (max-width:620px){
  .topinner{gap:10px;min-height:58px}
  .brand .uplogo{height:26px;width:auto}
  .brand .wm{font-size:15px}
  .band{padding-block:clamp(40px,10vw,64px)}
  .btns{gap:8px}
  .btns .btn{flex:1 1 auto;justify-content:center}
  .hx .btns .btn{white-space:normal}
  .cta,.plan,.mock .cap{padding-inline:18px}
  table{display:block;max-width:100%;overflow-x:auto}
}
@media (max-width:420px){
  .lamp #lampLabel{display:none}
  .lamp{padding:8px 10px}
  .topactions{gap:6px}
  .menu-btn{padding:8px 10px}
  .hx .h1{font-size:clamp(32px,10.4vw,40px)}
}
@media (max-width:340px){
  .brand .wm i{display:none}
  body{font-size:16px}
}
/* accounts: comfortable on phones */
@media (max-width:480px){
  body.portal .shell{padding:64px 12px 24px}
  body.portal .card{padding:20px 16px}
  body.portal .roles{grid-template-columns:1fr}
}
/* hero: centred on the screen without left:50% + transform (that created sideways scroll on tablets/phones) */
.hx{--hxw:min(80vw,1900px);width:var(--hxw);max-width:none;left:auto;transform:none;margin-left:calc(50% - var(--hxw) / 2);margin-right:0}
@media (max-width:1099px){.hx{--hxw:92vw}}
@media (max-width:620px){.hx{--hxw:calc(100vw - 32px)}}
@media (max-width:1099px){.sx{overflow-x:clip}}
body.portal .chip{white-space:nowrap}

/* ---------------- blog ---------------- */
/* blog index uses the same width as the hero on every other page */
.wrap.blog-wide{--bw:min(80vw,1900px);max-width:var(--bw);padding-inline:0}
@media (max-width:1099px){.wrap.blog-wide{--bw:92vw}}
@media (max-width:620px){.wrap.blog-wide{--bw:calc(100vw - 32px)}}

.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border:1px solid var(--line);border-radius:2px;color:var(--ink-2);background:var(--panel);white-space:nowrap}

.blog-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(16px,2vw,28px);margin-top:clamp(28px,4vw,48px)}
@media (min-width:640px){.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.blog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:2200px){.blog-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.blog-card{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:2px;overflow:hidden;transition:border-color .15s,transform .15s,box-shadow .15s}
.blog-card:hover{border-color:var(--ink-2);transform:translateY(-2px);box-shadow:var(--shadow)}
.blog-card[hidden]{display:none}
.blog-card .cover{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--sheet);border-bottom:1px solid var(--line)}
.blog-card .cover img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.blog-card:hover .cover img{transform:scale(1.03)}
.bc-body{display:flex;flex-direction:column;gap:10px;padding:clamp(16px,1.6vw,22px);flex:1}
.bc-body .mono{margin:0}
.bc-body .h4{font-size:clamp(18px,1.5vw,22px);line-height:1.2;letter-spacing:-.012em}
.bc-body .h4 a{text-decoration:none;color:var(--ink)}
.bc-body .h4 a:hover{color:var(--signal)}
.bc-body p:not(.mono){margin:0;font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.bc-body .chips{margin-top:auto;padding-top:6px}

/* pagination */
.pagination{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin-top:clamp(32px,4vw,52px)}
.pagination button{appearance:none;font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;min-width:42px;height:42px;padding:0 14px;border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:2px;cursor:pointer;transition:background .15s,border-color .15s}
.pagination button:hover:not(:disabled):not([aria-current]){border-color:var(--ink-2);background:var(--panel-2)}
.pagination button[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:var(--ground);cursor:default}
.pagination button:disabled{opacity:.4;cursor:not-allowed}
.pagination .pg-info{width:100%;text-align:center;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.06em;color:var(--muted);margin-bottom:6px;order:-1}
@media (max-width:520px){.pagination button{min-width:38px;height:38px;padding:0 10px}.pagination .pg-lbl{display:none}}

/* single post */
.back-link{display:inline-block;font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);text-decoration:none}
.back-link:hover{color:var(--signal)}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:18px}
.post-hero{margin:28px 0 8px;border:1px solid var(--line);border-radius:2px;overflow:hidden}
.post-hero img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.post-body{margin-top:26px;font-size:clamp(17px,1.25vw,19px);line-height:1.7;color:var(--ink-2)}
.post-body h2{font-size:clamp(24px,2.2vw,30px);margin:2em 0 .6em;color:var(--ink)}
.post-body p{margin:0 0 1.15em}
.post-body ul,.post-body ol{margin:0 0 1.3em;padding-left:1.3em}
.post-body li{margin-bottom:.5em}
.post-body blockquote{margin:1.6em 0;padding:4px 0 4px 20px;border-left:3px solid var(--signal);font-size:1.12em;color:var(--ink)}
.post-body a{color:var(--signal)}
.hr{height:1px;background:var(--line);margin:40px 0 28px}

/* =====================================================================
   RESPONSIVE FIXES — keep this block at the very end of the file.
   1 header  2 comparison tables  3 long words  4 touch targets
   ===================================================================== */

/* 1 · header ---------------------------------------------------------
   The theme switch / Menu button always sit on the right edge (they used
   to float next to the logo on phones and tablets), nothing in the bar
   wraps onto a second line, and the full menu only appears when there is
   room for it. Below that width the Menu button opens the drawer. */
.topactions,nav.main + .topactions{margin-left:auto}
.topinner{flex-wrap:nowrap}
.brand,nav.main a,.dd-btn,.lamp,.menu-btn,.topactions .btn{white-space:nowrap}
nav.main{display:none}
.menu-btn{display:flex}
.topactions > .btn.sm{display:none}
@media (min-width:600px){.topactions > .btn.sm{display:inline-flex}}
@media (max-width:719px){.topactions > .btn.sm.ghost{display:none}}
.lamp,.menu-btn,.topactions > .btn.sm{min-height:38px;align-items:center}
@media (min-width:1140px){
  nav.main{display:flex;margin-left:auto}
  nav.main + .topactions{margin-left:14px}
  .menu-btn{display:none}
  .drawer{display:none !important}
}
/* the drawer carries the two buttons that don't fit in the bar on a phone */
.drawer .drawer-cta{display:flex;gap:8px;padding:14px 0 8px;border-bottom:0}
.drawer .drawer-cta .btn{display:inline-flex;flex:1 1 0;justify-content:center;text-align:center;padding:12px 10px;border:1px solid var(--line);color:var(--ink)}
.drawer .drawer-cta .btn:not(.ghost){border-color:var(--signal);background:var(--signal);color:var(--on-signal)}
@media (min-width:720px){.drawer .drawer-cta{display:none}}
.drawer{max-height:calc(100vh - 58px);overflow-y:auto;overscroll-behavior:contain}

/* 2 · comparison tables ---------------------------------------------
   On a phone every column is visible at once instead of a table you
   have to drag sideways with the last column cut off. */
@media (max-width:760px){
  .cmp{display:table !important;min-width:0;width:100%;table-layout:fixed;overflow:visible;font-size:13px}
  .cmp th,.cmp td{padding:10px 6px;overflow-wrap:anywhere;word-break:normal;vertical-align:top}
  .cmp thead th{font-size:10px;letter-spacing:.08em}
  .cmp thead th:first-child,.cmp tbody th{width:32%}
  .cmp tbody th{font-size:13px;line-height:1.4}
  .cmp td{font-size:11.5px;line-height:1.45}
  .cmp th:first-child,.cmp td:first-child{padding-left:0}
  .cmp th:last-child,.cmp td:last-child{padding-right:0}
  .spec{display:table !important;width:100%;table-layout:fixed}
  .spec th,.spec td{overflow-wrap:anywhere}
}
@media (max-width:380px){
  .cmp thead th:first-child,.cmp tbody th{width:30%}
  .cmp tbody th{font-size:12.5px}
  .cmp td{font-size:11px}
  .cmp thead th{letter-spacing:.04em}
}

/* 3 · long words -----------------------------------------------------
   Web addresses in headings and in the little "terminal" cards wrap at a
   sensible place instead of running off the screen or splitting a word. */
h1,h2,h3,.h1,.h2,.h3,.lede,p,li,dd,dt{overflow-wrap:break-word}
@media (max-width:620px){h1,h2,.h1,.h2{overflow-wrap:anywhere}}
.dns span:last-child{word-break:normal;overflow-wrap:anywhere}
img,video,svg,canvas{max-width:100%}
html,body{max-width:100%;overflow-x:clip}

/* 4 · touch targets ---------------------------------------------------
   Buttons and menu rows are tall enough to tap comfortably. */
@media (max-width:899px){
  .drawer a{padding-block:13px}
}

/* plans come from the database, so there can be 1–4 (or more) of them: the grid follows the number */
@media (min-width:880px){
  .plans{grid-template-columns:repeat(var(--n,3),minmax(0,1fr))}
  .plans .plan:nth-child(n+5){border-top:1px solid var(--line)}
}
/* a comparison with more than three plans scrolls sideways on a phone instead of squeezing */
@media (max-width:760px){
  .cmp.many{display:block !important;overflow-x:auto;table-layout:auto}
  .cmp.many th,.cmp.many td{min-width:92px}
}
.toggle{flex-wrap:wrap}

/* Hero demo: the photo grid fills the panel (it used to stop short and leave an empty strip
   under the progress line), and the "photos found" note no longer sits on top of the frame count. */
.sx .gwrap{flex:1 1 auto;display:grid}
@media (min-width:901px){
  .sx .sdgrid:not(.mine){grid-auto-rows:minmax(40px,1fr);align-content:stretch}
  .sx .sdgrid:not(.mine) .t{aspect-ratio:auto;min-height:40px}
  /* the heading keeps to one line, so the window doesn't jump taller when the results arrive */
  .sx .mh{flex-wrap:nowrap}
  .sx .mh > :first-child{min-width:0}
  .sx .mh b,.sx .mh small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sx .tog{flex:none}
}
.sx .win:has(.fl-toast.show) .live{visibility:hidden}
.qrcode svg,.qrcode img{display:block;width:100%;height:100%;object-fit:contain}
.mocks.four{grid-template-columns:1fr}
@media (min-width:640px){.mocks.four{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.mocks.four{grid-template-columns:repeat(4,1fr)}}
.mock .screen.shot{padding:0;background:var(--sheet)}
.mock .screen.shot img{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;object-position:top}