/* Petclip ("together"), design system v2: the "photo album" register of the Petclip / Pet Plus Us tokens
   (reports_together/DESIGN_v2.md). Fonts are self-hosted WOFF2 subsets with metric-matched fallbacks. No inline
   styles anywhere (CSP style-src 'self'). Content-page contract kept: .wrap .narrow .prose .site-head .wordmark
   .site-foot .btn .btn-quiet .muted .card .label .note .pc-icon */

@font-face{font-family:"Anton";src:url(../fonts/Anton-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(../fonts/InstrumentSerif-Italic.woff2) format("woff2");font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:"Archivo";src:url(../fonts/Archivo-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Archivo";src:url(../fonts/Archivo-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(../fonts/IBMPlexMono-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
/* fallbacks sized to the real fonts (fontTools widths and vertical metrics, 18.10): no jump when the fonts land */
@font-face{font-family:"Anton Fb";src:local("Impact"),local("Arial Narrow Bold");size-adjust:100.5%;ascent-override:117%;descent-override:33%;line-gap-override:0%}
@font-face{font-family:"Instrument Fb";src:local("Georgia Italic"),local("Georgia-Italic"),local("Times New Roman Italic");font-style:italic;size-adjust:78%;ascent-override:127%;descent-override:40%;line-gap-override:0%}
@font-face{font-family:"Archivo Fb";src:local("Arial"),local("ArialMT"),local("Helvetica");font-weight:400;size-adjust:97.8%;ascent-override:90%;descent-override:21.5%;line-gap-override:0%}
@font-face{font-family:"Archivo Fb";src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Bold");font-weight:600;size-adjust:94%;ascent-override:93%;descent-override:22%;line-gap-override:0%}
@font-face{font-family:"Plex Fb";src:local("Courier New"),local("CourierNewPSMT");size-adjust:100%;ascent-override:102.5%;descent-override:27.5%;line-gap-override:0%}

:root{
--cream:#FFF8E9;--paper:#FFFDF7;--sand:#F5EFDF;--lavender:#E5DFF5;--lavender-deep:#D0C3E5;--kraft:#E6D3AE;
--ink:#29231C;--muted:#6B6256;--line:#D5CCBA;--dash:#8A7F70;--photo-line:#E3DAC9;--lime:#E7F36B;--danger:#B3261E;
--scrim:rgba(41,35,28,.55);--accent:var(--lime);
--display:"Anton","Anton Fb",Impact,"Arial Narrow",sans-serif;
--serif:"Instrument Serif","Instrument Fb",serif;
--sans:"Archivo","Archivo Fb",Arial,sans-serif;
--mono:"IBM Plex Mono","Plex Fb",ui-monospace,Menlo,monospace;
--g:16px;--sec:64px;--gl:max(var(--g),env(safe-area-inset-left));--gr:max(var(--g),env(safe-area-inset-right));
--safe-b:env(safe-area-inset-bottom);--edge:12px;
--r-btn:8px;--r-card:12px;--r-chip:10px;--r-sheet:16px;--r-photo:4px;--r-pol:2px;
--b:1.5px solid var(--ink);--b-soft:1px solid var(--line);--b-ctl:1.5px solid var(--dash);--b-photo:1px solid var(--photo-line);
--shadow-cta:4px 5px 0 var(--ink);
--shadow-photo:0 1px 2px rgba(41,35,28,.06),1px 3px 8px rgba(41,35,28,.09);
--shadow-photo-l:0 2px 4px rgba(41,35,28,.07),2px 5px 12px rgba(41,35,28,.11);
--shadow-card:0 1px 2px rgba(41,35,28,.05),0 4px 14px rgba(41,35,28,.07);
--shadow-bar:0 -6px 18px rgba(41,35,28,.10);--shadow-sheet:0 -10px 30px rgba(41,35,28,.16);
--z-bar:20;--z-consent:30;--z-scrim:40;--z-sheet:41;--z-viewer:50;--z-toast:60;
--t-press:80ms;--t-ui:160ms;--t-sheet:240ms;--t-develop:700ms;--ease:cubic-bezier(.2,.8,.2,1);
color-scheme:light;
}
@media (min-width:600px){:root{--g:24px}}

/* ------------------------------------------------------------ base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:16px;background:var(--cream)}
body{margin:0;min-height:100dvh;display:flex;flex-direction:column;background:var(--cream);color:var(--ink);font:400 17px/1.47 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
body>main{flex:1 0 auto}
img,video,svg,picture{display:block;max-width:100%}
img{color:transparent}
a{color:inherit;text-decoration-color:currentColor;text-decoration-thickness:1.5px;text-underline-offset:3px}
p{margin:0 0 1em}
h1,h2,h3,h4{margin:0;font-weight:400}
ul,ol{margin:0;padding:0}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
strong,b{font-weight:600}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:4px}
[tabindex="-1"]:focus{outline:none}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-80px;z-index:70;background:var(--lime);border:var(--b);padding:12px 16px;border-radius:8px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}
.ico{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ico-s{width:20px;height:20px}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 var(--gr) 0 var(--gl)}
.narrow{max-width:668px}
.wrap.narrow{max-width:calc(620px + 2*var(--g))}
.center{text-align:center}

/* ------------------------------------------------------------ type */
.h1,.h2,.h1-hero,.prose h1{font:400 34px/36px var(--display);letter-spacing:-.01em;text-wrap:balance}
.h1 em,.h2 em,.h1-hero em,.prose h1 em{display:block;font:italic 400 36px/38px var(--serif);letter-spacing:-.005em}
.h1-hero{font-size:clamp(34px,10.4vw,40px);line-height:1.05;letter-spacing:-.02em}
.h1-hero em{font-size:clamp(36px,10.8vw,42px);line-height:1}
.h2{font-size:30px;line-height:32px}
.h2 em{font-size:32px;line-height:34px}
.h1-one{font:400 30px/34px var(--display);letter-spacing:-.01em}
.h3{font:600 17px/22px var(--sans)}
.lead{font-size:17px;line-height:24px;margin:8px 0 0;max-width:36em}
.small,.note{font-size:15px;line-height:21px}
.muted{color:var(--muted)}
.label,.kicker{display:inline-block;font:500 13px/16px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.kicker{color:var(--muted);margin:0 0 12px}
.serif{font:italic 400 20px/22px var(--serif)}
.num{font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------ buttons, links, chips */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 22px;border:var(--b);border-radius:var(--r-btn);background:var(--lime);color:var(--ink);font:600 18px/22px var(--sans);text-align:center;text-decoration:none;box-shadow:var(--shadow-cta);cursor:pointer;transition:transform var(--t-press),box-shadow var(--t-press);-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.btn:active{transform:translate(4px,5px);box-shadow:0 0 0 var(--ink)}
.btn .ico{width:20px;height:20px}
.btn-block{display:flex;width:100%}
.btn-2,.btn-quiet{min-height:48px;background:var(--paper);box-shadow:none;font-size:17px}
.btn-2:active,.btn-quiet:active{transform:translateY(1px);box-shadow:none}
.btn-small{min-height:48px;padding:0 16px;font-size:16px}
.btn[disabled],.btn[aria-busy="true"]{cursor:default}
.btn[aria-busy="true"]::after{content:"";width:18px;height:18px;border:2px solid var(--ink);border-right-color:transparent;border-radius:50%;animation:spin .8s linear infinite;flex:none}
@media (hover:hover) and (pointer:fine){.btn:hover{box-shadow:5px 7px 0 var(--ink)}.btn:active{box-shadow:0 0 0 var(--ink)}.btn-2:hover,.btn-quiet:hover{box-shadow:none;background:#fff}}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.btn-pair .btn{padding:0 10px;font-size:16px}
.link,.link-btn{display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:0;margin:0;border:0;background:none;color:var(--ink);font:inherit;text-align:left;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.link-s{font-size:15px}
.icon-btn{display:inline-grid;place-items:center;width:48px;height:48px;flex:none;padding:0;border:0;border-radius:50%;background:var(--paper);box-shadow:var(--shadow-card);color:var(--ink);cursor:pointer}
.icon-btn.plain{background:none;box-shadow:none}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 16px;border:var(--b-ctl);border-radius:var(--r-chip);background:var(--paper);color:var(--ink);font:400 17px/1.2 var(--sans);text-align:left;cursor:pointer;transition:background var(--t-ui),color var(--t-ui)}
.chip[aria-pressed="true"],.chip[aria-checked="true"],.chip.is-on{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.chip .ico{width:16px;height:16px}
/* the ears editor (review 21.10): a drawing next to each choice, their photos at the top */
.chip-ear{padding:0 14px 0 10px}
.ear-glyph{width:40px;height:32px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.chip-ear .q{width:26px;height:26px;margin:0 3px}
.ear-photos{display:flex;gap:8px;margin:4px 0 12px;padding:0;list-style:none}
.ear-photos li{width:96px;aspect-ratio:4/5;border-radius:var(--r-photo);overflow:hidden;background:var(--sand);box-shadow:inset 0 0 0 1px var(--photo-line)}
.ear-photos img{width:100%;height:100%;object-fit:cover}
.seg{display:flex;gap:0;padding:0;margin:0;background:var(--sand);border-radius:var(--r-chip);box-shadow:inset 0 0 0 1px var(--dash)}
.seg>button{flex:1 1 0;min-height:48px;padding:0 10px;border:0;border-radius:var(--r-chip);background:transparent;font:600 16px/1.15 var(--sans);color:var(--ink)}
.seg>button[aria-selected="true"]{background:var(--ink);color:var(--cream)}
.stepper{display:flex;align-items:center;gap:8px;margin:0;padding:0;list-style:none;font:500 13px/16px var(--mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.stepper li{display:flex;align-items:center;gap:4px;padding:4px 0;color:var(--muted)}
.stepper li+li::before{content:"·";margin-right:4px;color:var(--muted)}
.stepper li[aria-current="step"]{color:var(--ink)}
.stepper li[aria-current="step"]>span{padding:4px 0 3px;box-shadow:inset 0 -2px 0 var(--ink)}
.stepper .ico{width:14px;height:14px;stroke-width:2.25}
/* "01 Looks · 02 Photos" on a phone too (review 21.10: "2 PHOTOS" read as "two photos are needed") */
.stepper .n::before{content:"0"}
.stepper li.done{color:var(--ink)}
/* the finished step is a button back to Looks: reset at every width (a raw browser button on phones before) */
.step-btn{display:inline-flex;align-items:center;gap:4px;min-height:44px;margin:0;padding:0;border:0;background:none;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.step-btn .ico{flex:none}

/* ------------------------------------------------------------ head, foot, mark */
.site-head{position:relative;z-index:5;display:flex;align-items:center;gap:8px;min-height:48px;width:100%;max-width:1180px;margin:0 auto;padding:0 var(--gr) 0 var(--gl)}
.wordmark{display:inline-flex;align-items:center;gap:8px;min-height:48px;font:600 19px/1 var(--sans);letter-spacing:-.01em;text-decoration:none;color:var(--ink);white-space:nowrap}
.wordmark::before{content:"";flex:none;width:30px;height:30px;background:url("../img/brand/mark.svg") center/contain no-repeat}
.site-head .spacer{flex:1}
.app-head .back{margin-left:-12px}
.app-head .back.is-reserved{visibility:hidden}
.app-head .wordmark{font-size:0;gap:0;min-width:44px}
@media (min-width:600px){.app-head .wordmark{font-size:19px;gap:8px}}
.test-strip{margin:0;display:flex;align-items:center;justify-content:center;min-height:32px;padding:4px var(--g);background:var(--sand);color:var(--ink);font:400 15px/1.3 var(--sans);text-align:center}
/* the flow's strip is drawn by the server in test mode (no jump of the whole page when the script shows it) */
.test-strip[data-mode]:not([data-mode="test"]){display:none}
.site-foot{margin-top:auto;border-top:1px solid var(--line);padding:24px var(--gr) calc(28px + var(--safe-b)) var(--gl);font-size:15px;line-height:22px;color:var(--ink)}
.site-foot>*{max-width:1180px;margin-left:auto;margin-right:auto}
.site-foot p{margin:0 auto 8px}
.site-foot nav,.site-foot .links{display:flex;flex-wrap:wrap;gap:0 18px;margin-bottom:10px}
.site-foot a{display:inline-flex;align-items:center;min-height:44px}
.site-foot .muted{color:var(--muted)}

/* ------------------------------------------------------------ photos: polaroid, print, corners, placeholders */
.pol{--tilt:0deg;position:relative;margin:0;padding:6px 6px 20px;background:var(--paper);border:var(--b-photo);border-radius:var(--r-pol);box-shadow:var(--shadow-photo);transform:rotate(var(--tilt))}
.print{position:relative;margin:0;padding:8px;background:var(--paper);border:var(--b-photo);border-radius:var(--r-pol);box-shadow:var(--shadow-photo-l)}
.print-12{padding:12px}
.corners::before,.corners::after{content:"";position:absolute;z-index:2;width:20px;height:20px;pointer-events:none}
.corners::before{top:-3px;left:-3px;background:linear-gradient(135deg,var(--ink) 0 calc(50% - .75px),var(--cream) calc(50% - .75px) 50%,transparent 50%)}
.corners::after{right:-3px;bottom:-3px;background:linear-gradient(315deg,var(--ink) 0 calc(50% - .75px),var(--cream) calc(50% - .75px) 50%,transparent 50%)}
.ph{position:relative;display:block;overflow:hidden;background:var(--sand);aspect-ratio:4/5}
.ph-1{aspect-ratio:1}
.ph>img,.ph>picture,.ph>picture>img,.ph>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph img::before{content:"";position:absolute;inset:0;background:var(--sand)}
.shimmer{background:linear-gradient(100deg,var(--sand) 30%,#FBF5E6 50%,var(--sand) 70%) 0 0/300% 100%;animation:shim 1.6s linear infinite}
.develop{animation:develop var(--t-develop) var(--ease) both}
@keyframes shim{from{background-position:100% 0}to{background-position:0 0}}
@keyframes develop{from{filter:blur(8px) sepia(.4);opacity:.2}to{filter:none;opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(41,35,28,0)}40%{box-shadow:0 0 0 4px var(--lime),0 0 0 5.5px var(--ink)}}
.pulse{animation:pulse 650ms var(--ease) 2}
@keyframes fade{from{opacity:0}}
@keyframes up{from{transform:translateY(100%)}}
@keyframes rise{from{opacity:0;transform:translateY(4px)}}
.spinner{display:inline-block;width:18px;height:18px;border:2px solid var(--ink);border-right-color:transparent;border-radius:50%;animation:spin .8s linear infinite;flex:none;vertical-align:-3px}

/* ------------------------------------------------------------ sections and the album-page edge */
.sec{position:relative;padding:var(--sec) 0}
.edge::before,.edge::after{content:"";position:absolute;left:0;right:0;top:calc(-1*var(--edge));height:var(--edge);pointer-events:none;-webkit-mask:var(--edge-mask) left bottom/240px 12px repeat-x;mask:var(--edge-mask) left bottom/240px 12px repeat-x}
.edge{--edge-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 12'%3E%3Cpath d='M0 12V7.2C9 6.4 14 5.1 23 5.6S38 8 49 7.1 63 3.9 76 4.6 92 7.6 104 7.3 121 5 133 5.4 150 7.8 163 7.2 178 3.8 191 4.4 207 7.4 219 7 232 5.6 240 7.2V12Z'/%3E%3C/svg%3E");--edge-bg:var(--cream)}
.edge::before{top:calc(-1*var(--edge) - 1px);background:rgba(41,35,28,.16)}
.edge::after{background:var(--edge-bg)}
.band-kraft{--edge-bg:var(--kraft);background:var(--kraft)}
.band-lavender{--edge-bg:var(--lavender);background:var(--lavender)}
.sec-head{margin-bottom:24px}
.sec-head p{margin:12px 0 0}

/* ------------------------------------------------------------ landing hero */
.hero{padding:8px 0 28px}
.hero-grid{display:grid;grid-template-areas:"copy" "art" "cta";gap:10px}
.hero-variant{display:contents}
.hero-copy{grid-area:copy}
.hero-copy .lead{margin-top:8px}
.hero-art{grid-area:art}
.hero-cta{grid-area:cta}
.art{--src-w:clamp(64px,22.6vw,88px);--print-w:min(232px,calc(100vw - 2*var(--g) - var(--src-w) - 30px));position:relative;display:flex;justify-content:space-between;align-items:flex-start;gap:8px;min-height:calc(var(--print-w)*1.25 + 14px)}
.art-src{position:relative;display:flex;flex-direction:column;align-items:center;width:calc(var(--src-w) + 14px)}
.art-src .label{margin:0 0 4px;font-size:13px;line-height:16px;letter-spacing:.03em;white-space:nowrap}
.art-src .pol{width:calc(var(--src-w) + 14px);padding-bottom:14px}
.art-src .pol .ph{width:var(--src-w)}
.art-src .pol:nth-of-type(1){--tilt:-3deg;z-index:1}
.art-src .pol:nth-of-type(2){--tilt:2deg;margin-top:-16px;margin-left:8px}
.art-src .serif{margin:6px 0 0;font-size:18px;line-height:20px;text-align:center}
.art-arrow{position:absolute;left:calc(var(--src-w) + 2px);top:36%;width:40px;height:36px;z-index:3;color:var(--ink)}
.doodle{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.art-print{position:relative;width:calc(var(--print-w) + 16px);margin:2px 2px 0 0;transform:rotate(2deg)}
.art-print .ph{width:var(--print-w)}
.tab-label{position:absolute;z-index:3;top:-12px;left:50%;transform:translateX(-50%);padding:4px 9px 3px;background:var(--paper);border:var(--b-photo);border-radius:4px;font:500 13px/16px var(--mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;box-shadow:0 1px 2px rgba(41,35,28,.06)}
/* the hero look decides the copy (server-rendered: data-hero = {{HERO_LOOK}}, a pet look id means the pet variant) */
.lp:is([data-hero="studio"],[data-hero="window"],[data-hero="spot"],[data-hero="garden"],[data-hero="oil"],[data-hero="rainbow"]) :is(.copy-together,.src-you){display:none}
.lp:not(:is([data-hero="studio"],[data-hero="window"],[data-hero="spot"],[data-hero="garden"],[data-hero="oil"],[data-hero="rainbow"])) .copy-pet{display:none}
.lp:is([data-hero="studio"],[data-hero="window"],[data-hero="spot"],[data-hero="garden"],[data-hero="oil"],[data-hero="rainbow"]) .src-you+.pol{--tilt:-2deg;margin:0}
.lp-look .hero-default{display:none}
.price-line{margin:12px 0 0;font-size:17px;line-height:24px}
.price-line+.small{margin:2px 0 0;color:var(--muted)}
/* outside proof right under the hero button (design QA r2): three promises we keep, no ratings we don't have */
.guarantee{display:grid;gap:8px;margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--line);list-style:none}
.guarantee li{display:flex;align-items:center;gap:10px;font-size:16px;line-height:22px}
.guarantee .ico{width:20px;height:20px;flex:none}
/* reserved slot (index.html data-s="customers", hidden): real customers' portraits and their own words, each with that
   customer's written permission, from the first orders; never invented, never stock or AI-made people. Show it once
   there are three. */
.cust-list{display:grid;gap:var(--cg,16px);margin:0;padding:0;list-style:none}

/* ------------------------------------------------------------ look cards (landing gallery and Looks screen) */
.looks-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 12px;margin:0;padding:0;list-style:none}
.look{position:relative;display:flex;flex-direction:column;gap:0;padding:0;border:0;background:none;color:var(--ink);text-align:left;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.look .ph{border-radius:var(--r-photo);box-shadow:var(--shadow-photo);transition:box-shadow var(--t-ui),transform var(--t-ui)}
.look-t{display:block;margin-top:10px;font:600 17px/22px var(--sans)}
.look-d{display:block;margin-top:2px;font-size:15px;line-height:20px;color:var(--muted)}
.badge{position:absolute;z-index:2;top:8px;left:8px;padding:5px 8px 4px;border-radius:4px;background:var(--lime);font:500 13px/16px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.pick{position:absolute;z-index:2;top:8px;right:8px;display:grid;place-items:center;width:36px;height:36px;border:var(--b);border-radius:50%;background:var(--paper);font:600 17px/1 var(--sans);color:var(--ink);transition:background 120ms,color 120ms}
.look[aria-checked="true"] .pick{background:var(--ink);color:var(--cream)}
.look[aria-checked="true"] .ph{box-shadow:var(--shadow-photo-l);transform:translateY(-2px)}
.look-noimg{display:grid;place-items:center;padding:12px;font:italic 400 22px/1.1 var(--serif);text-align:center}
/* each landing sample shows its own source photos in its corner (design QA r2: more than one pair on the page) */
.look-src{position:absolute;z-index:2;left:8px;bottom:8px;display:flex;align-items:center;pointer-events:none}
.src-th{flex:none;width:30px;padding:2px 2px 6px;background:var(--paper);border-radius:2px;box-shadow:0 1px 3px rgba(41,35,28,.28);transform:rotate(-4deg)}
.src-th+.src-th{margin-left:-6px;transform:rotate(3deg)}
.src-th img{width:100%;height:30px;object-fit:cover}
.src-t{margin-left:6px;padding:4px 7px 3px;border-radius:3px;background:var(--paper);box-shadow:0 1px 2px rgba(41,35,28,.16);font:500 13px/16px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.inputs{display:flex;align-items:center;gap:12px;margin-top:20px}
.inputs .pol{width:52px;padding:3px 3px 10px;flex:none}
.inputs .pol:first-child{--tilt:-3deg}
.inputs .pol+.pol{--tilt:3deg;margin-left:-14px}
.inputs p{margin:0}
#g-note-together{margin:10px 0 0}

/* ------------------------------------------------------------ landing sections */
.steps{display:grid;gap:16px;margin:0;padding:0;list-style:none;max-width:620px}
.steps li{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:center}
.steps .ph{width:96px;border-radius:var(--r-photo);box-shadow:var(--shadow-photo)}
.step-n{display:block;font:400 24px/26px var(--display);margin-bottom:4px}
.steps h3{font:600 17px/22px var(--sans);margin:0 0 2px}
.steps p{margin:0;font-size:15px;line-height:21px;color:var(--muted)}
.proof-fig{max-width:620px;margin:24px 0 16px}
.proof-fig figcaption{margin:10px 0 0}
.proof-strip{display:grid;grid-template-columns:1fr 24px 1fr 24px 1fr;align-items:center;gap:6px;margin:0}
.proof-strip .pol{padding:4px 4px 12px;--tilt:-2deg}
.proof-strip .print{padding:5px;transform:rotate(2deg)}
.loupe{position:relative;margin:0;border-radius:50%;overflow:hidden;aspect-ratio:1;box-shadow:0 0 0 3px var(--paper),0 0 0 4.5px var(--ink),var(--shadow-photo-l)}
.loupe .ph{aspect-ratio:1}
.proof-strip .ico{width:24px;height:24px}
.trait-demo{margin:0 0 12px}
.get-grid{display:grid;grid-template-columns:1fr;gap:20px;margin:8px 0 24px}
.get-framed{margin:0}
.get-framed .ph{aspect-ratio:3/2;border-radius:var(--r-photo);box-shadow:var(--shadow-photo-l)}
.get-zoom{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:center;margin:0}
.get-zoom .print{padding:5px}
.get-zoom .ph{aspect-ratio:1}
figcaption{font-size:15px;line-height:21px;margin-top:8px}
.ticks{display:grid;gap:10px;margin:0 0 16px;padding:0;list-style:none}
.ticks li{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start}
.ticks .ico{margin-top:1px}
.trust-list{display:grid;gap:14px;margin:0;padding:0;list-style:none;max-width:620px}
.trust-list li{display:grid;grid-template-columns:24px 1fr;gap:14px;align-items:start;font-size:17px;line-height:24px}
.faq-grid{display:grid;gap:8px}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:12px 0;font:600 17px/23px var(--sans);list-style:none;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:20px;height:20px;background:linear-gradient(var(--ink),var(--ink)) center/14px 1.75px no-repeat,linear-gradient(var(--ink),var(--ink)) center/1.75px 14px no-repeat;transition:transform var(--t-ui)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details>div{padding:0 0 18px;max-width:36em}
.faq details>div p:last-child{margin-bottom:0}
.faq .ex-row{margin-top:12px;max-width:260px}
.final{text-align:left}
.final .btn{margin-top:20px}
@media (min-width:600px){.final .btn{width:auto;min-width:320px;display:inline-flex}}
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-bar);padding:12px var(--gr) calc(12px + var(--safe-b)) var(--gl);background:var(--cream);border-top:1px solid var(--line);box-shadow:var(--shadow-bar);transform:translateY(110%);transition:transform var(--t-ui) var(--ease);visibility:hidden}
.sticky-cta.is-on{transform:none;visibility:visible}
.sticky-cta p{margin:6px 0 0;font-size:15px;line-height:21px;text-align:center}
[data-consent="open"] .sticky-cta{transform:translateY(110%);visibility:hidden}

/* ------------------------------------------------------------ flow layout, bars */
.screen{padding:4px 0 32px}
.flow-main>*+*{margin-top:0}
.flow-side{display:block}
.bar{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-bar);padding:10px var(--gr) calc(10px + var(--safe-b)) var(--gl);background:var(--cream);border-top:1px solid var(--line);box-shadow:var(--shadow-bar)}
.bar-photos{border-top:0;box-shadow:none;background:linear-gradient(rgba(255,248,233,0),var(--cream) 24px);padding-top:28px}
.bar-line{margin:0 0 8px;font-size:15px;line-height:20px}
.bar-line .ico{width:16px;height:16px;display:inline;vertical-align:-3px}
.bar-row{display:flex;align-items:center;gap:10px;margin:0 0 8px}
.bar-row .bar-line{margin:0}
.slots{display:flex;gap:4px;flex:none;margin:0;padding:0;list-style:none}
.slots li{width:32px;height:40px;border-radius:3px;overflow:hidden;background:var(--sand);box-shadow:inset 0 0 0 1px var(--photo-line)}
.slots img{width:100%;height:100%;object-fit:cover}
.bar-side-only{display:none}
/* the fixed bar's clearance is the footer's bottom padding, and only while a bar is on screen (review 19.10: a spacer
   above the footer left ~180 px of empty page under the last line, even on the empty Photos step with no bar) */
.bar-space,.bar-space-s{display:none}
.app .site-foot{padding-bottom:calc(28px + var(--safe-b))}
@media (max-width:1023.98px){.app:has(.screen:not([hidden]) .bar:not([hidden])) .site-foot{padding-bottom:calc(150px + var(--safe-b))}}
.keyboard-open .bar,.sheet-open .bar,.keyboard-open .sticky-cta{visibility:hidden}
/* a focused control never hides under the fixed bars (WCAG 2.4.11): focus scrolling keeps clear of them */
@media (max-width:1023.98px){html:has(body.app:not(.no-bar)),html:has(.sticky-cta.is-on){scroll-padding-bottom:calc(150px + var(--safe-b))}}
html:has(#s-previews.is-ready:not([hidden])){scroll-padding-bottom:calc(120px + var(--safe-b))}
/* the short "One moment…" screen holds the page's height: the footer never shows above the fold and then jumps
   when the first screen renders (CLS 0.23 on /start?look=, review 19.10) */
#s-loading{min-height:calc(100svh - 48px)}
.topline{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 12px}

/* ------------------------------------------------------------ Looks screen */
.looks-intro{margin:6px 0 10px;font-size:15px;line-height:21px;color:var(--muted)}
#looks-tabs{margin:0 0 12px}
.looks-after{margin:16px 0 0}
.looks-after p{margin:0}
/* "You and your pet" in three families (19.10): a section each, chips that jump to them on a phone */
.fam-chips{display:flex;gap:8px;margin:0 0 12px;overflow-x:auto}
.fam-chips .chip{flex:0 0 auto}
#looks-grid.by-family{display:block}
.look-fam{margin:0 0 28px;scroll-margin-top:16px}
.look-fam:last-child{margin-bottom:0}
.fam-h{margin:0;font:400 26px/30px var(--display);letter-spacing:-.01em}
.fam-d{margin:2px 0 12px;font-size:15px;line-height:21px;color:var(--muted)}
/* landing gallery, "You and your pet": two looks of each family under its heading, then "See all 12 looks" */
.fams{padding-top:16px}
.fam{margin:0 0 28px}
.see-all{margin:0}

/* ------------------------------------------------------------ Photos screen */
.lstrip{display:flex;align-items:center;gap:8px;min-height:56px;margin:2px 0 10px}
.lstrip ul{display:flex;gap:6px;margin:0;padding:0;list-style:none;flex:none}
.lstrip li{width:36px;height:45px;border-radius:3px;overflow:hidden;background:var(--sand);box-shadow:var(--shadow-photo)}
.lstrip li img{width:100%;height:100%;object-fit:cover}
.lstrip p{flex:1;min-width:0;margin:0;font-size:15px;line-height:19px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.lstrip .link{flex:none;font-size:15px;padding:0 4px}
.consent-line{margin:8px 0 0;font-size:15px;line-height:20px;color:var(--muted);cursor:auto}
.consent-line a{color:var(--ink)}
.consent-line a{display:inline-block;padding:12px 0;margin:-12px 0}
.consent-line .how{display:inline-flex;align-items:center;min-height:44px;margin:-6px 0}
.ex{position:relative;margin:0;min-width:0;cursor:pointer}
.ex-img{position:relative;display:block}
.ex .ph{border-radius:var(--r-photo);aspect-ratio:1}
.ex figcaption{margin-top:6px;font-size:15px;line-height:19px}
.ex-tag{position:absolute;z-index:2;top:6px;left:6px;padding:4px 6px 3px;border-radius:3px;background:var(--paper);font:500 13px/16px var(--mono);letter-spacing:.04em;text-transform:uppercase}
.ex-mark{position:absolute;z-index:3;right:6px;bottom:6px;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--cream)}
.ex-row .ex-mark{right:-5px;bottom:-5px;width:28px;height:28px}
.ex-mark .ico{width:16px;height:16px;stroke-width:2.5}
.ex-no .ex-mark{background:var(--paper);color:var(--ink);border:var(--b)}
.ex-no .ph img{opacity:.85}
.ex-no .ph::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top right,transparent calc(50% - .75px),rgba(41,35,28,.3) calc(50% - .75px) calc(50% + .75px),transparent calc(50% + .75px))}
.ex-warn .ex-mark{background:var(--paper);color:var(--ink);border:var(--b)}
.ex-row{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:14px 0 0}
.ex-row .ex figcaption{font-size:13px;line-height:16px}
.ex-sheet{display:grid;grid-template-columns:1fr 1fr;gap:16px 12px;margin:8px 0 20px}
.ex-sheet .ex figcaption{font-size:15px}
.sheet h3{margin:16px 0 4px;font:600 17px/22px var(--sans)}

/* the two cards (SPEC §22.1, Pet Plus Us): "You" left, "Your pet" right; side by side while the content is 324 px
   or wider (360 and up), one under the other below that (320, a 200 % font), without a media query */
#s-photos .h1{margin:8px 0 0}
#photos-sub{margin:6px 0 0;font-size:17px;line-height:22px}
.photo-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(156px,1fr));gap:12px;margin:12px 0 0}
.photo-cards.is-pet-only{grid-template-columns:minmax(0,1fr)}
/* just your pet (§22.7): one card the whole width, examples of 155, a zone of 150 */
.is-pet-only .pcard-ex{grid-template-columns:repeat(2,minmax(0,155px))}
.is-pet-only .pcard-zone{min-height:150px}
.pcard{position:relative;display:flex;flex-direction:column;min-width:0;padding:12px;border-radius:var(--r-card);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line),var(--shadow-card)}
.pcard-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pcard-t{font:600 20px/24px var(--sans)}
.pcard-head .ico{width:20px;height:20px}
.pcard-sub{margin:4px 0 0;font-size:15px;line-height:20px;color:var(--muted)}
.pcard-body{display:flex;flex-direction:column;margin:10px 0 0}
.pcard-ex{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.pcard-ex .ex figcaption{margin-top:4px;font-size:15px;line-height:19px}
.pcard-ex .ex-mark.ex-word{display:flex;align-items:center;width:auto;height:24px;padding:0 7px 0 5px;gap:3px;border-radius:12px;font:600 14px/1 var(--sans)}
.pcard-ex .ex-mark{top:4px;right:4px;bottom:auto;width:24px;height:24px}
.pcard-ex .ex-mark .ico{width:14px;height:14px}
.pcard-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;min-height:84px;margin:10px 0 0;padding:6px;border:0;border-radius:var(--r-photo);background:var(--cream);outline:1.5px dashed var(--dash);outline-offset:-1.5px;color:var(--ink);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pcard-zone .plus{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--lime);box-shadow:inset 0 0 0 1.5px var(--ink)}
.pcard-zone .t{font:600 17px/20px var(--sans)}
.pcard-zone .or{display:none;font-size:15px;line-height:19px;color:var(--muted)}
@media (pointer:fine){.pcard-zone .or{display:block}}
.pcard-selfie{display:none;align-self:center;min-height:48px;margin:2px 0 -10px;font-size:15px;font-weight:600}
.pcard-selfie .ico{width:18px;height:18px}
@media (pointer:coarse){.pcard-selfie{display:inline-flex}}
/* tiles: the first one is big (4:5, the whole width), the others and "Add another" small squares, two a row */
.pcard-tiles{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:0;padding:0;list-style:none}
.tile{position:relative;aspect-ratio:1;border-radius:var(--r-photo);overflow:hidden;background:var(--sand);box-shadow:inset 0 0 0 1px var(--photo-line)}
/* only a tile that appears for the first time rises in: every 2 s poll redraws the cards, and an animation on every
   redraw made the photos blink (founder 25.10) */
.tile.is-new{animation:rise var(--t-ui) var(--ease) both}
.tile.is-big{grid-column:1/-1;width:100%;aspect-ratio:4/5;max-height:360px}
.tile img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.tile.st-up img{opacity:.6}
.tile.st-rejected,.tile.st-misplaced,.tile.st-error{background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--ink)}
.tile.st-rejected img,.tile.st-misplaced img,.tile.st-error img{opacity:.35;filter:grayscale(1)}
/* a big tile that asks for something (review 21.10): smaller, its plate on the photo, the × at the top */
.tile.is-big.has-plate{aspect-ratio:auto;height:auto;min-height:150px;max-height:none}
.tile.is-big.has-plate img{position:absolute;inset:0}
.tile-plate{position:relative;z-index:4;display:flex;flex-direction:column;gap:6px;margin:72px 0 0;padding:8px;background:rgba(255,253,247,.94);box-shadow:0 -1px 0 var(--line)}
.tile-plate-t{display:flex;align-items:flex-start;gap:6px;margin:0;font:600 15px/19px var(--sans);color:var(--ink)}
.tile-plate-t .ico{width:18px;height:18px;flex:none;margin-top:1px;stroke-width:2.25}
.tile-plate .btn{min-height:44px;padding:4px 8px;font-size:15px;line-height:19px;box-shadow:2px 3px 0 var(--ink)}
.tile.has-plate .tile-x{top:0;bottom:auto}
.tile.has-plate .tile-x::before{top:6px;bottom:auto}
.tile.has-plate .tile-x .ico{margin:-12px -12px 0 0}
.tile::after{content:"";position:absolute;inset:0;z-index:2;border-radius:var(--r-photo);pointer-events:none}
.tile.is-focus::after{box-shadow:inset 0 0 0 2.5px var(--ink)}
.tile>button.tile-open{position:absolute;inset:0;z-index:3;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer}
.tile>button.tile-open:focus-visible{outline:3px solid var(--ink);outline-offset:-3px;border-radius:var(--r-photo);box-shadow:inset 0 0 0 5px var(--cream)}
.tile-mark,.tile-star{position:absolute;z-index:2;display:grid;place-items:center;border-radius:50%;pointer-events:none}
.tile-mark{top:6px;right:6px;width:26px;height:26px;background:var(--ink);color:var(--cream)}
.tile-mark .ico{width:15px;height:15px;stroke-width:2.5}
.tile-mark.m-warn,.tile-mark.m-no,.tile-mark.m-swap,.tile-mark.m-retry{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.tile-mark.m-no .ico,.tile-mark.m-swap .ico,.tile-mark.m-retry .ico{width:18px;height:18px;stroke-width:2.25}
.tile-mark.m-warn{box-shadow:0 1px 2px rgba(41,35,28,.25)}
.tile-mark.m-warn .ico{width:24px;height:24px;stroke-width:1.9}
.tile-mark.m-spin{background:var(--paper);box-shadow:0 1px 2px rgba(41,35,28,.2)}
.tile-mark .spinner{width:16px;height:16px}
.tile-star{top:6px;left:6px;width:30px;height:30px;background:var(--paper);box-shadow:0 1px 2px rgba(41,35,28,.2)}
.tile-star .ico{width:20px;height:20px}
.tile-prog{position:absolute;z-index:2;left:0;right:0;bottom:0;height:4px;background:rgba(41,35,28,.3)}
.tile-prog i{display:block;height:100%;background:var(--ink)}
.tile-x{position:absolute;z-index:4;right:0;bottom:0;display:grid;place-items:center;width:48px;height:48px;padding:0;border:0;background:none;color:var(--ink);cursor:pointer}
.tile-x::before{content:"";position:absolute;right:6px;bottom:6px;width:24px;height:24px;border-radius:50%;background:var(--paper);box-shadow:0 1px 3px rgba(41,35,28,.25)}
.tile-x .ico{position:relative;width:14px;height:14px;margin:0 -12px -12px 0;stroke-width:2.25}
.tile-x:focus-visible{outline:none}
/* a small tile (70 px on a phone): a 32 px target, so it never covers the mark at the top (review 21.10) */
.tile:not(.is-big) .tile-x{width:32px;height:32px}
.tile:not(.is-big) .tile-x::before{right:4px;bottom:4px;width:22px;height:22px}
.tile:not(.is-big) .tile-x .ico{width:13px;height:13px;margin:0 -8px -8px 0}
.tile-x:focus-visible::before{outline:3px solid var(--ink);outline-offset:1px}
.tile.add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:100%;padding:4px;border:0;background:var(--cream);outline:1.5px dashed var(--dash);outline-offset:-1.5px;font:600 13px/16px var(--sans);color:var(--ink);text-align:center;box-shadow:none;cursor:pointer;animation:none}
.tile.add .ico{width:22px;height:22px}
.tile.add .or{display:none;font:400 13px/16px var(--sans);color:var(--muted)}
.tile.ghost{animation:none}
.tile--offer{box-shadow:none;outline:2px dashed var(--ink);outline-offset:-2px}
.tile--offer img{opacity:.75}
.tile-plus{position:absolute;z-index:2;inset:0;display:grid;place-items:center;pointer-events:none}
.tile-plus .ico{width:20px;height:20px;padding:6px;border-radius:50%;background:var(--lime);box-shadow:inset 0 0 0 1.5px var(--ink);box-sizing:content-box}
.picking .tile:not(.is-big):not(.ghost):not(.tile--offer)::after{box-shadow:inset 0 0 0 3px var(--ink)}
/* an offer in an empty card: the crop in a dashed frame, the question, "Use it" */
.offer{display:flex;flex-direction:column;gap:8px}
.offer-img{position:relative;width:100%;aspect-ratio:4/5;max-height:360px;border-radius:var(--r-photo);overflow:hidden;outline:2px dashed var(--ink);outline-offset:-2px;background:var(--sand)}
.offer-img img{width:100%;height:100%;object-fit:cover}
/* review 21.10: the question on the crop and "Use it" on it, so neither waits below the button bar */
.offer-q{position:absolute;z-index:2;top:8px;left:8px;right:8px;width:max-content;max-width:calc(100% - 16px);padding:4px 8px;border-radius:var(--r-chip);background:var(--paper);box-shadow:0 1px 3px rgba(41,35,28,.25);font:600 15px/19px var(--sans)}
.offer-on{position:absolute;z-index:2;left:8px;right:8px;bottom:8px}
.offer-on .btn{width:100%}
.offer.is-compact{margin:12px 0 0}
.offer.is-compact .offer-img{aspect-ratio:1;max-height:220px}
.btn.is-flash{animation:flashbtn 1.1s var(--ease) 1}
@keyframes flashbtn{30%{transform:scale(1.04);box-shadow:5px 7px 0 var(--ink)}}
.offer-t{margin:0;font-size:15px;line-height:20px}
.btn-s{min-height:48px;padding:0 12px;font-size:17px;box-shadow:3px 4px 0 var(--ink)}
.offer-links{display:flex;flex-direction:column;align-items:flex-start}
.offer-links .link{min-height:44px;font-size:15px;font-weight:600}
/* under the tiles: the main photo, then the card's status line with its actions */
.pcard-main{display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;margin:8px 0 0;font-size:15px;line-height:20px}
.pcard-main .link{min-height:44px;margin:-12px 0;font-size:15px;font-weight:600}
.pcard-main .why{flex-basis:100%;color:var(--muted)}
.pcard-status{margin:8px 0 0;font-size:15px;line-height:20px}
.pcard-msg{margin:0}
.pcard-acts{display:flex;flex-wrap:wrap;align-items:center;gap:0 14px}
.pcard-acts:empty{display:none}
.pcard-acts .link{min-height:44px;font-size:15px;font-weight:600}
.pcard-acts .btn{width:100%;margin:8px 0 4px}
/* desktop drops: the card under the pointer, or the page beside the cards */
.pcard-dropmsg{display:none}
.pcard.is-drag{background:var(--lavender);box-shadow:inset 0 0 0 2px var(--ink)}
.pcard.is-drag>:not(.pcard-dropmsg){visibility:hidden}
.pcard.is-drag .pcard-dropmsg{position:absolute;inset:0;z-index:5;display:grid;place-items:center;margin:0;padding:16px;font:400 28px/32px var(--display);letter-spacing:-.01em;text-align:center}
.pcard.is-flash{animation:flash 1.1s var(--ease) 1}
.pcard.is-flash .pcard-zone{animation:flashzone 1.1s var(--ease) 1}
@keyframes flash{30%{box-shadow:inset 0 0 0 3px var(--ink),var(--shadow-card)}}
@keyframes flashzone{30%{background:var(--lavender);outline-color:var(--ink)}}
.page-drop{display:none}
.page-drop.is-on{position:fixed;inset:8px;z-index:var(--z-bar);display:flex;align-items:flex-end;justify-content:center;padding:24px;border-radius:var(--r-card);box-shadow:inset 0 0 0 2px var(--ink);background:rgba(229,223,245,.35);pointer-events:none}
.page-drop p{margin:0;padding:12px 20px;border-radius:var(--r-chip);background:var(--ink);color:var(--cream);font:600 18px/24px var(--sans)}
/* "We noticed": one row of 48 px right under the cards */
.noticed-row{margin:12px 0 0}
.noticed{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;margin:0;padding:10px 14px;border:0;border-radius:var(--r-card);background:var(--lavender);font:600 16px/21px var(--sans);text-align:left;color:var(--ink);cursor:pointer}
.noticed .t{flex:1 1 auto;min-width:0}
.noticed .ico{width:18px;height:18px;flex:none}
.noticed-wait{display:flex;align-items:center;gap:10px;min-height:48px;margin:0;font-size:15px;line-height:20px}
.q{display:inline-grid;place-items:center;width:22px;height:22px;flex:none;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink);font:600 14px/1 var(--sans)}
.pet-only-link{margin:8px 0 0;font-size:15px;line-height:20px}
.pet-only-link .link{min-height:44px;font-size:15px;font-weight:600}
#s-photos .lstrip{margin:16px 0 0}
#s-photos .more{display:flex;margin:0;font-size:15px}
.trait.trait-s{min-height:44px;padding:6px 12px;font-size:15px;line-height:20px}
.trait-s .label{font-size:13px;line-height:16px}
@media (max-width:1023.98px){.trait.trait-s{padding:6px 10px}.trait.trait-s .ico{display:none}}
.trait.is-unsure{gap:8px}
.pv-ears{margin:8px 0 0}
.price-note{margin:16px 0 0;font-size:17px;line-height:24px}
.step-error{margin:12px 0 0;font-size:15px;line-height:21px;display:flex;gap:8px;align-items:flex-start}
.step-error .ico{width:20px;height:20px;flex:none}
.bar .alt{display:flex;justify-content:center;margin:2px 0 -8px;font-size:15px}
/* the button (§22.6): lime when the photos are enough; before that quiet (paper, ink border), still answering a tap */
#photos-go.is-quiet{background:var(--paper);box-shadow:none;color:var(--ink)}
#photos-go.is-quiet:active{transform:none}
.bar-count{margin:6px 0 0;font-size:15px;line-height:20px;text-align:center}
/* "1 of 2 photos ready · 1 photo needs a look" on one line, so the bar doesn't grow (review 21.10) */
.bar-countrow{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:0 10px}
#photos-look{min-height:44px;margin:-6px 0 -12px;font-size:15px;line-height:20px;font-weight:600}
.side-ready p{margin:0 0 8px}
.prog{display:block;height:4px;margin:0 0 16px;border-radius:2px;background:var(--sand);overflow:hidden}
.prog i{display:block;height:100%;background:var(--ink)}
.prog i.p0{width:0}.prog i.p50{width:50%}.prog i.p100{width:100%}

/* ------------------------------------------------------------ We noticed (traits) */
.traits{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.trait{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:8px 14px;border:var(--b-ctl);border-radius:var(--r-chip);background:var(--paper);font:400 17px/22px var(--sans);color:var(--ink);text-align:left;cursor:pointer}
.trait .ico{width:16px;height:16px;flex:none}
.trait .label{font-size:13px;line-height:16px;padding:3px 6px 2px;border-radius:3px;background:var(--lime)}
.trait.add{border-style:dashed;border-color:var(--dash)}
.trait-edit{display:grid;gap:10px;width:100%;padding:12px;border-radius:var(--r-chip);background:var(--paper);box-shadow:var(--shadow-card)}
.noticed-panel{margin:16px 0;padding:16px;border-radius:var(--r-card);background:var(--lavender)}
.noticed-panel h2{font:600 18px/24px var(--sans);margin:0 0 4px}
.noticed-panel p{margin:0 0 12px;font-size:17px;line-height:24px}
.noticed-panel .small{margin:10px 0 0}

/* ------------------------------------------------------------ fields */
.field{display:grid;gap:6px;margin:0 0 14px}
.field>label,.field .lbl{font:600 15px/20px var(--sans)}
.field .hint{font-size:15px;line-height:21px;color:var(--muted);margin:-2px 0 2px}
.input,.field input:not([type="checkbox"]),.field textarea{width:100%;min-height:56px;padding:14px 16px;border:var(--b);border-radius:var(--r-btn);background:var(--paper);font:400 17px/24px var(--sans);color:var(--ink);-webkit-appearance:none;appearance:none}
.field textarea{min-height:96px;resize:vertical}
.input::placeholder,.field input::placeholder,.field textarea::placeholder{color:var(--muted)}
.input:focus,.field input:focus,.field textarea:focus{outline:3px solid var(--ink);outline-offset:2px}
.field-err{display:flex;gap:6px;align-items:flex-start;margin:0;font-size:15px;line-height:21px}
.field-err .ico{width:18px;height:18px;flex:none;margin-top:1px}
.check{display:flex;align-items:center;gap:12px;min-height:48px;font-size:17px;line-height:22px;cursor:pointer}
.check input{width:24px;height:24px;flex:none;margin:0;accent-color:var(--ink);border:var(--b);border-radius:4px}
.inline-form{display:grid;grid-template-columns:1fr auto;gap:8px}

/* ------------------------------------------------------------ previews */
.pv-head{margin:4px 0 16px}
.pv-head p{margin:6px 0 0;font-size:17px;line-height:24px}
.pv-list{display:grid;gap:20px;margin:0;padding:0;list-style:none}
.pv{position:relative;margin:0}
.pv .print{padding:8px 8px 0}
.pv-photo{position:relative;display:block;width:100%;padding:0;border:0;background:var(--sand);cursor:zoom-in;aspect-ratio:4/5;overflow:hidden}
.pv-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pv-ph{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;text-align:center;font-size:15px;line-height:21px}
.pv-ph .serif{font-size:22px;line-height:24px}
.pv-ph .ico{width:20px;height:20px}
.pv-step{display:inline-flex;align-items:center;gap:10px;padding:8px 14px;border-radius:999px;background:rgba(255,253,247,.85)}
/* the keep control is a labelled pill on the photo itself (design QA r2): "☐ Keep" -> "✓ Keeping"; 48 px target */
.pv-tick{position:absolute;z-index:3;top:4px;left:4px;display:flex;align-items:center;min-width:48px;min-height:48px;padding:4px;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pv-tick>span{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px 0 10px;border:1.5px solid var(--ink);border-radius:999px;background:var(--paper);box-shadow:0 1px 4px rgba(41,35,28,.28);font:600 16px/20px var(--sans);color:var(--ink);white-space:nowrap;transition:background 120ms,color 120ms}
.pv-tick[aria-checked="true"] span{background:var(--ink);color:var(--cream)}
.pv-tick[aria-checked="true"] .pv-box{background:var(--cream);border-color:var(--cream);color:var(--ink)}
.pv-tick:focus-visible{outline:none}
.pv-tick:focus-visible>span{outline:3px solid var(--ink);outline-offset:2px}
.pv-tick.is-kept{cursor:default;pointer-events:none}
.pv-tick.is-kept>span{gap:6px;padding:0 14px 0 10px;background:var(--ink);color:var(--cream)}
.pv-tick.is-kept .ico{width:16px;height:16px;stroke-width:2.75}
/* while it is made: their own photo, blurred, sepia and faint, under a moving sheen (design QA r2) */
.pv-photo.pv-making{cursor:default}
.pv-photo .pv-src{filter:blur(4px) sepia(.55) saturate(.75) brightness(1.05);opacity:.5;transform:scale(1.08)}
.pv-sheen{position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,transparent 30%,rgba(255,253,247,.55) 50%,transparent 70%) 0 0/300% 100%;animation:shim 1.8s linear infinite;pointer-events:none}
.pv-making .pv-ph{padding:16px}
.pv-making .pv-ph .serif{font-size:24px;line-height:26px}
.pv-making .pv-step{padding:8px 14px 8px 12px;text-wrap:balance}
.pv-lip{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:6px 2px;color:var(--ink)}
.pv-lip .th{width:40px;height:40px;flex:none;border-radius:var(--r-photo);overflow:hidden;background:var(--sand)}
.pv-lip .th img{width:100%;height:100%;object-fit:cover}
.pv-lip .serif{flex:1 1 5em;min-width:0;font-size:20px;line-height:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* "View larger", visible under every print (design QA r2), not only on hover */
.pv-view{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-left:auto;padding:0 2px;font-size:15px;font-weight:600}
.pv-view .ico{width:16px;height:16px}
.pv-box{display:grid;place-items:center;width:20px;height:20px;flex:none;border:1.5px solid var(--ink);border-radius:4px;background:var(--paper);color:transparent}
.pv-box .ico{width:14px;height:14px;stroke-width:2.75}
.v-keep[aria-checked="true"]{background:var(--ink);color:var(--cream)}
.v-keep[aria-checked="true"] .pv-box{background:var(--cream);border-color:var(--cream);color:var(--ink)}
.pv-row-note strong{color:var(--ink);font-weight:600}
.pv-cap{margin:8px 0 0;font-size:15px;line-height:21px;color:var(--muted)}
.pv.is-old .pv-photo img{opacity:.6}
.pv .ribbon{position:absolute;z-index:3;left:8px;right:8px;top:50%;transform:translateY(-50%);display:flex;justify-content:center}
.pv .ribbon span{padding:6px 10px 5px;border-radius:4px;background:var(--paper);font:500 13px/16px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.pv-late{margin:8px 0 0}
.pv-bought{display:flex;align-items:center;gap:8px;font:600 15px/20px var(--sans)}
.trust-mini{display:grid;gap:10px;margin:4px 0;padding:0;list-style:none}
.trust-mini li{display:grid;grid-template-columns:24px 1fr;gap:12px;font-size:15px;line-height:21px}
.after-cards{display:grid;gap:4px;margin:12px 0 0}
.after-cards .link{font-weight:600}
/* a link inside running text stays on the line (review 19.10: the 48 px inline-flex box opened a 27 px gap between the
   two lines at 390); the tap target keeps its 48 px through ::after */
.wyg>p .link{display:inline;min-height:0;position:relative}
.wyg>p .link::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:48px;transform:translateY(-50%)}
.wyg{margin:28px 0 0}
.wyg h2{font:600 17px/22px var(--sans);margin:0 0 10px}
.wyg ul{display:grid;gap:8px;list-style:none;margin:0 0 16px}
.wyg li{display:grid;grid-template-columns:20px 1fr;gap:10px;font-size:15px;line-height:21px}
.wyg li .ico{width:20px;height:20px}
.wyg p{font-size:15px;line-height:21px;margin:0 0 8px}
.email-card{margin:20px 0;padding:16px;border-radius:var(--r-card);background:var(--paper);box-shadow:var(--shadow-card)}
.email-card h2{font:600 18px/24px var(--sans);margin:0}
.email-card>p{margin:4px 0 12px;font-size:15px;line-height:21px;color:var(--muted)}
.email-card .btn-pair{margin-top:10px}
.status-line{margin:12px 0 0;font-size:15px;line-height:21px;display:flex;align-items:center;gap:10px}
.status-line .ico{width:20px;height:20px;flex:none}
.pay-line{margin:0 0 8px;font-size:15px;line-height:21px;font-variant-numeric:tabular-nums;text-align:center}
.pay-line .nowrap{white-space:nowrap}
/* the tick next to every pay button (all sales final, founder 25.10); never red: lime when it is asked for */
.viewer-pay{flex:none;width:100%;max-width:640px;margin:0 auto}
.viewer-pay .viewer-buy{max-width:none;padding-bottom:4px}
/* a message in the pay bar instead of a toast over the photos ("Added. Total $29 · Undo") */
.pay-say{font-weight:600}
.pay-undo{min-height:44px;margin:-6px 0 -6px 10px;font-size:15px;font-weight:600}
.pay-making{display:flex;align-items:center;justify-content:center;gap:10px;min-height:40px;font-size:15px}

.tile-prog i.w0{width:0}.tile-prog i.w1{width:10%}.tile-prog i.w2{width:20%}.tile-prog i.w3{width:30%}.tile-prog i.w4{width:40%}.tile-prog i.w5{width:50%}.tile-prog i.w6{width:60%}.tile-prog i.w7{width:70%}.tile-prog i.w8{width:80%}.tile-prog i.w9{width:90%}.tile-prog i.w10{width:100%}
.sheet-photo{width:min(220px,60%);margin:0 auto 12px;border-radius:var(--r-photo)}
.pv-wrap{position:relative}
.fix-noticed{margin:12px 0}
.fix-noticed summary{min-height:44px;font-weight:600;list-style:none}
.fix-noticed summary::-webkit-details-marker{display:none}
.fix-noticed .traits{margin-top:4px}
.sheet .chips{margin:4px 0 12px}
.sheet .consent-text{margin:4px 0 12px;padding:12px 14px;border-radius:var(--r-card);background:var(--sand);font-size:16px;line-height:22px}
.sheet .consent-text+.small{margin:0 0 16px}
.sheet .consent-no{display:block;width:100%;min-height:48px;margin-top:4px;text-align:center}
.sheet .h3{margin:12px 0 6px}
.fix-take{padding-left:6px;gap:10px}
.fix-take .th,.fix-one .th{flex:none;width:32px;height:40px;border-radius:3px;overflow:hidden;background:var(--sand);box-shadow:var(--shadow-photo)}
.fix-take .th img,.fix-one .th img{width:100%;height:100%;object-fit:cover}
.fix-one{display:flex;align-items:center;gap:12px;margin:12px 0 4px}
.fix-one .th{width:48px;height:60px}
.fix-one p{display:grid;margin:0}
.fix-one .serif{font:italic 400 21px/24px var(--serif)}

/* ------------------------------------------------------------ sheet, viewer, toast */
.sheet{position:fixed;inset:0;z-index:var(--z-scrim);display:flex;align-items:flex-end;justify-content:center}
.sheet-scrim{position:absolute;inset:0;background:var(--scrim);animation:fade var(--t-sheet) ease both}
.viewer~.sheet{z-index:calc(var(--z-viewer) + 1)}
.sheet-panel{position:relative;z-index:var(--z-sheet);width:100%;max-width:640px;max-height:88dvh;overflow:auto;overscroll-behavior:contain;padding:8px var(--gr) calc(24px + var(--safe-b)) var(--gl);background:var(--cream);border-radius:var(--r-sheet) var(--r-sheet) 0 0;box-shadow:var(--shadow-sheet);animation:up var(--t-sheet) var(--ease) both}
.sheet-handle{display:block;width:36px;height:4px;margin:2px auto 6px;border-radius:2px;background:var(--line)}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 8px}
.sheet-head h2{font:400 28px/32px var(--display);letter-spacing:-.01em}
.sheet-head h2 em{font:italic 400 30px/32px var(--serif)}
.sheet-body>p{margin:0 0 14px}
.sheet .list-actions{display:grid;gap:0;margin:0;padding:0;list-style:none}
.sheet .list-actions .link{width:100%;min-height:56px;border-bottom:1px solid var(--line);text-decoration:none;font-weight:600}
.sheet .list-actions .ico{width:20px;height:20px}
.sheet .danger{color:var(--danger)}
.btn-danger{background:var(--paper);color:var(--danger);border-color:var(--danger);box-shadow:none}
@media (min-width:700px){.sheet{align-items:flex-end}.sheet-panel{border-radius:var(--r-sheet) var(--r-sheet) 0 0}}
.viewer{position:fixed;inset:0;z-index:var(--z-viewer);display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;background:var(--cream)}
.viewer-top{flex:none;display:flex;align-items:center;gap:8px;min-height:48px;padding:0 var(--gr) 0 var(--gl)}
.viewer-top .counter{flex:none}
.viewer-top .v-title{flex:1;min-width:0;text-align:center;font-size:20px;line-height:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.viewer-top .viewer-close{margin-right:-12px}
.viewer-stage{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:0 var(--g);touch-action:pan-y pinch-zoom}
/* phone: the picture edge to edge, as tall as the window allows with the bar above and the buy row below */
.viewer:not(.is-desk) .viewer-stage{flex:none;width:100%;height:min(125vw,calc(100svh - 150px));padding:0}
.viewer:not(.is-desk) .viewer-stage>img{width:100%;height:100%;box-shadow:none;border-radius:0}
.viewer:not(.is-desk) .viewer-stage .compare{padding:0 var(--g)}
.viewer:not(.is-desk) .viewer-stage .compare img{max-height:calc(100svh - 230px);object-fit:contain}
.viewer:not(.is-desk) .viewer-stage .framed{width:auto;height:100%;max-width:100%}
.viewer:not(.is-desk) .viewer-nav{background:rgba(255,253,247,.88)}
.viewer-stage img{max-width:100%;max-height:100%;object-fit:contain;transition:transform var(--t-ui) var(--ease);box-shadow:var(--shadow-photo-l);border-radius:2px}
.viewer-stage.zoomed{overflow:auto;display:block;touch-action:pan-x pan-y pinch-zoom;overscroll-behavior:contain}
.viewer:not(.is-desk) .viewer-stage.zoomed>img{display:block;width:200%;height:auto;max-width:none;max-height:none;transform:none;transition:none}
.viewer:not(.is-desk) .viewer-stage.zoomed .viewer-nav{display:none}
.viewer-stage .compare{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:center;width:100%;max-width:720px}
.viewer-stage .compare figure{margin:0}
.viewer-stage .compare img{width:100%;max-height:60dvh}
.viewer-stage .framed{position:relative;width:100%;max-width:560px;aspect-ratio:3/4;background:var(--sand) center/cover no-repeat;overflow:hidden;border-radius:4px}
.viewer-stage .framed>img.wall{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;box-shadow:none;max-height:none}
.viewer-stage .frame-art{position:absolute;left:50%;top:44%;width:42%;transform:translate(-50%,-50%);padding:5%;background:var(--paper);border:6px solid #3a2f25;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.viewer-stage .frame-art img{position:static;width:100%;max-height:none;box-shadow:none}
.viewer-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2}
.viewer-nav.prev{left:8px}.viewer-nav.next{right:8px}
.viewer-buy{flex:none;display:flex;align-items:center;gap:8px;width:100%;max-width:640px;margin:0 auto;padding:10px var(--gr) 10px var(--gl)}
.viewer-buy .pv-bought{margin:0;min-height:48px}
.v-keep{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:52px;padding:0 14px 0 10px;border:1.5px solid var(--ink);border-radius:var(--r-btn);background:var(--paper);font:600 16px/20px var(--sans);color:var(--ink);white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background 120ms,color 120ms}
.v-pay{flex:1 1 auto;min-width:0;padding:0 12px;gap:8px;font-size:16px;white-space:nowrap}
.viewer-more{flex:none;display:grid;justify-items:center;gap:4px;width:100%;max-width:640px;margin:0 auto;padding:4px var(--gr) calc(16px + var(--safe-b)) var(--gl)}
.viewer-tools{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.viewer-tools .chip{min-height:44px;padding:0 12px;font-size:15px}
.v-only{font-size:15px}
.viewer .counter{font:500 13px/16px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.toast{position:fixed;left:50%;bottom:calc(132px + var(--safe-b));z-index:var(--z-toast);display:flex;align-items:center;gap:14px;width:max-content;max-width:calc(100% - 2*var(--g));padding:10px 16px;border-radius:var(--r-chip);background:var(--paper);box-shadow:var(--shadow-card),0 0 0 1px rgba(41,35,28,.06);font-size:15px;line-height:21px;transform:translateX(-50%);animation:rise var(--t-ui) var(--ease) both}
.toast .link{min-height:44px;font-weight:600;flex:none}
.no-bar .toast{bottom:calc(20px + var(--safe-b))}

/* ------------------------------------------------------------ order page */
.o-head{margin:4px 0 12px}
.o-head p{margin:6px 0 0}
.o-status{display:flex;gap:8px;align-items:flex-start;margin:10px 0 0;font-size:15px;line-height:21px}
.o-status .ico{width:20px;height:20px;flex:none}
.o-portrait{margin:0 auto 20px;width:min(300px,100%)}
.o-portrait .print{transform:rotate(2deg)}
#o-loading .status-line{margin:8px 0 28px}
.o-dl{display:grid;gap:8px;margin:0 0 20px}
.o-dl .meta{margin:0;font-size:15px;line-height:21px;color:var(--muted);text-align:center}
.o-dl .prep{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;font-size:15px}
.developing img{animation:developing 2.6s ease-in-out infinite alternate}
@keyframes developing{from{filter:sepia(.45) blur(1.5px) brightness(1.06);opacity:.6}to{filter:sepia(.1) blur(0);opacity:.95}}
.progress{width:100%;height:2px;background:var(--line);overflow:hidden}
.progress i{display:block;width:40%;height:100%;background:var(--ink);animation:prog 1.6s ease-in-out infinite}
@keyframes prog{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
.o-many{display:grid;gap:28px;margin:0 0 20px;padding:0;list-style:none}
.o-many .print{transform:rotate(var(--tilt,1.5deg))}
.o-many li:nth-child(2n) .print{--tilt:-1.5deg}
.o-many h2{margin:12px 0 8px;font:italic 400 22px/24px var(--serif);text-align:center}
.name-card,.upsell{margin:20px 0;padding:16px;border-radius:var(--r-card);background:var(--paper);box-shadow:var(--shadow-card)}
.upsell h2{font:600 18px/24px var(--sans);margin:0 0 6px}
.upsell p{font-size:15px;line-height:21px}
.upsell .thumbs{display:flex;gap:8px;margin:0 0 12px}
.upsell .thumbs .ph{width:64px;border-radius:3px}
.upsell video{width:min(200px,60%);aspect-ratio:9/16;border-radius:4px;background:var(--sand);margin:0 auto 12px}
/* complete the set: the other previews, then one button with the price difference */
.topup-row{display:flex;gap:12px;margin:4px 0 12px;padding:0;list-style:none}
.topup-row li{flex:0 1 150px;min-width:0}
.topup-row .ph{display:block;aspect-ratio:4/5;border-radius:var(--r-photo);overflow:hidden;background:var(--sand);box-shadow:var(--shadow-photo)}
.topup-row img{width:100%;height:100%;object-fit:cover}
.topup-row .serif{display:block;margin-top:6px;font-size:18px;line-height:22px}
.topup .btn{margin:4px 0 8px}
.topup .small{margin:0 0 4px}
.details{display:grid;gap:4px;margin:16px 0;padding:0;list-style:none;font-size:15px;line-height:21px}
.o-links{display:grid;gap:0;margin:8px 0}
.o-links .link{font-weight:600}

/* ------------------------------------------------------------ consent banner (Meta pixel) */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-consent);padding:16px var(--gr) calc(16px + var(--safe-b)) var(--gl);background:var(--paper);border-radius:var(--r-sheet) var(--r-sheet) 0 0;box-shadow:var(--shadow-sheet);animation:up var(--t-sheet) var(--ease) both}
.consent>*{max-width:640px;margin-left:auto;margin-right:auto}
.consent p{margin:0 0 12px;font-size:15px;line-height:21px}
/* "Your Privacy Choices" sheet (consent.js, every page; SPEC 23): the US switch, the status, the links */
.pc-switch{display:flex;align-items:center;gap:14px;width:100%;min-height:56px;margin:4px 0 8px;padding:10px 14px;border:var(--b-soft);border-radius:var(--r-card);background:var(--paper);color:var(--ink);font:600 17px/22px var(--sans);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pc-switch:disabled{cursor:default;opacity:1}
.pc-knob{position:relative;flex:none;width:48px;height:28px;border:var(--b);border-radius:14px;background:var(--cream);transition:background var(--t-press)}
.pc-knob::after{content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:var(--ink);transition:transform var(--t-press)}
.pc-switch[aria-checked="true"] .pc-knob{background:var(--ink)}
.pc-switch[aria-checked="true"] .pc-knob::after{background:var(--cream);transform:translateX(20px)}
.pc-status{margin:4px 0 12px;padding:12px 14px;border-radius:var(--r-card);background:var(--sand);font-size:16px;line-height:22px}
.pc-sheet .btn-pair{margin:0 0 12px}
.pc-links{display:flex;flex-wrap:wrap;gap:0 18px;margin:4px 0 0}
.pc-analytics{margin-top:20px;padding-top:16px;border-top:var(--b-soft)}
.pc-analytics:first-child{margin-top:0;padding-top:0;border-top:0}
.pc-analytics .h3{margin:0 0 8px}
.pc-links a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink)}
.pc-icon{width:30px;height:14px;flex:none;margin-left:6px}

/* ------------------------------------------------------------ content pages (legal, support, find, printing, 404) */
.prose{padding-top:16px;padding-bottom:56px}
.prose h1{margin:4px 0 16px}
.prose h2{margin:36px 0 10px;font:400 26px/30px var(--display);letter-spacing:-.005em}
.prose h3{margin:24px 0 6px;font:600 17px/22px var(--sans)}
.prose p,.prose li{max-width:36em}
.prose ul,.prose ol{margin:0 0 1em;padding-left:1.2em}
.prose li{margin:0 0 .5em}
.prose a:not(.btn){text-decoration-thickness:1.5px}
.prose table{width:100%;border-collapse:collapse;margin:8px 0 20px;font-size:15px;line-height:21px}
.prose th,.prose td{padding:10px 8px 10px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.prose th{font-weight:600}
.prose blockquote{margin:0 0 1em;padding:0 0 0 16px;border-left:2px solid var(--line)}
.prose .label{margin:0 0 6px}
.prose .btn{margin:4px 0}
.card{margin:16px 0;padding:16px 20px;border-radius:var(--r-card);background:var(--paper);box-shadow:var(--shadow-card)}
.card>:first-child{margin-top:0}
.card>:last-child{margin-bottom:0}
.note{color:var(--muted)}
.verify{font:500 13px/16px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.notfound{padding-top:24px;padding-bottom:56px}
.notfound .print{width:min(220px,60%);margin:24px 0}
.find-art{display:flex;align-items:flex-end;margin:8px 0 20px}
.find-art .pol{width:84px;--tilt:-4deg;z-index:1;padding-bottom:14px}
.find-art .print{width:124px;margin:0 0 0 -16px;transform:rotate(3deg)}
.find-form{margin:20px 0 12px}

/* ============================================================ phone-only and desktop-only parts */
.head-nav,.head-link,.btn-head,.look-try,.pv-row-note,.picked,.pv-zoomhint{display:none}
@media (max-width:1023.98px){.desk-only,.side-ref,.prose>aside,.final-fan{display:none!important}}

/* ============================================================ 600–1023: the phone layout in a 680 column (DESIGN_v2 §10.2) */
@media (min-width:600px) and (max-width:1023.98px){
.wrap,.site-head{max-width:calc(680px + 2*var(--g))}
.site-foot>*{max-width:680px}
.bar,.sticky-cta,.consent{padding-left:max(var(--gl),calc(50% - 340px));padding-right:max(var(--gr),calc(50% - 340px))}
}

/* ============================================================ desktop ≥1024 (DESIGN_v2 §10): its own composition per screen */
@media (min-width:1024px){
:root{--g:32px;--sec:104px;--cg:24px;--side-pad:20px;--shadow-drawer:-14px 0 36px rgba(41,35,28,.16)}
html{scroll-padding-top:96px}
body{font-size:18px;line-height:27px}
.wrap,.site-head{max-width:calc(1248px + 2*var(--g))}
.wrap.narrow{max-width:calc(1248px + 2*var(--g))}
.grid12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--cg)}
/* type (§10.3): never smaller than 16 on a laptop */
.h1,.prose h1,.h1-one{font-size:48px;line-height:50px}.h1 em,.prose h1 em{font-size:52px;line-height:54px}
.h1-hero{font-size:60px;line-height:62px}.h1-hero em{font-size:64px;line-height:64px}
.h2{font-size:44px;line-height:46px}.h2 em{font-size:48px;line-height:50px}
.h3{font-size:20px;line-height:26px}
.lead{font-size:21px;line-height:30px;max-width:30em;text-wrap:pretty}
.flow-main .lead{max-width:40em}
.small,.note,.link-s,.looks-intro,.consent-line,.pv-cap,.trust-mini li,.status-line,.step-error,.bar-line,.pay-line,.wyg li,.wyg p,.email-card>p,.field .hint,.field-err,.o-status,.o-dl .meta,.o-dl .prep,.details,.upsell p,figcaption,.toast,.consent p,.test-strip,.prose table,.site-foot,.lstrip p,.lstrip .link{font-size:16px;line-height:23px}
.ex-head,.field>label,.field .lbl{font-size:16px;line-height:22px}
.trait.trait-s{font-size:16px;line-height:22px}
.prose h2{font-size:32px;line-height:36px;margin-top:48px}
.prose h3{font-size:20px;line-height:26px}
.sec-head{margin-bottom:40px}
/* focus (§10.11): the lime button's ring clears its hard shadow; cards and prints get one ring around photo + caption */
.btn:not(.btn-2):not(.btn-quiet):not(.btn-danger):focus-visible{outline-offset:6px}
.look:focus-visible{outline-offset:6px;border-radius:6px}
.pv-photo:focus-visible{outline:none}
.pv:has(.pv-photo:focus-visible) .print{outline:3px solid var(--ink);outline-offset:4px}
.skip{left:max(var(--g),calc(50% - 624px))}

/* ------------------------------------------------ header 72 (§10.4) */
.site-head{min-height:72px;gap:12px}
.wordmark{font-size:20px;gap:10px}
.wordmark::before{width:34px;height:34px}
.app-head .wordmark{font-size:20px;gap:10px}
.head-link{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font:400 16px/20px var(--sans);color:var(--ink);text-decoration:none}
.head-nav{display:flex;align-items:center;gap:28px;margin-left:40px}
.head-nav a{display:inline-flex;align-items:center;min-height:44px;font:400 16px/20px var(--sans);text-decoration:none;color:var(--ink)}
.btn-head{display:inline-flex;min-height:44px;padding:0 18px;margin-left:16px;font-size:16px;line-height:20px;box-shadow:3px 4px 0 var(--ink);visibility:hidden;opacity:0;transition:opacity var(--t-ui),visibility 0s linear var(--t-ui)}
.btn-head.is-on{visibility:visible;opacity:1;transition:opacity var(--t-ui)}
/* "Find my portraits" sits after the button, so the hidden button's slot is on the inside and the link stays flush
   with the content edge before the header sticks and while the final band is on screen (design QA r2) */
.btn-head+.head-link{margin-left:20px}
/* full-bleed background with a 1 px line at the bottom: a border-image outset is ink overflow, it never widens the
   page (a pseudo-element at -100vmax did: horizontal scroll) */
.lp-head.is-stuck{position:sticky;top:0;z-index:var(--z-bar);background:var(--cream);border-image:linear-gradient(var(--cream) calc(100% - 1px),var(--line) calc(100% - 1px)) fill 0/0/0 100vmax;animation:headin var(--t-sheet) var(--ease) both}
.app-head{position:relative}
.app-head .stepper{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);gap:0;font-size:14px;line-height:18px}
.stepper li{padding:0;min-height:44px}
.stepper li+li::before{content:"";width:40px;height:1.5px;margin:0 16px;background:var(--line)}
.stepper li[aria-current="step"]{box-shadow:none}
.stepper li>span,.stepper .step-btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 2px;box-shadow:inset 0 0 0 var(--ink)}
.stepper li[aria-current="step"]>span{box-shadow:inset 0 -2px 0 var(--ink)}
.stepper .n::before{content:"0"}
.head-help{margin-left:auto}

/* ------------------------------------------------ footer and consent card on the grid (§10.4) */
.site-foot{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:32px;align-items:start;padding:28px max(var(--gr),calc(50% - 624px)) 32px max(var(--gl),calc(50% - 624px))}
.site-foot>*{max-width:none;margin:0}
.site-foot nav,.site-foot .links{grid-column:1;grid-row:1/span 3;margin:0;gap:0 24px}
.site-foot p{grid-column:2;margin:0;text-align:right}
.site-foot>p:first-child{grid-column:1;grid-row:1/span 3;text-align:left}
.consent{left:max(var(--g),calc(50% - 624px));right:auto;bottom:24px;width:420px;padding:20px;border-radius:var(--r-card);box-shadow:var(--shadow-sheet)}
.consent>*{max-width:none}
.toast,.no-bar .toast{bottom:24px;max-width:480px}

/* ------------------------------------------------ drawers instead of bottom sheets (§10.4, D-12) */
.sheet{align-items:stretch;justify-content:flex-end}
.sheet-panel{width:clamp(480px,36.2vw,520px);max-width:none;height:100%;max-height:none;padding:24px 32px 40px;border-radius:0;box-shadow:var(--shadow-drawer);animation:drawer var(--t-sheet) var(--ease) both}
.sheet-handle{display:none}
.sheet-head{margin:0 0 16px}
.sheet-head h2{font-size:40px;line-height:42px}.sheet-head h2 em{font-size:42px;line-height:44px}
.sheet-body>p{font-size:18px}
.ex-sheet{gap:20px 16px}

/* ------------------------------------------------ flow: main 9 columns + sticky summary 3 (§10.2) */
.screen{padding:8px 0 72px}
.flow{display:grid;grid-template-columns:minmax(0,1fr) 300px;column-gap:32px;align-items:start}
.flow-side{position:sticky;top:24px}
.bar,.bar-photos{position:static;padding:var(--side-pad);background:var(--paper);border:0;border-radius:var(--r-card);box-shadow:var(--shadow-card)}
.bar .h3{margin:0 0 12px}
.bar-side-only{display:block}
.bar-row .slots{display:none}
.app .site-foot{padding-bottom:calc(32px + var(--safe-b))}
.bar-row{margin:0 0 12px}
.bar .alt{justify-content:flex-start;margin:4px 0 -8px}
.side-price{margin:12px 0 0;color:var(--muted)}

/* Looks */
.looks-top{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:var(--cg);margin:0 0 20px}
.looks-top .h1{grid-column:1/-1}
.looks-top .looks-intro{grid-column:1;margin:10px 0 12px}
#looks-tabs{grid-column:2;grid-row:2/span 2;width:400px;margin:0}
.looks-top>[hidden]+#looks-tabs{grid-row:2}
#looks-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px var(--cg)}
/* a family is exactly one row of 4 (no empty cells: the "Just your pet" hint is the line under the grid) */
#looks-grid .fam-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px var(--cg)}
.fam-chips{display:none}
.look-fam{margin-bottom:40px}
.fam-h{font-size:30px;line-height:34px}
.fam-d{margin:4px 0 16px;font-size:16px;line-height:22px}
.look-t{font-size:19px;line-height:24px;margin-top:12px}
.look-d{font-size:16px;line-height:22px}
.picked{display:grid;gap:0;margin:0 0 12px;padding:0;list-style:none}
.picked li{display:grid;grid-template-columns:40px minmax(0,1fr) 44px;align-items:center;gap:12px;min-height:64px;border-bottom:1px solid var(--line)}
.picked li:last-child{border-bottom:0}
.picked .th{width:40px;height:50px;border-radius:3px;overflow:hidden;background:var(--sand);box-shadow:var(--shadow-photo)}
.picked .th img{width:100%;height:100%;object-fit:cover}
.picked .t{display:block;font:italic 400 20px/22px var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.picked .d{display:block;font-size:16px;line-height:20px;color:var(--muted)}
.picked .x{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:none;color:var(--ink);cursor:pointer}
.picked .x .ico{width:18px;height:18px}
.picked li.empty .th{background:none;box-shadow:none;outline:1.5px dashed var(--dash);outline-offset:-1.5px}
.picked li.empty .t{font:400 16px/20px var(--sans);color:var(--muted)}

/* Photos (§22.1): a 1120 container, the cards in 720 on the left (two of 350), "Your previews" (360) on the right */
#s-photos .wrap{max-width:calc(1120px + 2*var(--g))}
#s-photos .flow{grid-template-columns:minmax(0,1fr) 360px;column-gap:40px}
#s-photos .flow-main{grid-column:1}
#s-photos .flow-side{grid-column:2}
#lstrip,#price-note{display:none}
#photos-sub{margin:10px 0 0;font-size:21px;line-height:30px}
.photo-cards{grid-template-columns:1fr 1fr;gap:20px;margin:24px 0 0}
.photo-cards.is-pet-only{grid-template-columns:minmax(0,1fr)}
.pcard{padding:16px 12px}
.pcard-head{padding:0 4px}
.pcard-sub{padding:0 4px}
.pcard-t{font-size:22px;line-height:28px}
.pcard-sub{font-size:16px;line-height:22px}
.pcard-body{margin-top:14px}
.pcard-ex{gap:16px}
.pcard-ex .ex figcaption{font-size:16px;line-height:20px}
.pcard-ex .ex-mark{top:8px;right:8px;width:30px;height:30px}
.pcard-ex .ex-mark.ex-word{height:30px;padding:0 10px 0 7px;border-radius:15px;font-size:16px}
.pcard-zone{min-height:170px;margin-top:16px}
.pcard-zone .or{font-size:16px}
.pcard-tiles{gap:16px}
.tile.add{font-size:16px;line-height:20px}
.tile.add .or{display:block;font-size:15px;line-height:19px}
.tile-mark{top:10px;right:10px;width:32px;height:32px}
.tile-star{top:10px;left:10px;width:34px;height:34px}
.pcard-main,.pcard-status{padding:0 4px;font-size:16px;line-height:23px}
.pcard-main .link,.pcard-acts .link,.offer-links .link{font-size:16px}
.offer-t{font-size:16px;line-height:23px}
.is-pet-only .pcard-ex{grid-template-columns:repeat(2,minmax(0,220px))}
.is-pet-only .pcard-zone{min-height:170px}
.is-pet-only .pcard-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
.is-pet-only .tile.is-big{grid-column:auto;aspect-ratio:1}
.is-pet-only .offer{max-width:326px}
.noticed-row{margin-top:16px}
.noticed,.noticed-wait{font-size:16px}
.pet-only-link,.pet-only-link .link{font-size:16px}
#s-photos .more{font-size:16px}
.zone-paste{margin:4px 0 0;font-size:16px;line-height:23px;color:var(--muted)}
/* the right card */
.side-looks{display:block;margin:0 0 16px}
.side-looks-list{display:grid;gap:8px;margin:0 0 4px;padding:0;list-style:none}
.side-looks-list li{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;gap:12px}
.side-looks-list .th{width:40px;height:50px;border-radius:3px;overflow:hidden;background:var(--sand);box-shadow:var(--shadow-photo)}
.side-looks-list .th img{width:100%;height:100%;object-fit:cover}
.side-looks-list .t{font:italic 400 20px/22px var(--serif)}
.side-looks .link{min-height:44px;font-size:16px}
.side-ready p{font-size:16px;line-height:22px}
.bar-count{font-size:16px;line-height:22px;text-align:left}
.bar-countrow{justify-content:flex-start}
#drop-note{margin:12px 0 0}

/* Previews (§10.8) */
.pv-head{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:28px;margin:0 0 24px}
.pv-head p{margin:0;font-size:20px;line-height:28px}
.pv-head #pv-note{flex-basis:100%;margin-top:12px}
.pv-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--cg)}
.pv-list>.pv-extra{grid-column:1/-1;order:10}
.pv-tip{display:none}
.pv-lip{min-height:52px;gap:8px}
.pv-lip .th{width:32px;height:32px}
.pv-view{font-size:16px}
.pv-photo .pv-zoomhint{display:none}
.pv-row-note{display:block;margin:16px 0 0}
.pay-line{text-align:left}
.pv-extra .trust-mini{display:none}
.wyg{margin:20px 0 0}
/* Previews ready (design QA r2): the prints are the product, sized by the window's height (photo about 360 px tall
   at 720, 440 at 800) in the full width; "Your selection" becomes one bar along the bottom; "What you get" and the
   trust lines move under the prints, "We noticed" below them. */
#s-previews.is-ready .flow-main{grid-column:1/-1}
#s-previews.is-ready .flow{grid-template-columns:minmax(0,1fr)}
#s-previews.is-ready .pv-list{display:flex;flex-wrap:wrap;gap:var(--cg)}
/* E2E 19.10: on a short window the prints (sized by its height) left an empty column on the right (about 320 px at
   1280x680, 450 at 1366x657): the ready screen is one centered column as wide as the row of prints, so the title,
   the prints and "What you get" share one left edge; the pay bar stays the width of the window */
#s-previews.is-ready{--pv-w:calc(clamp(300px,100svh - 360px,600px)*.8 + 16px)}
#s-previews.is-ready .flow-main{width:min(100%,calc(3*var(--pv-w) + 2*var(--cg)));margin:0}
#s-previews.is-ready .pv{width:min(calc((100% - 2*var(--cg))/3),var(--pv-w))}
/* a narrow print keeps its whole title on two lines ("Close togeth…" next to "View larger") */
#s-previews .pv-lip .serif{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-wrap:balance}
#s-previews.is-ready .pv-list>.pv-extra{width:100%}
#s-previews.is-ready .flow-side{position:fixed;z-index:var(--z-bar);left:0;right:0;top:auto;bottom:0}
#s-previews.is-ready .bar{display:flex;align-items:center;gap:12px 24px;padding:12px max(var(--gr),calc(50% - 624px)) calc(12px + var(--safe-b)) max(var(--gl),calc(50% - 624px));border-radius:0;border-top:1px solid var(--line);background:var(--paper);box-shadow:var(--shadow-bar)}
#s-previews.is-ready #pay-title{display:none}
#s-previews.is-ready #pay-top{display:flex;flex:none;align-items:center;gap:16px}
#s-previews.is-ready .side-slots{margin:0}
#s-previews.is-ready .side-slots li{width:44px;height:55px}
#s-previews.is-ready .side-hint{display:none}
#s-previews.is-ready .side-total{margin:0;white-space:nowrap}
#s-previews.is-ready .side-total{gap:10px;font-size:20px;line-height:26px}
#s-previews.is-ready .pay-line{flex:1 1 auto;min-width:0;margin:0}
#s-previews.is-ready #pay-side{order:4;flex:none}
#s-previews.is-ready #pay-side .side-more{margin:0}
#s-previews.is-ready .side-trust,#s-previews.is-ready .side-price{display:none}
#s-previews.is-ready #pay-action{order:5;flex:none;width:min(360px,32vw)}
body:has(#s-previews.is-ready:not([hidden])) .site-foot{padding-bottom:calc(120px + var(--safe-b))}
@media (max-width:1279.98px){#s-previews.is-ready .side-slots{display:none}#s-previews.is-ready #pay-action{width:300px}}
#s-previews.is-ready .wyg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--cg);align-items:start}
#s-previews.is-ready .wyg>:not(.wyg-list):not(.wyg-trust){grid-column:1/-1}
.wyg-trust{padding:16px 20px;border-radius:var(--r-card);background:var(--paper);box-shadow:var(--shadow-card)}
.wyg-trust .trust-mini li{font-size:16px;line-height:23px}
body:has(#s-previews.is-ready:not([hidden])) .toast{bottom:calc(104px + var(--safe-b))}
.noticed-panel{margin:24px 0 0;padding:20px 24px}
.noticed-panel .traits{gap:10px}
.side-total{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0;font:600 22px/28px var(--sans)}
.side-total .num{font-variant-numeric:tabular-nums}
.side-each{margin:2px 0 14px;font-size:16px;line-height:22px;color:var(--muted)}
.side-ladder{margin:4px 0 14px;font-size:16px;line-height:22px}
.side-slots{display:flex;gap:8px;margin:0 0 14px;padding:0;list-style:none}
.side-slots li{width:56px;height:70px;border-radius:3px;overflow:hidden;background:var(--sand);box-shadow:inset 0 0 0 1px var(--photo-line)}
.side-slots li.empty{background:none;box-shadow:none;outline:1.5px dashed var(--line);outline-offset:-1.5px}
.side-slots img{width:100%;height:100%;object-fit:cover}
.side-slots button{position:relative;display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer}
.side-slots .is-off img{filter:grayscale(1);opacity:.45}
.side-slots .slot-check{position:absolute;right:3px;bottom:3px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--ink);color:var(--cream)}
.side-slots .slot-check .ico{width:12px;height:12px;stroke-width:3}
.side-hint{margin:-4px 0 12px;font-size:17px;line-height:22px;font-weight:600}
.side-more{display:flex;margin:6px 0 4px}
.side-trust{margin:16px 0 0;padding:16px 0 0;border-top:1px solid var(--line)}
.side-trust li{font-size:16px;line-height:22px}
.side-status{display:grid;gap:10px;margin:0 0 6px;padding:0;list-style:none}
.side-status li{display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:10px;font-size:16px;line-height:20px}
.side-status .th{width:32px;height:40px;border-radius:3px;overflow:hidden;background:var(--sand)}
.side-status .th img{width:100%;height:100%;object-fit:cover}
.side-status .t{font:italic 400 19px/22px var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-status .st{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.side-status .st .ico{width:16px;height:16px;stroke-width:2.5}
.side-status .st .spinner{width:14px;height:14px}
.side-count{margin:0 0 16px;font-size:16px;line-height:22px;color:var(--muted)}
.flow-side .email-card{margin:16px 0 0;padding:16px 0 0;border-radius:0;background:none;box-shadow:none;border-top:1px solid var(--line)}
.flow-side .email-card h2{font-size:17px;line-height:22px}
.flow-side .email-card .btn-pair{grid-template-columns:1fr;gap:4px}
.flow-side .email-card .btn-pair .link{justify-content:center}

/* Viewer (§10.8, D-11): stage + 360 panel */
.viewer.is-desk{display:grid;overflow:hidden;grid-template-columns:minmax(0,1fr) 360px;grid-template-rows:minmax(0,1fr);grid-template-areas:"stage panel"}
.viewer.is-desk .viewer-stage{grid-area:stage;padding:48px 88px;cursor:zoom-in}
.viewer.is-desk .viewer-stage img{max-height:calc(100svh - 96px)}
.viewer.is-desk .viewer-stage.zoomed{display:block;overflow:auto;padding:0;cursor:zoom-out;scrollbar-width:none}
.viewer.is-desk .viewer-stage.zoomed::-webkit-scrollbar{display:none}
.viewer.is-desk .viewer-stage.zoomed img{max-width:none;max-height:none;transform:none;margin:0 auto;transition:none}
.viewer.is-desk .viewer-stage .compare{max-width:min(100%,1000px);gap:24px}
.viewer.is-desk .viewer-stage .compare img{max-height:calc(100svh - 160px);width:auto;margin:0 auto}
.viewer.is-desk .viewer-stage .framed{max-width:min(100%,calc((100svh - 96px)*.75))}
.viewer.is-desk .viewer-stage .compare,.viewer.is-desk .viewer-stage .framed{cursor:auto}
.viewer.is-desk .viewer-nav{width:56px;height:56px}
.viewer.is-desk .viewer-stage.zoomed .viewer-nav{display:none}
.viewer.is-desk .viewer-nav.prev{left:16px}.viewer.is-desk .viewer-nav.next{right:16px}
.viewer-panel{grid-area:panel;position:relative;display:flex;flex-direction:column;gap:14px;padding:72px 32px 32px;background:var(--paper);box-shadow:-1px 0 0 var(--line);overflow:auto}
.viewer-panel .viewer-close{position:absolute;top:16px;right:16px}
.viewer-panel .counter{font-size:14px;line-height:18px}
.viewer-panel .v-title{margin:0;font:italic 400 28px/32px var(--serif)}
.viewer-panel .v-keep{width:100%;justify-content:flex-start;font-size:17px}
.viewer-panel .v-total{margin:0;font-size:16px;line-height:22px;font-variant-numeric:tabular-nums}
.viewer-panel .v-pay{flex:none;width:100%;font-size:17px}
.viewer-panel .v-only{align-self:flex-start;margin-top:-6px}
.viewer-panel .link{font-size:16px;line-height:22px}
.viewer-panel .viewer-tools{justify-content:flex-start;flex-direction:column;align-items:stretch;gap:8px}
.viewer-panel .viewer-tools .chip{min-height:48px;font-size:16px}
.viewer-panel .v-zoom{display:flex;align-items:center;gap:10px;font-size:16px}
.viewer-panel .v-keys{margin:auto 0 0;font-size:15px;line-height:21px;color:var(--muted)}

/* Order (§10.9) */
.o-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--cg);align-items:start}
.o-left{display:contents}
.o-head{grid-column:8/13;grid-row:1;display:flex;flex-direction:column;margin:8px 0 20px}
.o-head .o-status{order:-1;margin:0 0 12px}
.o-head p{margin:10px 0 0}
.o-portraits{grid-column:1/7;grid-row:1/span 2}
.o-right{grid-column:8/13;grid-row:2}
.o-b{display:flex;flex-direction:column}
.o-b #o-upsells{order:5}
.o-portrait{width:min(100%,calc((100svh - 200px)*.8));max-width:480px;margin:8px auto 0}
.o-dl .meta{text-align:left}
.o-dl .prep{align-items:flex-start;text-align:left}
.o-grid.is-many .o-head{grid-column:1/8;margin-bottom:0}
.o-grid.is-many .o-all{grid-column:8/13;grid-row:1;align-self:end;margin:0 0 4px}
.o-grid.is-many .o-portraits{grid-column:1/-1;grid-row:2;margin:40px 0 24px}
.o-grid.is-many .o-right{grid-column:1/-1;grid-row:3;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--cg);align-items:start}
.o-grid.is-many .o-b{grid-column:1/8;grid-row:1}
.o-grid.is-many .o-a{grid-column:8/13;grid-row:1}
.o-grid.is-many .o-a .upsell:first-child,.o-grid.is-many .o-a .name-card{margin-top:0}
.o-all .meta{margin:8px 0 0;font-size:16px;line-height:22px;color:var(--muted)}
.o-many{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--cg)}
.o-many.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.o-many .o-portrait{width:100%;max-width:460px;margin:0 auto}
.o-many li{display:flex;flex-direction:column;align-items:center}
.o-many .o-dl{width:100%;max-width:460px;margin:0 auto}
.o-many .o-dl .btn{width:auto;align-self:center}
.o-many .o-dl .meta{text-align:center}
.upsell{padding:20px}
.upsell.has-poster{display:grid;grid-template-columns:120px minmax(0,1fr);column-gap:20px;align-items:start}
.upsell.has-poster video{grid-row:1/span 6;width:120px;margin:0}

/* text pages (§10.10): one left edge, text 7 columns, a sticky reference on the right */
.prose,.notfound{display:flow-root}
.prose>*:not(.side-ref):not(aside),.notfound>*:not(.side-ref):not(.print){max-width:min(718px,58%)}
.prose p,.prose li{max-width:34em}
.side-ref,.prose>aside{float:right;position:sticky;top:32px;width:min(400px,32%);margin:8px 0 32px 32px}
.side-ref .card,.prose>aside .card{margin:0;padding:24px}
.side-ref .label,.prose>aside .label{margin:0 0 8px}
.side-ref .label~.label{margin-top:16px}
.ref-list{margin:0;padding:0;list-style:none}
.prose .ref-list li,.ref-list li{display:flex;justify-content:space-between;gap:12px;margin:0;padding:8px 0;border-bottom:1px solid var(--line);font-size:16px;line-height:22px;max-width:none}
.ref-list li span:last-child{text-align:right;font-weight:600}
.prose>aside>ul{margin:0;padding:0;list-style:none}
.prose>aside>ul li{margin:0;max-width:none;font-size:16px;line-height:22px}
.prose>aside>ul a{display:block;padding:7px 0;border-bottom:1px solid var(--line);text-decoration:none}
.side-art{width:min(340px,30%)}
.side-art .print{transform:rotate(2deg);margin:16px 0 0}
.notfound.has-art>.print{float:right;width:min(340px,30%);margin:16px 0 32px 32px;transform:rotate(2deg)}
.find-art{display:none}
.find-form{max-width:480px}

/* ------------------------------------------------ landing (§10.5) */
.sticky-cta,.phone-only{display:none!important}
.hero{padding:0}
.hero-grid{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-areas:none;column-gap:var(--cg);row-gap:0;align-content:center;min-height:min(calc(100svh - 72px),760px);padding-top:16px;padding-bottom:40px}
.hero-copy{grid-column:1/6;grid-row:1;align-self:end}
.hero-copy .lead{margin-top:16px}
.hero-cta{grid-column:1/6;grid-row:2;align-self:start;max-width:none;padding-top:32px}
.hero-cta .btn{width:380px}
.hero-cta .guarantee{max-width:380px;margin-top:20px}
.price-line{font-size:17px}
.hero-art{grid-column:6/13;grid-row:1/3;align-self:center}
.art{--src-w:clamp(132px,11.25vw,162px);--print-w:min(488px,max(300px,calc((100svh - 168px)/1.25)),calc(min(100vw - 2*var(--g),1248px)*7/12 - 230px));justify-content:flex-end;gap:32px;min-height:calc(var(--print-w)*1.25 + 30px)}
.art-src{width:calc(var(--src-w) + 14px);margin-top:44px}
.art-src .label{font-size:13px}
.art-src .serif{margin-top:10px;font-size:22px;line-height:24px}
.art-src .pol:nth-of-type(2){margin-top:-20px;margin-left:10px}
.art-arrow{left:auto;right:calc(var(--print-w) + 22px);top:44%;width:56px;height:48px}
.art-print{margin:14px 4px 0 0}
.tab-label{font-size:13px;line-height:16px}
.gal-wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--cg)}
.gal-wrap>.sec-head{grid-column:1/8;grid-row:1;align-self:end}
.gal-wrap>#g-tabs{grid-column:9/13;grid-row:1;align-self:end;margin:0 0 40px}
.gal-wrap>.gallery-wrap,.gal-wrap>.inputs,.gal-wrap>#g-note-together{grid-column:1/-1}
.gallery.looks-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:40px var(--cg)}
.gallery.looks-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.fams{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px var(--cg);padding-top:0}
.fams .fam{margin:0}
.fams .gallery.looks-grid{grid-template-columns:minmax(0,1fr);gap:40px}
.fams>.see-all{grid-column:1/-1}
.look-try{display:block;margin-top:8px;font:600 16px/20px var(--sans);visibility:hidden}
.look-src{left:12px;bottom:12px}
.src-th{width:40px;padding:3px 3px 8px}.src-th img{height:40px}
.src-t{margin-left:8px}
.inputs{margin-top:32px}
.inputs .pol{width:60px}
.steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--cg);max-width:none}
.steps li{grid-template-columns:1fr;gap:20px;align-items:start}
.steps .ph{width:200px;box-shadow:none;background:none}
.step-n{font-size:32px;line-height:34px;margin-bottom:8px}
.steps h3{font-size:21px;line-height:28px;margin-bottom:4px}
.steps p{font-size:18px;line-height:27px;max-width:22em}
.proof-wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--cg);grid-template-rows:auto 1fr}
.proof-wrap>.sec-head{grid-column:1/6;grid-row:1;margin-bottom:24px}
.proof-wrap>.trait-demo{grid-column:1/6;grid-row:2}
.proof-wrap>.proof-fig{grid-column:6/13;grid-row:1/3;align-self:center;max-width:none;margin:0}
.proof-fig figcaption{margin-top:16px;text-align:center}
.proof-strip{grid-template-columns:minmax(0,1.2fr) 28px minmax(0,1fr) 28px minmax(0,1.2fr);gap:14px}
.proof-strip .ico{width:28px;height:28px}
.get-wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--cg);align-items:start}
.get-wrap>.get-grid{display:contents}
.get-framed{grid-column:1/8;grid-row:1/span 4;margin:0}
.get-framed .ph{aspect-ratio:16/10}
.get-wrap>.sec-head{grid-column:8/13;grid-row:1;margin-bottom:28px}
.get-zoom{grid-column:8/13;grid-row:2;grid-template-columns:240px;gap:8px;margin:0 0 28px}
.get-zoom .print{width:240px}
.get-text{grid-column:8/13;grid-row:3}
.ticks li{font-size:18px;line-height:26px}
.trust-list{grid-template-columns:repeat(5,minmax(0,1fr));max-width:none;gap:var(--cg)}
.trust-list li{grid-template-columns:1fr;gap:12px}
.trust-list .ico{width:28px;height:28px}
.priv-wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--cg);align-items:start}
.priv-wrap>.sec-head{grid-column:1/6;grid-row:1/span 2;position:sticky;top:96px;margin:0}
.priv-wrap>.ticks,.priv-wrap>p{grid-column:6/13}
.faq-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--cg);align-items:start}
.faq-grid>.sec-head{grid-column:1/6;position:sticky;top:96px;margin:0}
.faq-grid>.faq{grid-column:6/13}
.faq summary{font-size:18px;line-height:24px;min-height:60px}
.final-wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--cg);align-items:center}
.final-copy{grid-column:1/7}
.final .btn{width:380px;min-width:0;margin-top:28px}
.final-fan{grid-column:7/13;display:flex;justify-content:center;align-items:center;padding:16px 0}
.final-fan .print{width:clamp(150px,15vw,200px);flex:none}
.final-fan .print:nth-child(1){transform:rotate(-3deg) translateY(10px);margin-right:-28px;z-index:1}
.final-fan .print:nth-child(2){transform:rotate(0deg);z-index:2}
.final-fan .print:nth-child(3){transform:rotate(3deg) translateY(10px);margin-left:-28px;z-index:1}
.lp:is([data-hero="studio"],[data-hero="window"],[data-hero="spot"],[data-hero="garden"],[data-hero="oil"],[data-hero="rainbow"]) .final-fan.copy-together{display:none}
}

