/* ============================================================
   Keepsake — the site's colours, and the product page

   The app's look, "darkroom on ice" (keepsake-app's Theme.swift): a
   midnight ground lit by an icy aurora, film grain over it, film-edge
   captions in mono caps, and one glacier tint used sparingly. Keep and
   archive are mint and rose. The hero is always that night; the paper
   below it is the icon's pale print in light mode and the night again in
   Dark Mode. The app's own screens, drawn in HTML (.shot), are always
   dark, as the app is.

   Support, Privacy and Download link this file for the :root colours and
   the navbar's and footer's look (and assets/doc.css for their column);
   everything else here is the product page's, under body.product. The
   type, the feature blades and the download blade:
   /shared/components/product.css.
   ============================================================ */

:root{
  /* the app's palette (Theme.swift, KS) */
  --night:#05070e;
  --ice:#7fdbff;
  --glacier-top:#9be7ff;
  --glacier-bottom:#5b8cff;
  --violet:#8c7cff;
  --keep:#34e8b0;
  --archive:#ff5470;
  --favourite:#ff6fb5;
  --ink:#06122b;                 /* dark ink on the glacier block */
  --glacier:linear-gradient(135deg, var(--glacier-top), var(--glacier-bottom));
  --on-night:#f2f6ff;
  --on-night-mid:rgba(255,255,255,.68);

  /* the aurora: the hero's and the drawn screens' light. app.js picks its hue per visit, from cyan to violet,
     as the app picks it per launch; these are its middle */
  --a0:#164757; --a1:#234475; --a2:#17154d;
  --a3:#070b21; --a4:#0d2333; --a5:#0b061f;

  /* the paper, in light mode: the icon's print */
  --paper:#f1f5fd;
  --card:#fff;
  --card-line:#dce4f2;
  --text-dark:#06122b;
  --text-mid:#45516a;
  --text-on-dark-mid:var(--on-night-mid);
  --accent:#2d5be3;              /* the glacier, deep enough for text on the paper (5.3:1) */

  --font:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
         "Helvetica Neue", "Segoe UI", Inter, Roboto, Arial, sans-serif;
  /* the app's film-edge captions: SF Mono where there is one */
  --mono:ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  --spring:cubic-bezier(.2,1.2,.35,1);

  /* the shared navbar, footer and pill (/shared/components/) in Keepsake's look */
  --mk-font:var(--font);
  --mk-nav-position:fixed;
  --mk-nav-bg:rgba(5,7,14,.62); --mk-nav-saturate:170%;
  --mk-nav-light-bg:rgba(241,245,253,.8); --mk-nav-light-fg:var(--ink); --mk-nav-light-line:rgba(6,18,43,.08);
  --mk-nav-mark-r:5px;
  --mk-accent:var(--ice); --mk-accent-deep:var(--glacier-bottom); --mk-cta-fg:var(--ink); --mk-cta-hover:var(--glacier-top);
  --mk-cta-weight:650;
  --mk-footer-bg:var(--paper); --mk-footer-fg:var(--text-mid); --mk-footer-strong:var(--text-dark); --mk-footer-z:6;
  --mk-footer-muted:#56627a;   /* the footer's small print at 4.5:1 on the paper */
  --mk-footer-ink:var(--glacier-bottom);
  --mk-footer-line:rgba(6,18,43,.1);
}

