/* Guest finder (find.html, also every /{slug} school page): a light Resend-style skin — white canvas, hairline
   borders, the porcelain blue / gold brand palette, sans-serif type throughout. Loaded last, so it re-points the soi-* tokens that
   site.css reads and flattens the linocut details (stamp shadows, hand-cut radii, grain, display serif). */
:root{
  /* The palette from the brand art: porcelain blue (the board), gold and clay on white. The swatch blue #88AABD
     is too light for text or for white text on it, so buttons and links use a deeper shade of the same hue. */
  --pal-blue:#88AABD;              /* board blue: tiles, tints, decoration */
  --pal-blue-deep:var(--brand,#3D6A84);   /* buttons, links, active: 5.9:1 on white; a school's accent (tenant.js --brand) replaces it */
  --pal-blue-ink:#2F5569;          /* hover / pressed */
  --pal-blue-ink:color-mix(in srgb,var(--pal-blue-deep) 78%,#000);
  --pal-blue-tint:#EDF3F6;
  --pal-blue-tint:color-mix(in srgb,var(--pal-blue-deep) 9%,#fff);
  --pal-gold:#B8964F;              /* decorative only (2.7:1) */
  --pal-gold-tint:#F7F1E4;
  --pal-gold-ink:#7A5F30;          /* gold as text on the gold tint: 5.6:1 */
  --pal-clay:#B48A6A;              /* decorative only */
  --soi-terracotta:var(--pal-blue-deep);
  --soi-terracotta-deep:var(--pal-blue-ink);
  --soi-terracotta-tint:var(--pal-blue-tint);
  --soi-slate:var(--pal-blue);
  --soi-slate-deep:var(--pal-blue-deep);
  --soi-slate-ink:var(--pal-blue-ink);
  --soi-slate-tint:var(--pal-blue-tint);
  --soi-ochre:var(--pal-gold);
  --soi-ochre-deep:var(--pal-gold-ink);
  --soi-sand:#E3E8EC;
  --soi-sand-deep:#E3E8EC;
  --soi-canvas:#FFFFFF;
  --soi-linen:#F7F9FA;
  --soi-surface:#FFFFFF;
  --soi-umber:#14232D;
  --soi-umber-soft:#56646E;
  --soi-coral:var(--pal-blue-deep);
  --soi-coral-deep:var(--pal-blue-deep);
  --soi-coral-ink:var(--pal-blue-deep);
  --soi-coral-tint:var(--pal-blue-tint);
  --soi-dusk:#14232D;
  --line:#E3E8EC; --line-soft:#EEF2F4;
  --display:var(--sans);
  --r-sm:8px; --r-lg:12px;   /* Branding → corners: html[data-corners] below */
  --radius-organic:var(--r-lg);
  --radius-organic-sm:var(--r-sm);
  --radius-card:var(--r-lg); --radius-btn:var(--r-sm); --radius-input:var(--r-sm);
  --serif:'Fraunces','Fraunces Fallback',Georgia,serif;
  --stamp-ink:transparent;
  --soi-grain-opacity:0;
  --shadow-card:0 1px 2px rgba(20,35,45,.04);
  --shadow-card-hover:0 1px 2px rgba(20,35,45,.06),0 8px 24px -12px rgba(20,35,45,.14);
  --ring:0 0 0 4px var(--pal-blue-tint);
}
body{background:var(--soi-canvas);color:var(--soi-umber)}
body::before,body::after{display:none}

/* Type: one family, tight headings, no italics or hand-drawn underlines */
h1,h2{font-family:var(--sans);font-weight:600;letter-spacing:-.025em}
h1{font-size:clamp(36px,5vw,60px);line-height:1.05}
h2{font-size:clamp(28px,3.2vw,40px);line-height:1.1}
h3{font-weight:600;letter-spacing:-.01em}
h1 em,h2 em{font-style:normal;color:inherit}
.eyebrow{font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--soi-terracotta)}
.soi-underline{background:none!important}
.soi-underline svg,.soi-splash{display:none!important}

/* Header */
.header{background:color-mix(in srgb,var(--soi-canvas) 90%,transparent);border-bottom:1px solid var(--line);box-shadow:none;padding:14px 5%}
.header.is-scrolled{box-shadow:none;border-color:var(--line)}
.brand{font-size:15px;font-weight:600;letter-spacing:-.01em}
.brand img{width:32px;height:32px;border-radius:var(--r-sm)}
.brand small{font-size:12px;letter-spacing:0;font-weight:400;text-transform:none;margin-top:2px;color:var(--soi-umber-soft);opacity:1}
nav a{font-weight:500;font-size:14px;color:var(--soi-umber-soft);opacity:1}
nav a:hover{color:var(--soi-umber)}
nav a:not(.nav-cta)::after{display:none}

/* Buttons: flat, no stamp shadow */
.button,.nav-cta{border-radius:var(--r-sm);padding:12px 18px;font-weight:500;font-size:14px;gap:8px;box-shadow:none}
.nav-cta{padding:9px 14px;color:#fff!important}
.button:hover,.nav-cta:hover{box-shadow:none;transform:none}
.button:active,.nav-cta:active{box-shadow:none}
.button:disabled{background:var(--line-soft);color:var(--soi-umber-soft)}
.text-button{color:var(--soi-terracotta);font-weight:500;font-size:14px}
.filter-button,.share-button{border-radius:var(--r-sm);box-shadow:none;border-color:var(--line);font-weight:500;font-size:14px}
.filter-button:hover,.share-button:hover{background:var(--soi-linen)}
.filter-button:active,.share-button:active{box-shadow:none}
.filter-button[aria-pressed=true]{background:var(--soi-terracotta);border-color:var(--soi-terracotta)}

/* Hero: short centred intro; the recent sessions sit straight under it */
.hero{background:linear-gradient(180deg,var(--pal-blue-tint) 0%,var(--soi-canvas) 100%);padding:88px 5% 64px;border-bottom:1px solid var(--line)}
.hero .hero-copy{max-width:720px}
.hero h1{margin:14px 0 18px;color:var(--soi-umber)}
.hero .intro{font-size:17px;line-height:1.6;color:var(--soi-umber-soft);max-width:520px;margin:0}
.hero-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:18px;margin-top:32px}
.hero .button{margin-top:0}
.hero .eyebrow{display:inline-block;padding:4px 10px;border-radius:999px;background:var(--pal-gold-tint);color:var(--pal-gold-ink)}

/* Sections */
.section{padding:96px 5%}
.section-title{margin-bottom:48px}
.section-title>p{font-size:15px;max-width:360px}
.section-copy>p:not(.eyebrow){font-size:16px}
.privacy-note{border-top-color:var(--line);margin-top:32px}
.privacy-note strong{font-size:14px;font-weight:600}
.privacy-note p{font-size:13px}

/* Finder card */
.finder-card{border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-card-hover);padding:32px}
.finder-card:focus-within{border-color:var(--pal-blue)}
.steps{border-bottom-color:var(--line)}
.steps li{font-size:13px}
.steps li.active::after{height:2px;background:var(--soi-terracotta)}
.finder-card h3{font-size:20px}
.finder-card p:not(.eyebrow){font-size:14px}
.finder-card .selected-session{border-left-width:2px;border-radius:0 6px 6px 0}
.session-choice{border-radius:var(--r-sm)}
.session-date{border-radius:var(--r-sm)}
.upload-zone{border-radius:var(--r-sm)}
.upload-zone:has(img:not([hidden])){border:1px dashed var(--pal-blue);border-radius:var(--r-lg)}
.surf-calendar,.cal-nav{border-color:var(--line)}
.soi-loader .fin{fill:var(--soi-terracotta)}

/* How it works: white cards instead of the blue band */
.how{background:var(--soi-linen);color:var(--soi-umber);max-width:none;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.how>*{max-width:1152px;margin-left:auto;margin-right:auto}
.how .section-title>p,.how-grid p{color:var(--soi-umber-soft)}
.how-grid{gap:16px;margin-top:0}
.how-grid article,.how-grid article:nth-child(2),.how-grid article:nth-child(3){margin-top:0;background:var(--soi-surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px}
.how-grid article:hover,.how-grid article:hover .step-number{transform:none}
.how-grid h3{color:var(--soi-umber);font-size:18px;margin:16px 0 8px}
.how-grid p{font-size:14px;line-height:1.6}
.how .step-number{font:500 13px var(--sans);color:var(--pal-gold-ink);background:var(--pal-gold-tint);border-radius:6px;padding:4px 8px;display:inline-block}

/* Pricing */
.pricing-card{border-radius:var(--r-lg);border-color:var(--line);box-shadow:var(--shadow-card);padding:32px}
.pricing-card:hover{border-color:var(--line)}
.pricing-card h3{font-size:16px;font-weight:500;color:var(--soi-umber-soft)}
.pricing-amount{font:600 40px/1.2 var(--sans);letter-spacing:-.02em;color:var(--soi-umber)}
.pricing-amount span:first-child{font:inherit;color:inherit;letter-spacing:inherit}
.pricing-card ul{list-style:none;padding:20px 0 0;margin:20px 0 24px;border-top:1px solid var(--line);font-size:14px;line-height:2.1;color:var(--soi-umber)}
.pricing-card li::before{content:'✓';color:var(--soi-terracotta);margin-right:10px;font-weight:600}
.pricing-card .button{width:100%}

/* Recent sessions: first thing under the hero; a plain grid, tinted tile when there is no cover yet */
.sessions{padding-top:72px}
.session-grid>:nth-child(3n+2){margin-top:0}
.session-card{display:block;width:100%;cursor:pointer}
.session-card img{height:200px;border-radius:var(--r-lg);border:1px solid var(--line)}
.session-card:hover img{border-color:var(--pal-blue)}
.session-card.no-cover img{display:none}
.session-card.no-cover::before{content:'';display:block;height:200px;border-radius:var(--r-lg);border:1px solid var(--line);background:linear-gradient(160deg,var(--pal-blue-tint) 0%,#DCE7ED 55%,var(--pal-gold-tint) 100%)}
.session-card.no-cover:hover::before{border-color:var(--pal-blue)}
.session-card small{letter-spacing:0;font-weight:500;color:var(--soi-umber-soft);margin-top:14px}
.session-card h3{font-size:17px;margin:6px 0 4px}
.session-card p{margin:0}

/* Privacy */
.privacy{border-top-color:var(--line)}
.privacy p:not(.eyebrow){font-size:14px}

/* Results, notices, cards */
.results h1{font-size:clamp(30px,4vw,40px)}
.notice{background:var(--soi-linen);border:1px solid var(--line);border-left:1px solid var(--line);border-radius:var(--r-sm)}
.chance-card{border:1px solid var(--line);border-radius:var(--r-lg)}
.hue-swatch::before{box-shadow:none;border:1px solid #14232D14}
.tone-toggle label{border-radius:var(--r-sm);background:var(--soi-surface)}
.tone-toggle label:has(input:checked){background:var(--soi-terracotta);border-color:var(--soi-terracotta)}
.soi-empty svg{display:none}
.soi-empty strong{font:600 20px/1.2 var(--sans);letter-spacing:-.01em}
dialog{border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 24px 60px -20px rgba(20,35,45,.3)}
dialog::backdrop{background:#14232D99}
dialog#lightbox{background:#14232D;color:#E8EEF1}

/* Footer: light, hairline top border */
footer{background:var(--soi-canvas);color:var(--soi-umber-soft);border-top:1px solid var(--line);padding:32px 5%}
footer::before{display:none}
footer .brand{color:var(--soi-umber)}
footer a{opacity:1;font-size:13px}
footer a:not(.brand):hover{color:var(--soi-umber)}
footer a:not(.brand)::after{display:none}

/* Gallery: masonry rows (app.js spans each print over as many 4px rows as it is tall), no holes, order kept */
.gallery.is-masonry{grid-auto-rows:4px;row-gap:0;--tile-gap:18px}
.photo-open{border-radius:var(--r-lg)}
.favourite{box-shadow:0 1px 3px rgba(20,35,45,.18)}
.gallery figcaption{letter-spacing:.02em}

/* ── Branding tab (tenant.js sets these on <html> from the school's theme, migration 0028) ─────────────────── */
/* corners */
html[data-corners=sharp]{--r-sm:2px;--r-lg:4px}
html[data-corners=pill]{--r-sm:14px;--r-lg:22px}
html[data-corners=pill] :is(.button,.nav-cta,.filter-button,.share-button,.tone-toggle label,.cal-nav,.hero .eyebrow){border-radius:999px}
html[data-corners=pill] .photo-open,html[data-corners=pill] .session-card img,html[data-corners=pill] .session-card.no-cover::before{border-radius:22px}
/* heading font */
html[data-font=serif] :is(h1,h2,h3,.pricing-amount){font-family:var(--serif);font-weight:500;letter-spacing:-.01em}
/* page background */
html[data-bg=tint]{--soi-canvas:color-mix(in srgb,var(--pal-blue-deep) 5%,#fff);--soi-linen:color-mix(in srgb,var(--pal-blue-deep) 9%,#fff)}
html[data-bg=cream]{--soi-canvas:#FBF7EF;--soi-linen:#F4EEE2;--line:#E8DFCF;--line-soft:#EFE8DA;--soi-umber:#2B2018;--soi-umber-soft:#62564A}
html[data-bg=dark]{
  --soi-canvas:#0E1419;--soi-surface:#151D24;--soi-linen:#121A20;--line:#26323C;--line-soft:#1D2830;
  --soi-umber:#E9EEF2;--soi-umber-soft:#9DAEBA;--pal-gold-tint:#2A2517;--pal-gold-ink:#E2C78A;
  --pal-blue-tint:color-mix(in srgb,var(--pal-blue-deep) 22%,#0E1419);
  --soi-terracotta-tint:var(--pal-blue-tint);
  --pal-link:color-mix(in srgb,var(--pal-blue-deep) 45%,#fff);
  color-scheme:dark;
}
html[data-bg=dark] :is(.text-button,.eyebrow,.privacy a,.privacy-note a,.consent a,.pricing-card li::before,.session-helper,.steps li.active){color:var(--pal-link)}
html[data-bg=dark] .brand img[src$="soi-logo.svg"]{background:#F2ECDB}
html[data-bg=dark] .session-card.no-cover::before{background:linear-gradient(160deg,#1B2A35 0%,#22323E 55%,#2A2517 100%)}
html[data-bg=dark] .nav-toggle span{background:var(--soi-umber)}
/* banner photo behind the header, darkened so the headline stays readable */
.hero.has-banner{background:linear-gradient(180deg,rgba(8,14,20,.45),rgba(8,14,20,.7)),var(--hero-img) center/cover no-repeat;border-bottom:0;padding-top:120px;padding-bottom:104px}
.hero.has-banner :is(h1,.intro){color:#fff}
.hero.has-banner .intro{color:#FFFFFFD9}
.hero.has-banner .text-button{color:#fff}
.hero.has-banner .eyebrow{background:#FFFFFF26;color:#fff}
/* sections the school turned off, and their menu links */
.section[hidden],nav a[hidden],footer a[hidden]{display:none!important}
/* recent sessions: 3, 6 (default) or 9 */
.session-grid>:nth-child(n+7){display:none}
html[data-sessions="3"] .session-grid>:nth-child(n+4){display:none}
html[data-sessions="9"] .session-grid>:nth-child(n+7){display:block}
/* the school's contact links and thank-you note */
.footer-contact{display:flex;flex-wrap:wrap;gap:4px 14px;width:100%;font-size:13px}
.footer-contact[hidden]{display:none}
.footer-contact a{color:var(--soi-umber);font-weight:500}
.thank-you{display:block;margin-top:8px;font-weight:500}
.thank-you[hidden]{display:none}

/* ── Motion ──────────────────────────────────────────────────────────────────────────────────────────────
   Every animation below moves only transform and opacity, which the compositor runs on its own thread at the
   display's refresh rate (120 Hz on ProMotion / high-refresh phones), never waiting on layout or paint. */
:root{--ease-press:cubic-bezier(.2,.8,.2,1);--ease-pop:cubic-bezier(.34,1.56,.64,1)}
html{-webkit-tap-highlight-color:transparent}
:is(button,.button,a.nav-cta,.session-card,.session-choice,.photo-open,.cal-day,.tone-toggle label,.hue-swatch){touch-action:manipulation}
:is(.button,.nav-cta,.text-button,.filter-button,.share-button,.session-choice,.session-card,.cal-day,.cal-nav,.tone-toggle label,.hide-photo,.pricing-card .button){transition:transform 200ms var(--ease-press),background-color 160ms,border-color 160ms,color 160ms}
:is(.button,.nav-cta,.filter-button,.share-button,.cal-nav,.tone-toggle label):active{transform:scale(.96);transition-duration:90ms}
:is(.text-button,.hide-photo):active{transform:scale(.94);transition-duration:90ms}
.session-choice:active,.session-card:active{transform:scale(.985);transition-duration:90ms}
.cal-day:active{transform:scale(.9);transition-duration:90ms}
.photo-open{transition:transform 200ms var(--ease-press)}
.photo-open:active{transform:scale(.97);transition-duration:90ms}
.photo-open.is-locked{cursor:default}.photo-open.is-locked:active{transform:none}
.favourite{transition:transform 200ms var(--ease-press)}
.favourite:active{transform:scale(.86);transition-duration:90ms}
.button:disabled:active{transform:none}

/* pops: the heart when it is set, the tick on the chosen session, the chosen calendar day */
@keyframes soi-pop{0%{transform:scale(.6)}60%{transform:scale(1.18)}100%{transform:scale(1)}}
.favourite[aria-pressed=true]{animation:soi-pop 360ms var(--ease-pop)}
.session-choice:has(input:checked) .session-check{animation:soi-pop 320ms var(--ease-pop)}
.cal-day[aria-pressed=true]{animation:soi-pop 300ms var(--ease-pop)}

/* prints fade and settle in as they decode; stages of the finder card slide in */
.photo-open img{transition:opacity 320ms var(--ease-press),transform 480ms var(--ease-press)}
figure.is-loading .photo-open img{opacity:0;transform:scale(1.04)}
@keyframes soi-stage-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
:is(#sessionStage,#selfieStage,#matchingStage):not([hidden]){animation:soi-stage-in 260ms var(--ease-press)}
@keyframes soi-fade-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.hero-copy>*{animation:soi-fade-up 520ms var(--ease-press) both}
.hero-copy>:nth-child(2){animation-delay:60ms}.hero-copy>:nth-child(3){animation-delay:120ms}.hero-copy>:nth-child(4){animation-delay:180ms}
.hero .button span,.text-button{transition:transform 200ms var(--ease-press)}

/* scroll: a thin progress line and prints that rise into view, both driven by the scroll position itself */
.reading-progress{display:block;height:2px;background:var(--pal-blue-deep);z-index:40}
@supports (animation-timeline:scroll()){
  @keyframes soi-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  .reading-progress{animation:soi-grow linear both;animation-timeline:scroll(root)}
  @keyframes soi-rise{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
  .gallery figure,.pricing-card{animation:soi-rise linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:0s!important}
  .reading-progress{display:none}
}

@media(max-width:760px){
  .gallery.is-masonry{--tile-gap:14px}
  .gallery figcaption{font-size:10.5px;letter-spacing:0}
  .gallery figcaption span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .hero{padding:56px 16px 44px}
  .session-grid{grid-template-columns:1fr}
  .how-grid{grid-template-columns:1fr}
  .section{padding:64px 16px}
  .finder-card{padding:22px}
}

/* Multi-date packs. Picked days are filled with a ✓; the day being looked at only gets a ring. */
.pack-lead{font-size:16px;color:var(--soi-umber)}
.pack-lead strong{color:var(--soi-slate-deep)}
.cal-day.has-photos[aria-pressed="true"]:not(.is-picked){background:transparent;color:var(--soi-umber);box-shadow:inset 0 0 0 2px var(--soi-slate-deep)}
.cal-day.has-photos[aria-pressed="true"]:not(.is-picked)::after{background:var(--soi-slate-deep)}
.cal-day.has-photos.is-picked{position:relative;background:var(--soi-slate-deep);color:#fff;font-weight:700}
.cal-day.has-photos.is-picked::after{background:#fff}
.cal-day.has-photos.is-picked{overflow:visible}
.cal-day.has-photos.is-picked::before{content:'✓';position:absolute;top:-6px;right:-6px;display:grid;place-items:center;width:18px;height:18px;border-radius:999px;background:#fff;color:var(--soi-slate-deep);box-shadow:0 0 0 2px var(--soi-slate-deep);font-size:11px;line-height:1;font-weight:800}
.pack-hint{margin:2px 0 10px;font-size:14px;color:var(--soi-umber-soft)}
.pack-hint:empty{display:none}
.pack-tray{margin:16px 0 12px;padding:14px 16px;border-radius:var(--r-lg,16px);background:var(--soi-slate-tint);border:1px solid color-mix(in srgb,var(--soi-slate-deep) 25%,transparent)}
.pack-tray-label{margin:0 0 8px;font:700 12px/1 var(--sans,system-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--soi-slate-deep)}
.pack-chips{display:flex;flex-wrap:wrap;gap:8px}
.pack-chip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:6px 8px 6px 14px;border-radius:999px;border:0;background:var(--soi-slate-deep);color:#fff;font:600 15px/1 var(--sans,system-ui);cursor:pointer}
.pack-chip-x{display:grid;place-items:center;width:24px;height:24px;border-radius:999px;background:rgba(255,255,255,.2);font-size:16px;line-height:1}
.pack-chip:active{transform:scale(.96)}
.pack-more{margin:10px 0 0;font-size:14px;color:var(--soi-umber-soft)}

/* The no-match hand-search offer, as a pop-up (helpDialog). */
.help-dialog{width:min(460px,92vw);padding:28px 24px 22px;text-align:left}
.help-dialog::backdrop{background:rgba(20,35,45,.55)}
.help-dialog .help-form{display:flex;flex-direction:column;gap:8px}
.help-dialog h3{margin:0 0 4px;font-size:24px}
.help-dialog p{margin:0 0 8px}
.help-dialog .button{margin-top:8px}
.help-dialog .text-button{align-self:center;margin-top:4px}
.help-close{position:absolute;right:10px;top:8px;width:44px;height:44px;border:0;border-radius:50%;background:transparent;font-size:26px;line-height:1;color:var(--soi-umber-soft)}
#openHelp{margin-top:8px}

/* Searching: a bundle of session photos flicked through one by one while a lens with a face in it looks over them. */
.bundle{position:relative;width:200px;height:140px;margin:28px auto 6px}
.bundle-card{position:absolute;left:46px;top:30px;width:108px;height:78px;border-radius:8px;border:3px solid #fff;
  background:linear-gradient(180deg,#9ccfdd 0 42%,#4b8fae 42% 68%,#ead9b6 68%);
  box-shadow:0 8px 18px -6px rgba(20,35,45,.35);transform:rotate(var(--r));transform-origin:50% 100%;
  animation:bundle-flick 1.5s cubic-bezier(.3,.7,.3,1) infinite;animation-delay:calc(var(--i) * .3s)}
.bundle-card::after{content:'';position:absolute;left:44%;top:40%;width:9px;height:14px;border-radius:5px 5px 2px 2px;background:#1f3a48;box-shadow:22px 4px 0 -1px #1f3a48}
.bundle-card:nth-child(2){background:linear-gradient(180deg,#b7dde6 0 38%,#3f86a8 38% 72%,#e4cfa3 72%)}
.bundle-card:nth-child(3){background:linear-gradient(180deg,#f2c89a 0 36%,#5a93ad 36% 70%,#ead9b6 70%)}
.bundle-card:nth-child(4){background:linear-gradient(180deg,#a9d3e0 0 46%,#357897 46% 74%,#e7d3ac 74%)}
.bundle-lens{position:absolute;left:18px;top:6px;width:58px;height:58px;border-radius:50%;border:5px solid var(--soi-slate-deep);background:rgba(255,255,255,.35);
  backdrop-filter:blur(1px);box-shadow:0 10px 24px -8px rgba(20,35,45,.45);animation:bundle-lens 2.4s ease-in-out infinite;z-index:6}
.bundle-lens::after{content:'';position:absolute;right:-17px;bottom:-15px;width:22px;height:7px;border-radius:4px;background:var(--soi-slate-deep);transform:rotate(45deg)}
.bundle-face{position:absolute;left:50%;top:50%;width:20px;height:24px;margin:-12px 0 0 -10px;border:2.5px solid var(--soi-slate-deep);border-radius:50% 50% 46% 46%}
.bundle-face::after{content:'';position:absolute;left:3px;right:3px;top:7px;height:3px;border-left:3px solid var(--soi-slate-deep);border-right:3px solid var(--soi-slate-deep);box-sizing:border-box}
@keyframes bundle-flick{0%,62%,100%{transform:translateY(0) rotate(var(--r))}14%{transform:translateY(-26px) rotate(calc(var(--r) - 10deg))}30%{transform:translateY(4px) rotate(var(--r))}}
@keyframes bundle-lens{0%,100%{transform:translate(0,4px)}50%{transform:translate(104px,-4px)}}
@media (prefers-reduced-motion:reduce){.bundle-card,.bundle-lens{animation:none}}

/* Always under the search card: a WhatsApp line for anyone who can't find their photo. */
.wa-help{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--line,#e6ecf0);text-align:center;font-size:14px;color:var(--soi-umber-soft)}
.wa-help a{display:inline-flex;align-items:center;gap:6px;margin-left:4px;font-weight:700;color:#0B6B37;text-decoration:none}
.wa-help a:hover{text-decoration:underline}
.wa-help svg{width:18px;height:18px;fill:currentColor}

/* Under the gallery: the hand-search offer for guests who think the selfie search missed some of their waves. */
.more-help{margin:28px 0 8px;padding:20px 16px;border-top:1px solid var(--line,#e6ecf0);text-align:center}
.more-help p{margin:0 auto 14px;max-width:46ch;font-size:15px;color:var(--soi-umber-soft)}
.more-help p strong{display:block;margin-bottom:4px;font-size:17px;color:var(--ink)}
.more-help .button{width:auto;max-width:100%}

/* Returning buyers: every paid pack on this device, and "Already paid?" on a new phone or browser (number + selfie). */
.resume-list{display:flex;flex-wrap:wrap;gap:8px}
.resume-list .resume-pack{padding:11px 16px;font-size:13px}
.recover{margin:0 0 20px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--soi-surface)}
.recover summary{cursor:pointer;padding:13px 16px;font-size:14px;color:var(--soi-umber);list-style:none}
.recover summary::-webkit-details-marker{display:none}
.recover summary strong{color:var(--soi-terracotta)}
.recover summary::after{content:"→";float:right;color:var(--soi-umber-soft)}
.recover[open] summary::after{content:"×"}
.recover-body{display:grid;gap:10px;padding:0 16px 16px}
.recover-body>p{margin:0;font-size:13px;line-height:1.6;color:var(--soi-umber-soft)}
.recover-body label[for=recoverPhone]{font-size:13px;font-weight:600}
.recover-body input[type=tel]{width:100%;font-size:16px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-input);background:var(--soi-canvas);color:var(--soi-umber)}
.recover-selfie{min-height:120px}
.recover-selfie img{max-height:160px;border-radius:var(--r-sm)}
.recover-body .status{margin:0}

/* Saving a paid pack: pick the device, each one saves its own way. */
.save-device{display:grid;gap:10px;margin:18px 0 8px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--soi-linen)}
.save-device-label{margin:0;font-size:14px;font-weight:600;color:var(--soi-umber)}
.save-device-options{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.save-device-options button{min-height:44px;padding:8px 6px;font:inherit;font-size:13px;font-weight:600;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--soi-surface);color:var(--soi-umber);cursor:pointer}
.save-device-options button[aria-checked=true]{border-color:var(--soi-slate-deep);background:var(--soi-slate-tint);color:var(--soi-slate-ink);box-shadow:inset 0 0 0 1px var(--soi-slate-deep)}
.save-device-help{margin:0;font-size:12px;line-height:1.6;color:var(--soi-umber-soft)}
.save-device .button{justify-self:start}
.save-progress{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 12px;font-size:13px;color:var(--soi-umber)}
.save-progress p{flex:1 1 100%;margin:0}
.inapp-notice{display:grid;gap:10px;margin:14px 0;padding:14px 16px;border:1px solid var(--soi-ochre);border-radius:var(--r-sm);background:color-mix(in srgb,var(--soi-ochre) 12%,var(--soi-surface));font-size:13px;line-height:1.6;color:var(--soi-umber)}
.inapp-notice p{margin:0}
.inapp-actions{display:flex;flex-wrap:wrap;gap:8px}
.inapp-actions .button{padding:11px 16px;font-size:13px}