@media (min-width:1280px){
:root{--g:48px}
body{font-size:19px;line-height:29px}
.h1,.prose h1,.h1-one{font-size:clamp(52px,3.9vw,56px);line-height:1.04}
.h1 em,.prose h1 em{font-size:calc(clamp(52px,3.9vw,56px) + 4px);line-height:1.04}
.h1-hero{font-size:clamp(64px,5vw,72px);line-height:1}
.h1-hero em{font-size:calc(clamp(64px,5vw,72px) + 4px);line-height:1.02}
.h2{font-size:clamp(48px,3.6vw,52px);line-height:1.04}
.h2 em{font-size:calc(clamp(48px,3.6vw,52px) + 4px);line-height:1.04}
.h3{font-size:21px;line-height:28px}
.lead{font-size:22px;line-height:32px}
.label,.kicker,.stepper,.viewer .counter{font-size:14px;line-height:18px}
/* every mono tag 14 px on a laptop (DESIGN_v2 §3.2, §10.3; design QA r2) */
.tab-label,.badge,.src-t,.ex-tag,.tile-main,.trait .label,.trait-s .label,.art-src .label{font-size:14px;line-height:18px}
.flow{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--cg)}
.flow-main{grid-column:1/10}
.flow-side{grid-column:10/13}
}
@media (min-width:1280px) and (max-width:1343.98px){:root{--side-pad:16px}}
/* short laptop windows (1366x768 and 1536x864 screens minus the browser bars): the first row of looks stays whole */
@media (min-width:1024px) and (max-height:700px){.screen{padding-top:0}.looks-top{margin-bottom:12px}.looks-top .looks-intro{margin:6px 0 8px}}