body{
  margin:0;
  font-family:var(--font);
  background:var(--night);
  color:var(--on-night);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
/* the reveals wait for the script (product.css hides them outright) */
html:not(.js) .reveal{opacity:1;transform:none}

.sprite{position:absolute;width:0;height:0;overflow:hidden}
.visually-hidden{
  position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
/* the icons: strokes in the text's colour */
.product svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* the app's film-edge caption: small mono caps */
.cap{
  margin:0;
  font-family:var(--mono);
  font-size:11px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--on-night-mid);
}

/* ============================================================
   THE PRODUCT PAGE
   ============================================================ */
/* Dark Mode: the paper turns to night, for the page and its footer (and Support's and the Privacy Policy's) */
@media (prefers-color-scheme:dark){
  body.product,body.doc{
    --paper:#070a14;
    --card:#0c111f;
    --card-line:rgba(255,255,255,.09);
    --text-dark:#f2f6ff;
    --text-mid:rgba(242,246,255,.7);
    --accent:var(--ice);
    --mk-footer-bg:#070a14; --mk-footer-fg:rgba(242,246,255,.66); --mk-footer-strong:#f2f6ff;
    --mk-footer-muted:rgba(242,246,255,.55); --mk-footer-line:rgba(255,255,255,.1);
    --mk-footer-ink:var(--ice);
  }
}

.product .skip{
  position:absolute;left:var(--pad);top:-60px;z-index:60;padding:10px 16px;border-radius:12px;
  background:#fff;color:var(--ink);font-weight:600;
}
.product .skip:focus{top:calc(var(--nav-h) + 10px)}
.product :focus-visible{outline:3px solid var(--ice);outline-offset:3px;border-radius:6px}
.product .paper :focus-visible{outline-color:var(--accent)}

/* ---------- the hero ---------- */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--night);
  color:var(--on-night);
  padding:calc(var(--nav-h) + clamp(28px,7vh,84px)) 0 calc(40px + clamp(40px,7vh,80px));
}
/* the aurora: the app's 3 × 3 mesh, lit along the top and sinking into the night, as soft lights */
.aurora{
  position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(60% 55% at 0% 0%, var(--a0), transparent 72%),
    radial-gradient(60% 65% at 50% 0%, var(--a1), transparent 72%),
    radial-gradient(60% 55% at 100% 0%, var(--a2), transparent 72%),
    radial-gradient(55% 45% at 0% 40%, var(--a3), transparent 75%),
    radial-gradient(55% 50% at 50% 42%, var(--a4), transparent 75%),
    radial-gradient(55% 45% at 100% 36%, var(--a5), transparent 75%),
    var(--night);
  animation:aurora-in 2.4s var(--ease) both;
}
/* the vignette pulls the corners back into the night */
.aurora::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(130% 90% at 50% 30%, transparent 40%, rgba(5,7,14,.75) 100%);
}
@keyframes aurora-in{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
/* film grain over everything: the app's own tile (assets/grain.png, its FilmGrain), overlaid at 7% */
.hero::after,.shot::after{
  content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  background:url("assets/grain.png") 0 0/64px 64px;
  mix-blend-mode:overlay;opacity:.08;
}
/* a swipe's tint: rose in from the left towards Archive, mint in from the right towards Keep (--ta, --tk: 0 → .5) */
.tint{position:absolute;inset:0;z-index:-1;pointer-events:none}
.tint::before,.tint::after{content:"";position:absolute;inset:0;transition:opacity .15s ease-out}
.tint::before{background:linear-gradient(to right, rgba(255,84,112,.55), transparent 70%);opacity:var(--ta,0)}
.tint::after{background:linear-gradient(to left, rgba(52,232,176,.5), transparent 70%);opacity:var(--tk,0)}

.hero-inner{
  position:relative;z-index:2;
  max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(28px,5vw,72px);align-items:center;
}
.hero-copy{padding:clamp(8px,3vh,40px) 0}
.product .eyebrow{
  margin:0 0 18px;font-family:var(--mono);font-size:14px;font-weight:600;
  letter-spacing:.04em;text-transform:none;color:var(--ice);
}
.hero .h1{font-size:clamp(42px,4.6vw,66px);line-height:1;letter-spacing:-.04em;font-weight:800}
.h1-a,.h1-b{display:block;-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}
/* the wordmark's white to glacier, then the glacier itself */
.h1-a{background-image:linear-gradient(180deg,#fff 30%,#cdeeff)}
.h1-b{background-image:linear-gradient(100deg,var(--glacier-top) 10%,var(--glacier-bottom) 90%)}
.hero .sub{margin:22px 0 0;max-width:36ch;font-size:clamp(17px,1.5vw,20px);color:var(--on-night-mid);text-wrap:pretty}

.get{display:flex;align-items:center;gap:22px;margin-top:32px}
.get .mk-store{flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.22)}
/* on a computer, the QR code to scan with an iPhone */
.qr{display:none;align-items:center;gap:14px}
.qr img{width:84px;height:84px;padding:7px;border-radius:12px;background:#fff;box-sizing:content-box}
.qr p{margin:0;max-width:16ch;font-size:13.5px;line-height:1.35;color:var(--on-night-mid)}
@media (hover:hover) and (pointer:fine) and (min-width:900px){ .qr{display:flex} }
/* Before the app is out, site.json has no appStore and the badge links nowhere ("#"): it and the QR code
   step aside for "Coming soon", and the pill stays away. Adding the link brings them back, with no other change. */
.soon{
  display:none;align-items:center;gap:11px;margin:0;padding:13px 20px;border-radius:14px;
  font-size:16px;font-weight:650;letter-spacing:-.01em;
  background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16), inset 0 1px 0 rgba(255,255,255,.12);
}
.soon-dot{width:8px;height:8px;border-radius:50%;background:var(--keep);box-shadow:0 0 0 4px rgba(52,232,176,.2)}
.get:has(.mk-store[href="#"]) .mk-store,
.get:has(.mk-store[href="#"]) .qr{display:none}
.get:has(.mk-store[href="#"]) .soon{display:inline-flex}
body:has(.mk-store[href="#"]) .mk-pill{display:none}
.facts{margin:18px 0 0;font-size:15px;font-weight:600;color:var(--on-night)}

/* ---------- try it: the deck ---------- */
.try{
  --cw:clamp(232px,23vw,292px);           /* a card's width; its height is 7:5, a print's */
  display:flex;flex-direction:column;align-items:center;gap:18px;
}
.try-hint{color:var(--ice)}
.try-hint-keys{display:none}
@media (hover:hover) and (pointer:fine){ .try-hint-touch{display:none} .try-hint-keys{display:inline} }
html:not(.js) .try-hint,html:not(.js) .deck-controls,html:not(.js) .tally{display:none}

.deck-stage{position:relative;width:var(--cw);aspect-ratio:5/7;margin:6px 0 4px}
.deck{list-style:none;margin:0;padding:0;position:absolute;inset:0}
.print{
  --r:7.5cqw;
  position:absolute;inset:0;container-type:inline-size;
  border-radius:20px;overflow:hidden;background:var(--night);
  box-shadow:0 34px 60px -10px rgba(0,0,0,.6), 0 8px 18px rgba(0,0,0,.35);
  transition:transform .55s var(--spring), opacity .35s var(--ease);
  touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
.print img{width:100%;height:100%;object-fit:cover;pointer-events:none}
/* the top-lit rim every card shares, and the rim lighting up in the colour of the side it's heading to */
.print::before{
  content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1), inset 0 1.5px 0 rgba(255,255,255,.26),
             inset 0 0 0 2.5px color-mix(in srgb, var(--edge,transparent) calc(var(--e,0) * 100%), transparent);
}
.print::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:url("assets/grain.png") 0 0/64px 64px;mix-blend-mode:overlay;opacity:.12;
}
/* the stack, fanned like the app's hero: the top card, then one each side behind it */
.js .print{opacity:0;transform:scale(.88);pointer-events:none}
.js .print[data-k="0"]{opacity:1;transform:none;z-index:5;pointer-events:auto;cursor:grab}
.js .print[data-k="1"]{opacity:1;transform:translate(-9%,3%) rotate(-7deg) scale(.94);z-index:4}
.js .print[data-k="2"]{opacity:1;transform:translate(9%,4.5%) rotate(7deg) scale(.9);z-index:3}
.js .print.is-dragging{transition:none;cursor:grabbing}
.js .print.is-gone{visibility:hidden}
html:not(.js) .print:nth-child(1){z-index:5}
html:not(.js) .print:nth-child(2){transform:translate(-9%,3%) rotate(-7deg) scale(.94);z-index:4}
html:not(.js) .print:nth-child(3){transform:translate(9%,4.5%) rotate(7deg) scale(.9);z-index:3}
html:not(.js) .print:nth-child(n+4){display:none}

/* the card's details, top left: the place, the date, the size (the app's metadata pills) */
.pills{position:absolute;left:4.2cqw;top:4.2cqw;z-index:4;display:flex;gap:1.8cqw;align-items:center}
.pill{
  display:inline-flex;align-items:center;justify-content:center;
  height:9.5cqw;padding:0 3.4cqw;border-radius:99px;
  font-family:var(--mono);font-size:3.5cqw;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
  color:#fff;background:rgba(20,24,36,.5);
  -webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.2);
}
.pill-pin{width:9.5cqw;padding:0}
.pill-pin svg{width:4.4cqw;height:4.4cqw;stroke-width:2.4}
.pill-pin.is-off{opacity:.55}
.pill-size{color:var(--ice)}

