@import "./paper.css";
@font-face{font-family:Hanken;src:url('/fonts/hanken-grotesk-latin-wght-normal.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
/* Shared by every page of the website: tokens, base type, the header and the pieces every view uses. Light and dark follow the system unless a page sets data-theme.
   PF-52: the spacing scale below is the same one the ChatGPT widget uses (--pf-s* there): 4 hairline, 8 inside a group, 12 between siblings, 16 surface padding
   and header-to-content, 24 between groups, 32 between regions. Radii: 8 for thumbnails up to 72px wide, 12 for surfaces and fields; primary actions are pills. */
*{box-sizing:border-box} :root{color-scheme:light;--bg:#f7f9fa;--surface:#fff;--muted-surface:#f0f4f5;--ink:#202526;--muted:#52616b;--border:#d9e0e4;--action:#202526;--hover:#373d3e;--action-text:#fff;--focus:#147d70;--error:#9d3030;--lift:rgb(11 19 32/.16);--tint:9%;--edge:35%;--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s6:24px;--s8:32px;--pad:16px;--radius-action:28px;--r:12px;--r-thumb:8px;--offer:var(--muted-surface);--offer-edge:var(--border);scrollbar-color:var(--border) transparent}
@media(min-width:560px){:root{--pad:20px}}
:root[data-theme="dark"]{color-scheme:dark;--bg:#101719;--surface:#182124;--muted-surface:#222e32;--ink:#f3f6f7;--muted:#b9c7ce;--border:#3d5057;--action:#f3f7f8;--hover:#dce4e7;--action-text:#202526;--focus:#9ee1d2;--error:#ffb7ad;--lift:rgb(0 0 0/.5);--tint:16%;--edge:50%}@media(prefers-color-scheme:dark){:root:not([data-theme]){color-scheme:dark;--bg:#101719;--surface:#182124;--muted-surface:#222e32;--ink:#f3f6f7;--muted:#b9c7ce;--border:#3d5057;--action:#f3f7f8;--hover:#dce4e7;--action-text:#202526;--focus:#9ee1d2;--error:#ffb7ad;--lift:rgb(0 0 0/.5);--tint:16%;--edge:50%}}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 Hanken,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{text-underline-offset:4px}input{caret-color:var(--ink)}
::selection{background:var(--action);color:var(--action-text)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
/* The bar and the page share one gutter (--pad, the widget's) and one measure (850px), so the wordmark lines up with the content below it. */
.brand{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);min-height:56px;padding:0 max(var(--pad),calc((100% - 850px)/2 + var(--pad)));background:var(--bg);font-weight:700;color:var(--ink)}
.brand>span:first-child{font-size:25px;font-weight:750;letter-spacing:-.04em;text-transform:lowercase}.brand>span:first-child::after{content:".";color:var(--focus)}
@media(any-pointer:coarse){.brand{min-height:64px}}
main{max-width:850px;margin-inline:auto;padding:var(--pad) var(--pad) var(--s8)}
h1{font-size:2rem;line-height:1.12;letter-spacing:-.035em;margin:0 0 var(--s2);font-weight:560}
p{margin:0 0 var(--s3)}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* The landing action language, sized for a transaction: charcoal pill, quiet hover, visible focus. */
.primary{display:flex;align-items:center;justify-content:center;min-height:48px;width:100%;padding:var(--s2) var(--s4);border:0;border-radius:var(--radius-action);background:var(--action);color:var(--action-text);font:inherit;font-size:1rem;font-weight:600;transition:background .2s;text-decoration:none;cursor:pointer}
.primary:hover:not(:disabled){background:var(--hover)}
.primary:disabled{background:var(--muted-surface);color:var(--muted);box-shadow:inset 0 0 0 1px var(--border);cursor:not-allowed}
/* A page's opening block, the print card's header: centred, 8px from heading to text, text no wider than 40 characters. */
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:var(--s6)}
.hero h1,.hero>p{text-wrap:balance}
/* The centred hero's subhead is the widget's lead: 15px/22px (widget/main.css, .pf-intro__head p). */
.hero>p{max-width:40ch;margin:0;color:var(--muted);font-size:.9375rem;line-height:22px}
.hero>p+p{margin-top:var(--s3)}
.hero .primary{max-width:320px;margin-top:var(--s4)}
.hero--solo{margin-top:var(--s6)}
.hero__icon{display:grid;place-items:center;margin-bottom:var(--s3);color:var(--action)}
.hero__icon svg{width:48px;height:48px}
/* Image loading, the widget's spinner restated with this site's tokens. A picture's box is held while it loads; a spinner of ten rounded
   ticks (an iOS-style activity indicator with a tapered tail) fades in only if the wait passes 350 ms; a picture that waited fades in out of a blur. */
.spin{position:relative;display:block;flex:none;width:var(--size,28px);height:var(--size,28px);color:var(--spin-color,var(--action));animation:spin .9s steps(10) infinite}
.spin i{position:absolute;inset:0;transform:rotate(calc(var(--i)*-36deg))}
.spin i::before{content:"";position:absolute;left:50%;top:3%;width:max(9%,1.5px);height:calc(27% - var(--i)*1.3%);transform:translateX(-50%);border-radius:999px;background:currentColor;opacity:calc(1 - var(--i)*.092)}
.spin i:nth-child(1){--i:0}.spin i:nth-child(2){--i:1}.spin i:nth-child(3){--i:2}.spin i:nth-child(4){--i:3}.spin i:nth-child(5){--i:4}
.spin i:nth-child(6){--i:5}.spin i:nth-child(7){--i:6}.spin i:nth-child(8){--i:7}.spin i:nth-child(9){--i:8}.spin i:nth-child(10){--i:9}
.wait{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;opacity:0;animation:wait-in .25s ease-out .35s forwards}
.pic{position:relative;display:block;overflow:hidden;background:var(--pic-bg,var(--muted-surface))}
.pic:not([data-state=loading])>.wait{display:none}
.pic>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.pic[data-state=loading]>img,.pic[data-state=error]>img{opacity:0}
.pic[data-state=loaded][data-reveal=soft]>img{animation:reveal .5s cubic-bezier(.16,1,.3,1) both}
/* A picture that failed to load: the whole box is a button that asks again (order.html pic, fillImages). */
.again{display:none;position:absolute;inset:0;width:100%;place-items:center;border:0;background:none;color:var(--muted);cursor:pointer}
.again:hover{color:var(--ink)}
.pic[data-state=error]>.again{display:grid}
.again svg{width:24px;height:24px}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes wait-in{to{opacity:1}}
@keyframes reveal{from{opacity:0;filter:blur(12px)}}
@keyframes reveal-fade{from{opacity:0}}
@keyframes breathe{50%{opacity:.4}}
@media(prefers-reduced-motion:reduce){.spin{animation:breathe 1.6s ease-in-out infinite}.pic[data-state=loaded][data-reveal=soft]>img{animation-name:reveal-fade;animation-duration:.25s}}

/* Paper surrounds the ordering surfaces; cards, fields and print previews keep their solid fills. */
:root { --bg: #fff; --order-paper: var(--pf-paper-background); }
:root[data-theme="dark"] { --order-paper: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) { --order-paper: none; } }
body { background-image: var(--order-paper); background-size: 512px 512px; }
.brand { background: transparent; }
@media (forced-colors: active) { body { background-image: none; } }

.policy-links{max-width:850px;margin:auto;padding:var(--s4) var(--pad) var(--s8)}
.policy-links a{color:var(--action);text-underline-offset:3px}