/* hover only with a mouse (§10.11), 160 ms; reduced motion keeps colours, drops movement */
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
a.link:hover,.link:hover,.head-nav a:hover,.head-link:hover,.site-foot a:hover,.prose>aside>ul a:hover{text-decoration:underline;text-decoration-thickness:2.5px}
.head-nav a,.head-link,.prose>aside>ul a{text-underline-offset:4px}
.look{cursor:pointer}
.look:hover .ph{transform:translateY(-3px);box-shadow:var(--shadow-photo-l)}
.look[aria-checked="false"]:hover .pick::before{content:"+";font:600 20px/1 var(--sans)}
.looks-grid.is-full .look[aria-checked="false"]:hover .pick::before{content:none}
.gallery .look:hover .look-try{visibility:visible}
.pcard-zone:hover,.tile.add:hover{outline-color:var(--ink);background:#fff}
.tile .tile-x,.tile .tile-star{opacity:0;transition:opacity var(--t-ui)}
.tile:hover .tile-x,.tile:hover .tile-star,.tile:focus-within .tile-x,.tile:focus-within .tile-star{opacity:1}
.pv-photo{cursor:zoom-in}
.pv-photo .pv-zoomhint{position:absolute;z-index:2;right:8px;bottom:8px;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:rgba(255,253,247,.92);font:600 14px/18px var(--sans);color:var(--ink);opacity:0;transition:opacity var(--t-ui)}
.pv-photo .pv-zoomhint .ico{width:16px;height:16px}
.pv-photo:hover .pv-zoomhint,.pv-photo:focus-visible .pv-zoomhint{display:inline-flex;opacity:1}
.pv-tick[aria-checked="false"]:hover span,.v-keep[aria-checked="false"]:hover{background:#fff}
.side-slots .is-off:hover img{filter:grayscale(.4);opacity:.8}
.ex{cursor:pointer}
.ex:hover .ph img{filter:brightness(1.04)}
.picked .x:hover,.viewer-panel .viewer-close:hover{background:var(--sand)}
.chip:hover:not([aria-pressed="true"]):not([aria-checked="true"]),.trait:hover{background:#fff}
.faq summary:hover{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
}
@keyframes drawer{from{transform:translateX(100%)}}
@keyframes headin{from{transform:translateY(-100%)}}

@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important}
.look:hover .ph,.look[aria-checked="true"] .ph{transform:none}
.shimmer{animation:none;background:var(--sand)}
.pv-sheen{display:none}
}
@media print{.bar,.sticky-cta,.consent,.toast,.site-foot{display:none}}

/* narrow phones (360 and less): keep the first-screen budgets of DESIGN_v2 §9 */
@media (max-width:370px){
.h1{font-size:29px;line-height:30px}.h1 em{font-size:31px;line-height:32px}.h1-one{font-size:28px}
.pcard-zone .t{font-size:16px}.pcard{padding:12px 11px}
.slots li{width:26px;height:33px}.v-pay .ico{display:none}.v-keep{padding:0 10px 0 8px;gap:6px}.v-pay{font-size:15px;padding:0 8px}.looks-intro{margin:4px 0 8px}#looks-tabs{margin-bottom:10px}.look-t{margin-top:8px}.look-d{line-height:19px}
}
#pv-note,#find-done{align-items:flex-start}
#pv-note .ico,#find-done .ico{margin-top:2px}