/* KEEP and ARCHIVE: the app's rubber stamp, heavy caps in a double-ruled box, scuffed by the grain */
.stamp{
  position:absolute;top:21%;z-index:4;pointer-events:none;
  font-size:var(--s,9cqw);font-weight:900;line-height:1;letter-spacing:.06em;white-space:nowrap;text-transform:uppercase;
  padding:.2em .42em;border:max(2px,.09em) solid currentColor;border-radius:.28em;
  box-shadow:0 0 0 .12em transparent, 0 0 0 calc(.12em + max(1px,.04em)) color-mix(in srgb, currentColor 55%, transparent);
  text-shadow:0 0 .3em color-mix(in srgb, currentColor 45%, transparent);
  -webkit-mask:url("assets/scuff.png") 0 0/48px 48px;mask:url("assets/scuff.png") 0 0/48px 48px;
}
.stamp-keep{left:7%;color:var(--keep);transform:rotate(-12deg) scale(calc(.85 + .15 * var(--k,0)));opacity:var(--k,0)}
.stamp-archive{right:7%;--s:7.8cqw;color:var(--archive);transform:rotate(12deg) scale(calc(.85 + .15 * var(--x,0)));opacity:var(--x,0)}
.print .stamp{transition:opacity .12s linear}

/* the end of the roll, in the app's words */
.deck-end{
  position:absolute;inset:0;z-index:6;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:24px;text-align:center;border-radius:20px;
  background:rgba(255,255,255,.04);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1), inset 0 1.5px 0 rgba(255,255,255,.2);
  animation:end-in .5s var(--ease) both;
}
.deck-end[hidden]{display:none}
.deck-end .cap{color:var(--ice)}
.deck-end-title{margin:4px 0 0;font-size:32px;font-weight:800;letter-spacing:-.03em}
.deck-end-text,.deck-end-note{margin:0;font-size:15px;line-height:1.45;color:var(--on-night-mid);max-width:24ch}
.deck-end-note{margin-top:6px;font-size:14px}
.deck-end .btn-glass{margin-top:14px}
@keyframes end-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}

.btn-glass{
  display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 20px;border:0;border-radius:99px;
  font:inherit;font-size:15px;font-weight:650;color:#fff;cursor:pointer;
  background:rgba(255,255,255,.1);
  box-shadow:inset 0 0 0 .75px rgba(255,255,255,.25), inset 0 1px 0 rgba(255,255,255,.2), 0 10px 24px rgba(0,0,0,.4);
  transition:transform .2s var(--spring), background .2s;
}
.btn-glass svg{width:18px;height:18px;stroke-width:2.2}
.btn-glass:hover{background:rgba(255,255,255,.16)}
.btn-glass:active{transform:scale(.96)}

/* the decisions: archive, undo, keep, as the app's round buttons */
.deck-controls{display:flex;align-items:center;gap:26px}
.round{
  --c:#fff;
  flex:none;display:grid;place-items:center;width:58px;height:58px;padding:0;border-radius:50%;
  color:var(--c);cursor:pointer;
  background:color-mix(in srgb, var(--c) 12%, transparent);
  border:2px solid color-mix(in srgb, var(--c) 75%, transparent);
  box-shadow:0 4px 18px color-mix(in srgb, var(--c) 28%, transparent);
  transition:transform .22s var(--spring), background .2s, opacity .2s;
}
.round svg{width:24px;height:24px;stroke-width:3}
.round-keep{--c:var(--keep)}
.round-archive{--c:var(--archive)}
.round-love{--c:var(--favourite)}
.round-undo{
  width:46px;height:46px;border:0;background:rgba(255,255,255,.09);
  box-shadow:inset 0 0 0 .75px rgba(255,255,255,.25), inset 0 1px 0 rgba(255,255,255,.18), 0 8px 18px rgba(0,0,0,.35);
}
.round-undo svg{width:20px;height:20px;stroke-width:2.2}
button.round:hover{background:color-mix(in srgb, var(--c) 22%, transparent)}
button.round:active{transform:scale(.9)}
button.round:disabled{opacity:.35;cursor:default;transform:none}
.round-undo:disabled{background:rgba(255,255,255,.09)}

/* Kept · To go · Archived, on one frosted strip like the frame counter on a camera */
.tally{
  display:flex;margin:0;padding:4px 6px;border-radius:22px;
  background:rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 .75px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.14), 0 10px 24px rgba(0,0,0,.35);
}
.tally > div{display:flex;flex-direction:column-reverse;align-items:center;justify-content:center;gap:5px;min-width:86px;padding:9px 12px}
.tally > div + div{border-left:.75px solid rgba(255,255,255,.1)}
.tally dt{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--on-night-mid)}
.tally dd{margin:0;font-size:21px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1}
.tally .tally-main dd{font-size:30px;font-weight:800}
.dot{width:5px;height:5px;border-radius:50%}
.dot-keep{background:var(--keep)}
.dot-archive{background:var(--archive)}
.tally dd.is-bumped{animation:bump .35s var(--spring)}
@keyframes bump{40%{transform:scale(1.18)}}

/* ---------- the paper: everything after the hero ---------- */
.paper{
  position:relative;z-index:3;
  background:var(--paper);color:var(--text-dark);
  border-radius:40px 40px 0 0;margin-top:-40px;
  padding-top:clamp(36px,6vh,72px);
  box-shadow:0 -30px 80px rgba(0,0,0,.35);
}
@media (prefers-color-scheme:dark){
  .paper{box-shadow:inset 0 1px 0 rgba(255,255,255,.09), 0 -30px 80px rgba(0,0,0,.5)}
}
.paper .h2{color:var(--text-dark);text-wrap:balance}
.paper .hl{color:var(--accent)}
.paper .body{color:var(--text-mid);font-size:clamp(17px,1.45vw,19px)}
.paper .body a,.card a,.faq-a a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.product .kicker{display:flex;align-items:baseline;gap:12px;font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.14em;color:var(--text-mid)}
.kicker .num{color:var(--accent);font-weight:700}
.product .feature{padding-block:clamp(56px,9vh,110px)}
.product .feature:first-child{padding-top:clamp(30px,5vh,56px)}

/* ---------- the app's screens, drawn: always dark, as the app is ---------- */
.shot{
  position:relative;isolation:isolate;overflow:hidden;
  width:min(100%,360px);padding:18px;border-radius:30px;
  color:#fff;font-size:14px;line-height:1.3;
  background:
    radial-gradient(90% 45% at 15% 0%, color-mix(in srgb, var(--a1) 85%, transparent), transparent 75%),
    radial-gradient(80% 40% at 100% 0%, color-mix(in srgb, var(--a2) 85%, transparent), transparent 75%),
    var(--night);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07), inset 0 1.5px 0 rgba(255,255,255,.16),
             0 40px 80px -20px rgba(6,18,43,.45), 0 12px 24px -8px rgba(6,18,43,.25);
}
@media (prefers-color-scheme:dark){
  .shot{box-shadow:inset 0 0 0 1px rgba(255,255,255,.09), inset 0 1.5px 0 rgba(255,255,255,.18), 0 40px 80px -20px rgba(0,0,0,.7)}
}
.shot img{width:100%;height:100%;object-fit:cover}
.shot .cap{font-size:10px}
.crop-a{transform:scale(1.18) translate(4%,3%)}
.crop-b{transform:scale(1.3) translate(-5%,-2%)}
.crop-c{transform:scale(1.12) translate(-2%,6%)}

/* the bar: back, the title, Later */
.ui-bar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px}
.ui-bar b{text-align:center;font-size:17px;font-weight:700}
.ui-icon,.ui-text{
  display:grid;place-items:center;height:38px;border-radius:99px;
  background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 .75px rgba(255,255,255,.22);
}
.ui-icon{width:38px}
.ui-icon svg{width:18px;height:18px;stroke-width:2.4}
.ui-text{padding:0 14px;font-size:15px;font-weight:600}
.ui-seg{display:grid;grid-template-columns:1fr 1fr;margin:14px 0;padding:2px;border-radius:9px;background:rgba(118,118,128,.24);font-size:13px;font-weight:600}
.ui-seg span{padding:6px 4px;text-align:center;border-radius:7px;color:rgba(255,255,255,.85)}
.ui-seg .is-on{background:#636366;color:#fff;box-shadow:0 3px 8px rgba(0,0,0,.25)}

/* the Archive's grid: ticked to delete, or not */
.ui-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.thumb{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;opacity:.45}
.thumb::before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.thumb::after{
  content:"";position:absolute;top:6px;right:6px;z-index:2;width:20px;height:20px;border-radius:50%;
  background:rgba(0,0,0,.4);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7);
}
.thumb.is-ticked{opacity:1}
.thumb.is-ticked::before{box-shadow:inset 0 0 0 3px var(--archive)}
.thumb.is-ticked::after{
  box-shadow:none;
  background:var(--archive) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat;
}
.ui-delete{
  display:flex;align-items:center;gap:14px;margin-top:16px;padding:13px 22px;border-radius:99px;
  background:linear-gradient(180deg,var(--archive),#d6284a);box-shadow:0 10px 26px -6px rgba(255,84,112,.6);
}
.ui-delete svg{width:24px;height:24px;stroke-width:2.2;flex:none}
.ui-delete b{display:block;font-size:17px;font-weight:700}
.ui-delete small{display:block;font-size:12.5px;font-weight:500;opacity:.85}

/* Home's albums: a section's number over its title, then the tiles */
.ui-head{margin:2px 0 12px;font-size:23px;font-weight:800;letter-spacing:-.02em}
.ui-head + .ui-tiles + .ui-head{margin-top:20px}
.ui-num{display:block;margin-bottom:2px;color:var(--ice)}
.ui-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tile{display:flex;flex-direction:column;gap:3px;min-width:0}
.tile-pic{
  position:relative;display:block;aspect-ratio:.83;border-radius:13px;overflow:hidden;margin-bottom:4px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1), 0 6px 14px rgba(0,0,0,.35);
}
.tile-sym{
  position:absolute;top:6px;right:6px;display:grid;place-items:center;width:23px;height:23px;border-radius:50%;
  background:rgba(20,24,36,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.tile-sym svg{width:12px;height:12px;stroke-width:2.4}
.tile-line{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(0,0,0,.45)}
.tile-line::after{content:"";position:absolute;inset:0 auto 0 0;width:calc(var(--f) * 100%);background:var(--glacier)}
.tile-line.is-done::after{background:var(--keep)}
.tile b{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .cap{font-size:9px;white-space:nowrap}
.cap-keep{color:var(--keep)}

/* Scroll: a photo to the screen's edges, the rail down its side */
.shot-feed{padding:0;aspect-ratio:9/16;width:min(100%,320px)}
.feed-pic{position:absolute;inset:0;z-index:-1}
.shot-feed::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(5,7,14,.4),transparent 22%,transparent 60%,rgba(5,7,14,.55))}
.ui-switch{
  position:absolute;top:18px;left:50%;transform:translateX(-50%);z-index:1;display:flex;gap:4px;padding:4px;border-radius:99px;
  background:rgba(20,24,36,.5);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 0 0 .75px rgba(255,255,255,.22);
}
.ui-switch-opt{padding:7px 15px;border-radius:99px;font-size:13px;font-weight:650;color:rgba(255,255,255,.72)}
.ui-switch-opt.is-on{background:var(--glacier);color:var(--ink)}
.feed-rail{position:absolute;right:12px;bottom:22px;z-index:1;display:flex;flex-direction:column;gap:11px}
.rail{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10px;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.rail-btn{
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:rgba(20,24,36,.45);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:inset 0 0 0 .75px rgba(255,255,255,.25), 0 4px 10px rgba(0,0,0,.4);
}
.rail-btn svg{width:20px;height:20px;stroke-width:2}
.rail-btn.is-loved{color:var(--favourite)}
.rail-btn.is-loved svg{fill:var(--favourite)}
.rail-archive,.rail-keep{width:48px;height:48px;color:var(--ink)}
.rail-archive svg,.rail-keep svg{stroke-width:3}
.rail-archive{background:var(--archive);box-shadow:0 6px 16px -2px rgba(255,84,112,.6)}
.rail-keep{background:var(--keep);box-shadow:0 6px 16px -2px rgba(52,232,176,.55)}
.feed-date{position:absolute;left:14px;bottom:24px;z-index:1;height:30px;padding:0 12px;font-size:11px}

/* the sorter's card: its details on top, a toast over its foot, the decisions under it */
.shot-card{padding:14px 14px 20px}
.card-pic{position:relative;display:block;aspect-ratio:5/6.2;border-radius:22px;overflow:hidden;container-type:inline-size;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.card-pic .pills{left:12px;top:12px}
.card-pic .pill{height:30px;padding:0 11px;font-size:11px}
.card-pic .pill-pin{width:30px;padding:0}
.card-pic .pill-pin svg{width:14px;height:14px}
.pill.is-picked{box-shadow:inset 0 0 0 1.5px var(--ice), 0 0 16px rgba(127,219,255,.5)}
.card-heart{position:absolute;top:14px;right:14px;color:var(--favourite);filter:drop-shadow(0 1px 4px rgba(0,0,0,.6))}
.card-heart svg{width:24px;height:24px;fill:var(--favourite);stroke-width:1.4}
.toast{
  position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:flex;align-items:center;gap:9px;
  padding:11px 18px;border-radius:99px;white-space:nowrap;font-size:14px;font-weight:650;
  background:rgba(20,24,36,.55);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18), 0 10px 24px rgba(0,0,0,.5);
}
.toast svg{width:18px;height:18px;stroke-width:2.2}
.ui-actions{display:flex;justify-content:center;gap:26px;margin-top:18px}
.ui-actions .round{width:52px;height:52px}
.ui-actions .round-love svg{fill:var(--favourite);stroke:none}

/* ---------- Keepsake Plus ---------- */
.plus{max-width:var(--maxw);margin:0 auto;padding:clamp(56px,9vh,110px) var(--pad)}
.plus-head{max-width:720px;margin:0 auto clamp(30px,5vh,52px);text-align:center}
.plus-head .kicker{justify-content:center}
.plus-head .body{margin-inline:auto;max-width:50ch}
.plus-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:18px}
.plus-item{
  display:flex;flex-direction:column;padding:12px 12px 26px;border-radius:30px;background:var(--card);
  box-shadow:0 0 0 1.5px var(--card-line) inset, 0 16px 40px rgba(6,18,43,.05);
}
.plus-item h3{display:flex;align-items:center;gap:10px;margin:22px 14px 0;font-size:20px;line-height:1.25;letter-spacing:-.015em;font-weight:750;color:var(--text-dark)}
.plus-item h3 svg{width:24px;height:24px;color:var(--accent);flex:none}
.plus-item p{margin:8px 14px 0;font-size:16px;line-height:1.5;color:var(--text-mid)}
.shot-mini{width:100%;height:258px;padding:18px;border-radius:22px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.sim{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.sim-pic{position:relative;aspect-ratio:3/4;border-radius:11px;overflow:hidden;opacity:.6;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.sim-pic.is-best{opacity:1;box-shadow:0 0 0 2.5px var(--keep), 0 0 18px rgba(52,232,176,.45)}
.chip{
  position:absolute;left:50%;bottom:6px;transform:translateX(-50%);white-space:nowrap;
  padding:3px 6px;border-radius:99px;background:var(--glacier);color:var(--ink);
  font-family:var(--mono);font-size:7.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
}
.sim-x{position:absolute;top:5px;right:5px;display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:var(--archive);color:#fff}
.sim-x svg{width:11px;height:11px;stroke-width:3.4}
.ui-glacier{
  align-self:center;padding:11px 22px;border-radius:99px;background:var(--glacier);color:var(--ink);
  font-size:14.5px;font-weight:750;box-shadow:0 8px 22px -4px rgba(91,140,255,.6);
}
.clean{display:grid;gap:8px}
.clean-row{display:flex;align-items:center;gap:11px;padding:7px 10px 7px 7px;border-radius:14px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 .75px rgba(255,255,255,.12)}
.clean-sym{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:rgba(127,219,255,.14);color:var(--ice);flex:none}
.clean-sym svg{width:17px;height:17px;stroke-width:2}
.clean-row b{font-size:14px;font-weight:700}
.clean-row .cap{margin-left:auto;font-size:9.5px;white-space:nowrap}
.shot-up{align-items:center}
.up-card{position:relative;display:block;width:44%;aspect-ratio:5/7;border-radius:14px;overflow:hidden;transform:translateY(-6px);box-shadow:0 0 0 2px var(--ice), 0 0 26px rgba(127,219,255,.4), 0 16px 30px rgba(0,0,0,.5)}
.stamp-up{top:30%;left:50%;color:var(--ice);font-size:12px;transform:translateX(-50%) rotate(-6deg);background:rgba(5,7,14,.35)}
.up-chip{
  display:inline-flex;align-items:center;gap:6px;padding:7px 9px 7px 12px;border-radius:99px;
  font-size:12.5px;font-weight:650;color:var(--ice);
  background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 .75px rgba(255,255,255,.2);
}
.up-chip svg{width:13px;height:13px;stroke-width:2.6}
.badge{margin-left:2px;padding:3px 7px;border-radius:99px;background:var(--glacier);color:var(--ink);font-family:var(--mono);font-size:8.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}

/* ---------- the rest, as cards ---------- */
.more,.trust{max-width:var(--maxw);margin:0 auto;padding:clamp(56px,9vh,110px) var(--pad)}
.more-head,.trust-head{text-align:center;margin-bottom:clamp(28px,4vh,44px)}
.cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px}
.card{
  background:var(--card);border-radius:24px;padding:24px 24px 26px;
  box-shadow:0 0 0 1.5px var(--card-line) inset, 0 16px 40px rgba(6,18,43,.05);
}
.card svg{width:28px;height:28px;color:var(--accent);margin-bottom:14px}
.card h3{margin:0;font-size:19px;line-height:1.25;letter-spacing:-.015em;font-weight:700;color:var(--text-dark)}
.card p{margin:8px 0 0;font-size:16px;line-height:1.5;color:var(--text-mid)}

/* ---------- get it, and the questions ---------- */
.product .cta{background:var(--paper);padding-bottom:clamp(70px,11vh,130px)}
.cta-icon{border-radius:22.5%;filter:drop-shadow(0 14px 26px rgba(44,85,201,.32))}
.cta-name{color:var(--text-dark)}
.get-centre{justify-content:center;flex-wrap:wrap}
.cta .qr p{color:var(--text-mid)}
.cta .facts{color:var(--text-dark)}
.cta .soon{color:var(--text-dark);background:var(--card);box-shadow:inset 0 0 0 1.5px var(--card-line), 0 10px 26px rgba(6,18,43,.06)}
.cta .soon-dot{background:#14b383;box-shadow:0 0 0 4px rgba(20,179,131,.18)}
.product .faq{background:var(--paper)}
.product .faq-q{color:var(--text-dark)}
.product .faq-a p{color:var(--text-mid)}
@media (prefers-color-scheme:dark){
  .product .faq-item,.product .faq-item:last-child{border-color:rgba(255,255,255,.12)}
  .cta-icon{filter:drop-shadow(0 14px 30px rgba(0,0,0,.6))}
  .card,.plus-item{box-shadow:0 0 0 1px var(--card-line) inset, 0 1px 0 rgba(255,255,255,.06) inset}
  .cta .soon{box-shadow:inset 0 0 0 1px var(--card-line)}
  .cta .soon-dot{background:var(--keep)}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr;gap:clamp(40px,7vh,64px)}
  .hero-copy{padding-bottom:0}
  .try{--cw:min(64vw,280px)}
  .shot{margin-inline:auto}
}
@media (max-width:560px){
  .hero .h1{font-size:clamp(38px,11.4vw,52px)}
  .get{flex-wrap:wrap}
  .paper{border-radius:28px 28px 0 0;margin-top:-28px}
  .hero{padding-bottom:calc(28px + 48px)}
  .deck-controls{gap:22px}
  .tally > div{min-width:0;flex:1}
  .tally{width:min(100%,340px)}
  .shot{padding:14px;border-radius:26px}
  .ui-tiles{gap:8px}
}
@media (prefers-reduced-motion:reduce){
  .aurora,.deck-end{animation:none}
  .print{transition:opacity .2s linear}
  .js .print[data-k="1"],.js .print[data-k="2"]{transition:none}
  .tally dd.is-bumped{animation:none}
  .round,.btn-glass{transition:none}
}
@media (forced-colors:active){
  .h1-a,.h1-b{color:CanvasText;background:none}
}