/* ============================================================
BASE
============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip} /* iPhone Safari ignores overflow-x:hidden on body: this stops sideways scrolling */
[hidden]{display:none!important} /* hidden always wins over a card's display style */
.nowrap{white-space:nowrap} /* keeps a phrase (and its emoji) together on one line */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
body{
margin:0;background:var(--ground);color:var(--ink);
font-family:var(--f-body);font-size:var(--t-body);line-height:1.5;
-webkit-font-smoothing:antialiased;overflow-x:clip;
}
h1,h2,h3{font-family:var(--f-display);font-weight:600;margin:0;line-height:1.15;letter-spacing:-.02em;text-wrap:balance}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}
img,video{display:block;max-width:100%}
:focus-visible{outline:2.5px solid var(--ink);outline-offset:3px;border-radius:6px}
.page{width:100%;max-width:var(--col);margin-inline:auto;padding:clamp(2rem,8vw,3rem) var(--gutter) 2rem;display:flex;flex-direction:column;gap:var(--section-gap)}
.sec{display:flex;flex-direction:column;gap:var(--card-gap)}
.small{font-size:var(--t-small);line-height:1.5}
/* brand-coloured cards keep their light look in dark mode */
.feat,.mid,.list-card,.club,.brands,.pop{
--ink:var(--brand-ink);--ink-2:var(--brand-ink-2);--ink-3:var(--brand-ink-3);
--ground:var(--brand-paper);--ground-2:var(--brand-paper-2);--card:var(--brand-card);
--edge:var(--brand-ink);--hairline:var(--brand-hairline);--hairline-2:var(--brand-hairline-2);
color:var(--ink);
}
/* section label: the portfolio's pink tag pill, left-aligned */
.sec-tag{
align-self:flex-start;display:inline-flex;align-items:center;gap:.55rem;margin:0;
color:var(--ink-2);font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.12em;text-transform:uppercase;font-weight:500;line-height:1.4;
}
.sec-tag svg{color:var(--blush-deep)}
.sec-tag svg{width:16px;height:16px;flex:none;fill:currentColor} /* solid icons */
/* buttons */
.btn{
display:flex;align-items:center;justify-content:center;gap:.55rem;
min-height:54px;padding:.85rem 1.4rem;border-radius:999px;
font-family:var(--f-display);font-weight:600;font-size:var(--t-body);letter-spacing:-.01em;
background:var(--edge);color:var(--ground);text-decoration:none;
transition:transform .18s ease,box-shadow .18s ease;
}
.btn:active{transform:scale(.98)}
.btn-pink{background:var(--blush-pop);color:var(--brand-ink)}
.btn .arw{transition:transform .18s ease}
@media (hover:hover){.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}.btn:hover .arw{transform:translateX(3px)}}
/* placeholder cover (until the real one is in) */
.ph{display:grid;place-items:center;background:var(--ground-2);color:var(--ink-3);
font-family:var(--f-mono);font-size:var(--t-mono);font-weight:500;letter-spacing:.12em;text-transform:uppercase;text-align:center}
/* ============================================================
HEADER
============================================================ */
.top{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.8rem}
.avatar{width:clamp(104px,28vw,124px);height:auto;aspect-ratio:1;border-radius:50%;object-fit:cover;object-position:50% 30%;
border:5px solid var(--card);box-shadow:var(--shadow)}
.handle{color:var(--ink-2);font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.12em;font-weight:500}
/* value proposition: the big line, like the portfolio's "Hi, I'm Yule" */
.top h1{font-size:var(--t-name);font-weight:800;letter-spacing:-.03em;line-height:1.14;max-width:16ch;margin-top:.9rem}
/* topic tags under the headline */
.topics{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;margin-top:1.4rem}
/* plain text, not pills: they aren't tappable, so they mustn't look like buttons */
.topics{gap:.15rem .55rem}
.topics li{color:var(--ink);font-size:var(--t-small);font-weight:600}
.topics li + li::before{content:"·";margin-right:.55rem;color:var(--ink-3)}
.socials{display:flex;gap:.6rem}
.icon-btn{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--blush-soft);
color:var(--blush-deep);border:1.5px solid var(--blush-deep)}
.icon-btn svg{width:20px;height:20px}
/* ============================================================
THREE CARD SIZES — the more important the product, the bigger its card
1. .feat feature card: your #1 product, cover on top, full-width button
2. .mid medium card: one coloured card per product, cover on the left
3. .row small: rows inside the Shop / Free / Tools list cards
Add a small tag to any of them with New.
============================================================ */
.feat{background:var(--blush-soft);border-radius:var(--r-lg);padding:.6rem .6rem 1rem;display:flex;flex-direction:column;gap:.8rem;border:1px solid var(--hairline-2)}
.feat-cover{position:relative;display:block;width:100%;aspect-ratio:16/10;border-radius:var(--r-md);overflow:hidden;background:var(--ground-2)}
.feat-cover > img,.feat-cover > .ph{width:100%;height:100%;object-fit:cover}
.feat-body{padding-inline:.45rem;display:flex;flex-direction:column;align-items:flex-start;gap:.2rem}
/* one text block for every big card (feature, Mail Club, brands): title, subheadline, then the action */
.feat-body :is(h2,h3){font-size:var(--t-feat)}
.feat-body > .btn,.feat-body > .mailbox{margin-top:.7rem}
.feat-body > .mailbox{align-self:stretch}
.feat-body h3 a{text-decoration:none}
.price{font-family:var(--f-display);font-weight:600;font-size:var(--t-body);white-space:nowrap}
/* quiet button: white pill with a round dark arrow (like the portfolio footer buttons) */
/* the call-to-action button: a normal, left-aligned pill (2026-10-21 — the full-width version with the round
arrow looked like a "slide to unlock" slider) */
.btn-soft{align-self:flex-start;justify-content:center;gap:.45rem;min-height:48px;padding:0 1.35rem;
background:var(--blush-pop);color:var(--brand-ink);border:1px solid var(--blush-deep)}
.btn-soft .btn-price{color:var(--ink-2)}
.arw-dot{display:inline-grid;place-items:center;flex:none;transition:transform .18s ease}
@media (hover:hover){.btn-soft:hover .arw-dot{transform:translateX(2px)}}
/* small tag ("New", "Just launched"…) — works on all three card sizes */
.tag{display:inline-flex;align-items:center;align-self:flex-start;padding:.22rem .6rem;border-radius:999px;
background:var(--blush-pop);color:var(--on-blush);font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.12em;text-transform:uppercase;font-weight:500;line-height:1.4}
/* on a cover: top-left corner */
.tag.on-img{position:absolute;z-index:2;top:.6rem;left:.6rem}
.thumb .tag.on-img{top:.35rem;left:.35rem;padding:.15rem .45rem}
/* medium card */
.mid{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.9rem;padding:.75rem .9rem .75rem .75rem;
background:var(--butter-soft);border-radius:var(--r-lg);border:1px solid var(--hairline-2);--thumb:100px}
.mid .thumb{border-radius:var(--r-md)}
.mid:has(h3 a:focus-visible){outline:2.5px solid var(--ink);outline-offset:2px}
/* play button: centred over the cover, "Watch demo" underneath; opens the demo in a popup */
.has-video{cursor:pointer}
.feat-cover.has-video::after{content:"";position:absolute;inset:0;background:var(--scrim)}
.play{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;
color:var(--on-photo);font-family:var(--f-display);font-weight:600;font-size:var(--t-xs);text-shadow:var(--photo-shadow)}
.play-dot{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:var(--play-bg);color:var(--play-ink);box-shadow:var(--shadow)}
.play-dot svg{width:22px;height:22px;margin-left:3px}
/* ============================================================
LIST CARDS (shop, free, creator tools): rows inside one white card
============================================================ */
.list-card{background:var(--card);border-radius:var(--r-lg);border:1px solid var(--hairline-2);padding:.3rem 0}
.row{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.9rem;padding:.85rem 1rem}
.row + .row::before{content:"";position:absolute;top:0;left:calc(1rem + var(--thumb) + .9rem);right:0;border-top:1px solid var(--hairline)}
.row{--thumb:84px}
.thumb{position:relative;width:var(--thumb);aspect-ratio:1;border-radius:var(--r-sm);overflow:hidden;background:var(--ground-2);z-index:2}
.thumb img,.thumb .ph{width:100%;height:100%;object-fit:cover}
.thumb .mini-play{position:absolute;inset:auto auto .35rem .35rem;width:28px;height:28px;border-radius:50%;
display:grid;place-items:center;background:var(--play-bg);color:var(--play-ink);box-shadow:var(--shadow)}
.thumb .mini-play svg{width:16px;height:16px}
.row-text{min-width:0;display:flex;flex-direction:column;gap:.15rem}
.row-text h3{font-size:var(--t-title)} /* medium cards and rows: one title size */
/* the title link stretches over the whole row, so the row is one big tap target (the thumbnail sits above it) */
.row-text h3 a{text-decoration:none}
.row-text h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.row-sub{color:var(--ink-2);font-size:var(--t-small)} /* every subheadline: same size */
.row-meta{display:flex;align-items:center;gap:.5rem;margin-top:.2rem}
.free-pill{display:inline-flex;padding:.22rem .6rem;border-radius:999px;font-family:var(--f-mono);font-size:var(--t-mono);
letter-spacing:.12em;text-transform:uppercase;font-weight:500;line-height:1.4;background:var(--blush-pop);color:var(--on-blush)}
/* affiliate discount code: tap to copy */
.code-copy{position:relative;z-index:2;display:inline-flex;align-items:center;gap:.5rem;min-height:34px;padding:.2rem .3rem .2rem .7rem;
border-radius:999px;background:var(--butter);color:var(--on-butter);border:1px dashed var(--butter-deep)}
.code-copy::after{content:"";position:absolute;inset:-5px} /* a bigger tap area than it looks */
.code-copy code{font-family:var(--f-mono);font-size:var(--t-xs);font-weight:500}
.code-copy-act{display:inline-flex;align-items:center;gap:.25rem;padding:.2rem .55rem;border-radius:999px;background:var(--card);
font-family:var(--f-display);font-size:var(--t-xs);font-weight:600;color:var(--ink)}
.code-copy-act svg{width:13px;height:13px}
.code-copy.done .code-copy-act{background:var(--blush-pop);color:var(--on-blush)}
.arrow{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--card);color:var(--ink);border:1px solid var(--hairline);flex:none}
.arrow svg,.arw-dot svg{width:17px;height:17px;stroke-width:1.75}
.arw-dot svg{width:16px;height:16px;stroke-width:2} /* thin arrows: a quiet hint, not a second button */
.row-text h3 a:focus-visible{outline:none}
.row:has(h3 a:focus-visible){outline:2.5px solid var(--ink);outline-offset:-4px;border-radius:var(--r-md)}
.tools .row{--thumb:56px}
.tools .thumb{border-radius:50%}
.disclose{color:var(--ink-3);padding-inline:.25rem;font-size:var(--t-xs)}
/* ============================================================
MAIL CLUB
============================================================ */
/* same inner spacing as the feature card: image, then .feat-body */
.club{background:var(--blush);border-radius:var(--r-lg);padding:.6rem .6rem 1rem;display:flex;flex-direction:column;gap:.8rem;border:1px solid var(--hairline-2)}
.club-img-link{display:block}
.club-img{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;border-radius:var(--r-md)}
/* ============================================================
WORK WITH ME (brands)
============================================================ */
.brands{background:var(--butter-soft);border-radius:var(--r-lg);padding:1rem .6rem;border:1px solid var(--hairline-2)}
/* cards that start with a headline instead of an image get more room above and below it */
.brands{padding-top:1.5rem;padding-bottom:1.3rem}
/* copy-email box: the same pill as the portfolio */
.mailbox{display:flex;flex-wrap:nowrap;align-items:center;gap:.4rem;max-width:100%;
background:var(--card);color:var(--ink);border-radius:999px;padding:.4rem .4rem .4rem .95rem;box-shadow:var(--shadow)}
.mailbox .mail-link{display:block;min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:none}
.mailbox code{font-family:var(--f-mono);font-size:var(--t-xs);font-weight:500;user-select:all}
.copy-btn{flex:none;min-height:44px;padding:.55rem 1.05rem;border-radius:999px;background:var(--edge);color:var(--ground);
font-weight:600;font-size:var(--t-xs);font-family:var(--f-display);white-space:nowrap}
.copy-btn.done{background:var(--blush-pop);color:var(--on-blush)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--hairline)}
/* ============================================================
FOOTER
============================================================ */
.foot{display:flex;flex-direction:column;align-items:center;gap:.2rem;text-align:center;color:var(--ink-3);font-size:var(--t-small)}
.foot-legal{display:flex;gap:1.25rem}
.foot-legal a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
@media (hover:hover){.foot-legal a:hover{color:var(--ink)}}
/* ============================================================
VIDEO POPUP
============================================================ */
.vid{border:0;padding:0;background:none;overflow:visible;max-width:92vw;max-height:92svh}
.vid::backdrop{background:var(--overlay)}
.vid video{max-width:92vw;max-height:80svh;width:auto;border-radius:var(--r-md);background:var(--brand-ink);box-shadow:var(--shadow-lift)}
.vid-bar{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-top:.75rem}
.vid-name{color:var(--on-photo);font-family:var(--f-display);font-weight:600}
.vid-bar .btn{min-height:46px;padding:.55rem 1.1rem}
/* email popup */
.pop{border:0;padding:1.6rem 1.25rem 1.3rem;width:min(92vw,420px);overflow:visible;border-radius:var(--r-lg);
background:var(--blush-soft);display:none;flex-direction:column;gap:.9rem;box-shadow:var(--shadow-lift);
--ink:var(--brand-ink);--card:var(--brand-card);--edge:var(--brand-ink);--ground:var(--brand-paper);color:var(--ink)}
.pop[open]{display:flex}
.pop::backdrop{background:var(--overlay)}
.vid-close{position:absolute;top:-14px;right:-14px;width:44px;height:44px;border-radius:50%;background:var(--card);color:var(--ink);box-shadow:var(--shadow);font-size:1rem}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
/* ============================================================
FREEBIE PAGES (free//) — reuse the cards above
============================================================ */
.back{align-self:flex-start;display:inline-flex;align-items:center;gap:.4rem;min-height:44px;margin-bottom:calc(var(--card-gap) - var(--section-gap));
color:var(--ink-2);text-decoration:none;font-weight:600;font-size:var(--t-small)}
.back svg{width:18px;height:18px}
.fp-title{font-size:var(--t-name);font-weight:800;letter-spacing:-.03em;line-height:1.14}
.inside{padding:.4rem 1rem}
.inside li{position:relative;padding:.75rem 0 .75rem 1.9rem;color:var(--ink-2)}
.inside li + li{border-top:1px solid var(--hairline)}
.inside li::before{content:"";position:absolute;left:0;top:1.05rem;width:1.1rem;height:1.1rem;border-radius:50%;background:var(--blush-pop)}
.inside li::after{content:"";position:absolute;left:.36rem;top:1.25rem;width:.32rem;height:.55rem;border:solid var(--on-blush);border-width:0 2px 2px 0;transform:rotate(45deg)}
.field{min-height:52px;padding:0 1.2rem;border-radius:999px;border:1px solid var(--hairline);background:var(--card);color:var(--ink);
font-family:var(--f-body);font-size:1rem} /* 16px: iPhones don't zoom in on fields this size */
.field::placeholder{color:var(--ink-3)}
.fp-note{margin-top:.2rem;color:var(--ink-3);font-size:var(--t-xs);text-align:center;align-self:stretch}
.fp-note a{color:inherit}
html{scroll-behavior:smooth}
#get{scroll-margin-top:1rem}
/* ============================================================
KIT FORM — Kit's embed (free//), dressed in the site's design.
Kit's own CSS is left out of the embed; these rules replace it.
============================================================ */
.kit-embed{align-self:stretch;margin-top:.7rem}
.kit-embed .formkit-fields{display:flex;flex-direction:column;gap:.5rem}
.kit-embed .field{width:100%}
.kit-embed .optin{border:0;margin:.35rem 0 .15rem;padding:0;min-width:0}
.kit-embed .optin legend{padding:0;margin-bottom:.35rem;font-weight:600;font-size:var(--t-small);color:var(--ink)}
.kit-embed .formkit-checkboxes{display:flex;align-items:flex-start;gap:.6rem;min-height:44px;padding-top:.1rem;font-size:var(--t-small);color:var(--ink-2)}
.kit-embed .formkit-checkboxes label{cursor:pointer}
.kit-embed .formkit-checkbox{appearance:none;-webkit-appearance:none;flex:none;width:22px;height:22px;margin:0;border-radius:7px;
border:1.5px solid var(--blush-deep);background:var(--card);display:grid;place-items:center;cursor:pointer}
.kit-embed .formkit-checkbox::after{content:"";width:6px;height:11px;margin-top:-2px;border:solid var(--on-blush);border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .15s ease}
.kit-embed .formkit-checkbox:checked{background:var(--blush-pop);border-color:var(--blush-pop)}
.kit-embed .formkit-checkbox:checked::after{transform:rotate(45deg) scale(1)}
.kit-embed .formkit-submit{align-self:flex-start;cursor:pointer;margin-top:.2rem}
.kit-embed .formkit-spinner{display:none}
.kit-embed .formkit-submit[data-active]{opacity:.6;pointer-events:none}
/* messages Kit adds: errors, and the thank-you after signing up */
.kit-embed .formkit-alert{margin:0 0 .6rem;padding:0;list-style:none}
.kit-embed .formkit-alert:empty{display:none}
.kit-embed .formkit-alert-error{color:var(--blush-deep);font-size:var(--t-small);font-weight:600}
.kit-embed .formkit-alert-success{display:block;padding:1rem 1.1rem;border-radius:var(--r-md);background:var(--card);color:var(--ink);
font-family:var(--f-display);font-weight:600;font-size:var(--t-body)}
/* "Built with Kit": kept, but small and quiet */
.kit-embed .formkit-powered-by-convertkit-container{display:flex;margin-top:1.4rem}
.kit-embed .formkit-powered-by-convertkit{color:var(--ink-3);font-size:var(--t-xs);text-decoration:none;min-height:32px;display:inline-flex;align-items:center}
/* confirmation that replaces the sign-up card */
.signup.is-done > :not(.done){display:none}
.done{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.35rem;padding:1.6rem .9rem 1.2rem}
.done-icon{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--card);color:var(--blush-deep);margin-bottom:.5rem}
.done-icon svg{width:26px;height:26px}
.done-title{font-size:var(--t-feat)}
.done-title:focus{outline:none}
.done .row-sub{max-width:30ch}
/* "What's inside" with an emoji per point instead of the pink tick */
.inside li:has(.li-icon){display:flex;gap:.7rem;padding-left:0}
.inside li:has(.li-icon)::before,.inside li:has(.li-icon)::after{content:none}
.li-icon{flex:none;width:1.4rem;text-align:center}
/* ============================================================
FREEBIE PAGE LAYOUT (2026-10-21): product-detail style — big cover with a fun cut,
then text straight on the page. No cards, except the pink confirmation after signing up.
============================================================ */
.defs{position:absolute;width:0;height:0}
/* back button floats in the top-left corner, so it's always one tap away on long pages */
.back-btn{position:fixed;z-index:20;top:calc(.75rem + env(safe-area-inset-top));left:max(var(--gutter),calc((100vw - var(--col)) / 2 + var(--gutter)));
width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
background:var(--card);color:var(--brand-ink);border:1px solid var(--hairline);box-shadow:var(--shadow)}
/* white at the top (calm next to the hero), plum-black with a white arrow once people scroll: a dark layer fades in
(the arrow's colour fades with it, the one colour transition on the site: a tiny icon, so no cost) */
.back-btn::before{content:"";position:absolute;inset:-1px;border-radius:50%;background:var(--brand-ink-dark);opacity:0;transition:opacity .3s cubic-bezier(.2,.7,.3,1)}
.back-btn.is-scrolled::before{opacity:1}
.back-btn svg{position:relative;transition:color .3s cubic-bezier(.2,.7,.3,1)}
.back-btn.is-scrolled svg{color:var(--brand-paper)}
@media (prefers-reduced-motion:reduce){.back-btn::before,.back-btn svg{transition:none}}
.page:has(> .back-btn){padding-top:calc(4.25rem + env(safe-area-inset-top))}
.back-btn svg{width:20px;height:20px}
.fp-hero{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem}
.fp-cover{position:relative;width:100%;aspect-ratio:4/3;margin-bottom:.6rem}
.fp-cover > img,.fp-cover > .ph{width:100%;height:100%;object-fit:cover;clip-path:url(#fun-cut)}
.fp-sub{color:var(--ink-2)}
.fp-hero .btn{margin-top:.6rem}
.gallery{display:flex;gap:var(--card-gap);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
.gallery::-webkit-scrollbar{display:none}
.gallery li{flex:0 0 86%;aspect-ratio:16/10;border-radius:var(--r-md);overflow:hidden;scroll-snap-align:start;background:var(--ground-2)}
.gallery li > img,.gallery li > .ph{width:100%;height:100%;object-fit:cover}
.signup .feat-body{padding-inline:0}
.signup.is-done{background:var(--blush);border-radius:var(--r-lg);border:1px solid var(--hairline-2)}
/* ============================================================
FOOTER CARD (main page, 2026-10-21): pink card, brand sign-off, and a cut-out
object photo breaking out of the bottom-right corner (like the photos on the portfolio)
============================================================ */
.foot-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:.35rem;text-align:center;
margin-bottom:clamp(4.5rem,20vw,5.5rem);padding:1.8rem 1.25rem 2.6rem;border-radius:var(--r-lg);
background:var(--blush);border:1px solid var(--hairline-2);
--ink:var(--brand-ink);--ink-2:var(--brand-ink-2);--ink-3:var(--brand-ink-3);--card:var(--brand-card);--hairline:var(--brand-hairline);color:var(--ink)}
.foot-brand{font-family:var(--f-display);font-size:var(--t-feat);font-weight:800;letter-spacing:-.03em;line-height:1.14}
.foot-line{font-size:var(--t-small);color:var(--ink-2)}
.foot-card .socials{margin:.6rem 0 .2rem}
.foot-card .foot-legal{display:flex;gap:1.25rem;font-size:var(--t-small);color:var(--ink-2)}
.foot-card .foot-legal a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.foot-copy{font-size:var(--t-xs);color:var(--ink-3)}
.foot-cutout{position:absolute;right:-.5rem;bottom:calc(-1 * clamp(4rem,19vw,5rem));width:31%;aspect-ratio:1;
rotate:-10deg;pointer-events:none;object-fit:contain;filter:drop-shadow(0 14px 18px var(--cutout-shadow))}
.foot-cutout.ph{border:1.5px dashed var(--ink-3);border-radius:var(--r-md);background:var(--brand-paper-2);filter:none}
/* one-line footer (freebie pages): © · Legal notice · Privacy */
.foot-row{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:0 .6rem}
.foot-row > * + *::before{content:"·";margin-right:.6rem;color:var(--ink-3)}
.foot-row a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.foot-row p{display:inline-flex;align-items:center;min-height:44px}
/* product pages (shop//): a closing "buy" block after the gallery */
.fp-buy{display:flex;flex-direction:column;align-items:flex-start;gap:.8rem}
.fp-buy h2{font-size:var(--t-feat)}
/* ============================================================
SALES PAGE (shop//) — v2 2026-10-21 “let it breathe”: image-first hero like the freebie page,
double the space between sections, centred big section intros, step cards with a screenshot on top,
one pink block (Who it’s for), roomy lists in reading size.
============================================================ */
.sales{--section-gap:clamp(4.5rem,18vw,6rem)}
.hero-label{margin-top:.4rem}
.price-note{font-size:var(--t-xs);color:var(--ink-3)}
.fp-hero .price-note{margin-top:-.1rem}
.s-sec{display:flex;flex-direction:column;gap:1.6rem}
/* section intro: centred label + big calm headline */
.s-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.7rem;padding-inline:.5rem}
.s-head .sec-tag{align-self:center}
.s-head h2{font-size:var(--t-name);font-weight:600;letter-spacing:-.03em;line-height:1.14;text-wrap:balance}
.s-head .fp-sub{max-width:32ch}
.s-cta{display:flex;flex-direction:column;align-items:center;gap:.5rem;margin-top:.4rem}
.s-cta .btn{align-self:center}
/* what it does: big step cards */
.step-cards{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.1rem}
.step-card{background:var(--card);border:1px solid var(--hairline-2);border-radius:var(--r-lg);overflow:hidden;
--ink:var(--brand-ink);--ink-2:var(--brand-ink-2);--hairline:var(--brand-hairline);color:var(--ink)}
.step-img{aspect-ratio:16/10;background:var(--butter-soft)}
.step-img > img,.step-img > .ph{width:100%;height:100%;object-fit:cover;background:var(--butter-soft)}
.step-body{padding:1.6rem 1.2rem 1.8rem;display:flex;flex-direction:column;gap:.8rem}
.step-no{display:flex;align-items:center;gap:.6rem;font-family:var(--f-mono);font-size:var(--t-small);font-weight:500;letter-spacing:.12em;color:var(--blush-deep)}
.step-no::before{content:"";width:1.6rem;height:2px;border-radius:2px;background:var(--blush-pop)}
.step-body h3{font-size:var(--t-feat)}
.ticks{display:flex;flex-direction:column;gap:.9rem;padding-top:.2rem;color:var(--ink-2);font-size:var(--t-body)}
.ticks li{position:relative;padding-left:1.8rem}
.ticks li::before{content:"";position:absolute;left:0;top:.2rem;width:1.1rem;height:1.1rem;border-radius:50%;background:var(--blush-pop)}
.ticks li::after{content:"";position:absolute;left:.39rem;top:.38rem;width:.3rem;height:.55rem;border:solid var(--on-blush);border-width:0 2px 2px 0;transform:rotate(45deg)}
/* see it in action */
.demos{display:flex;flex-direction:column;gap:2.2rem}
.demos li{display:flex;flex-direction:column;gap:.35rem}
.demo{position:relative;display:block;width:100%;aspect-ratio:16/10;border-radius:var(--r-lg);overflow:hidden;background:var(--ground-2);margin-bottom:.7rem}
.demo > img,.demo > .ph{width:100%;height:100%;object-fit:cover}
.demo.has-video::after{content:"";position:absolute;inset:0;background:var(--scrim)}
.demos h3{font-size:var(--t-title)}
/* who it's for: the one pink block */
.who{background:var(--blush);border-radius:var(--r-lg);padding:2.4rem 1.4rem 2.2rem;
--ink:var(--brand-ink);--ink-2:var(--brand-ink-2);--ink-3:var(--brand-ink-3);--hairline:var(--brand-hairline);color:var(--ink)}
.who-list{display:flex;flex-direction:column}
.who-list li{padding:1rem 0;font-size:var(--t-body);text-align:center}
.who-list li + li{border-top:1px solid var(--hairline)}
.who-end{text-align:center;font-family:var(--f-display);font-weight:600;font-size:var(--t-title);line-height:1.15;text-wrap:balance}
/* what you get */
.get-list{padding:.4rem 1.3rem}
.get-list li{display:flex;flex-direction:column;gap:.2rem;padding:1.1rem 0}
.get-list li + li{border-top:1px solid var(--hairline)}
.get-list strong{font-family:var(--f-display);font-weight:600;font-size:var(--t-title)}
.get-list span{font-size:var(--t-small);color:var(--ink-2)}
/* FAQ: tap to open */
.faq{padding:0 1.3rem}
.faq details + details{border-top:1px solid var(--hairline)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:64px;cursor:pointer;list-style:none;
font-family:var(--f-display);font-weight:600;font-size:var(--t-body)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
background:var(--blush);color:var(--ink);font-weight:600;transition:rotate .2s ease}
.faq details[open] summary::after{rotate:45deg}
.faq details p{padding:0 0 1.2rem;color:var(--ink-2)}
/* final push */
.s-final{padding-bottom:1rem}
/* ============================================================
FULL SALES PAGE extras (shop/ugc-creator-hub/, 2026-10-21)
============================================================ */
.btn-price s{opacity:.55;margin-right:.15rem}
/* hero: the product animation first, then very little text, all centred */
.s-hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.8rem}
.s-hero-text{display:flex;flex-direction:column;align-items:center;gap:.8rem}
.s-hero-text .sec-tag{align-self:center}
.s-hero .fp-title{max-width:14ch}
/* the animated hub on a laptop (illustration: its tiny labels sit outside the type scale on purpose) */
.hub-stage{position:relative;width:100%;padding:1.2rem .4rem 1.6rem}
.laptop{position:relative}
.hub-screen{aspect-ratio:16/10;border:7px solid var(--brand-ink);border-bottom-width:9px;border-radius:14px 14px 4px 4px;
background:var(--brand-paper);overflow:hidden;display:flex;flex-direction:column}
.laptop-base{height:9px;margin:0 -7%;border-radius:0 0 12px 12px;background:var(--ground-2);border:1px solid var(--hairline)}
.hub-top{display:flex;align-items:center;gap:4px;padding:6px 8px;border-bottom:1px solid var(--brand-hairline);font-size:8px;color:var(--brand-ink-2)}
.hub-top span{width:5px;height:5px;border-radius:50%;background:var(--brand-hairline)}
.hub-top b{margin-left:6px;font-family:var(--f-display);font-weight:600;font-size:9px;color:var(--brand-ink)}
.hub-board{--g:6px;position:relative;flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--g);padding:8px}
.hub-col{display:flex;flex-direction:column;gap:5px;padding:5px;border-radius:8px;background:var(--brand-paper-2)}
.hub-col p{font-family:var(--f-mono);font-size:7px;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-ink-3);margin-bottom:2.6rem}
.hub-col i{display:block;height:1.35rem;border-radius:5px;background:var(--brand-card);border:1px solid var(--brand-hairline-2)}
.hub-mover{position:absolute;left:calc(8px + 5px);top:calc(8px + 5px + 14px);width:calc((100% - 16px - 2 * var(--g)) / 3 - 10px);
padding:5px 6px;border-radius:6px;background:var(--blush);border:1px solid var(--blush-deep);text-align:left;
display:flex;flex-direction:column;line-height:1.2;box-shadow:var(--shadow)}
.hub-mover b{font-family:var(--f-display);font-weight:600;font-size:9px;color:var(--brand-ink)}
.hub-mover small{font-size:7px;color:var(--brand-ink-2)}
.hub-chip{position:absolute;z-index:2;padding:.45rem .8rem;border-radius:999px;background:var(--card);color:var(--brand-ink);
border:1px solid var(--hairline-2);box-shadow:var(--shadow-lift);font-size:var(--t-xs);white-space:nowrap;--ink:var(--brand-ink)}
.hub-chip b{font-weight:600}
.chip-paid{right:-.3rem;top:-.2rem}
.chip-usage{left:-.3rem;bottom:.2rem}
@media (prefers-reduced-motion:no-preference){
}
/* the brand card travels Pitched → In talks → Booked, then starts again */
@keyframes hub-move{
0%,14%{translate:0 0;opacity:1}
24%,40%{translate:calc(100% + 10px + var(--g)) 0}
50%,86%{translate:calc(200% + 20px + 2 * var(--g)) 0;opacity:1}
94%{translate:calc(200% + 20px + 2 * var(--g)) 0;opacity:0}
95%,100%{translate:0 0;opacity:0}
}
@keyframes chip-pop{
0%,52%{opacity:0;scale:.85}
58%,88%{opacity:1;scale:1}
96%,100%{opacity:0;scale:.95}
}
@media (prefers-reduced-motion:reduce){.hub-mover{translate:calc(200% + 20px + 2 * var(--g)) 0}}
/* band: one slowly scrolling line, edge to edge */
.band{margin-inline:calc(-1 * var(--gutter));overflow:hidden;background:var(--blush);padding:.85rem 0;
font-family:var(--f-mono);font-size:var(--t-mono);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--on-blush)}
.band-track{display:flex;width:max-content}
.band-track span{white-space:pre;padding-right:0}
@media (prefers-reduced-motion:no-preference){.band-track{animation:band 32s linear infinite}}
@keyframes band{to{translate:-50% 0}}
/* proof: four product facts in cream tiles */
.facts{display:grid;grid-template-columns:1fr 1fr;gap:var(--card-gap)}
.facts li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.25rem;padding:1.3rem .8rem;
border-radius:var(--r-lg);background:var(--butter-soft);border:1px solid var(--hairline-2);color:var(--brand-ink)}
.facts b{font-family:var(--f-display);font-weight:800;font-size:var(--t-name);letter-spacing:-.03em;line-height:1.14}
.facts span{font-size:var(--t-small);color:var(--brand-ink-2)}
/* how it compares */
.compare{background:var(--card);border:1px solid var(--hairline-2);border-radius:var(--r-lg);padding:.4rem 1rem;
--ink:var(--brand-ink);--ink-2:var(--brand-ink-2);--ink-3:var(--brand-ink-3);--hairline:var(--brand-hairline);color:var(--ink)}
.cmp-head,.cmp-row{display:grid;grid-template-columns:4.6rem 1fr 1fr;gap:.7rem;align-items:start;padding:.9rem 0}
.cmp-head{padding-bottom:.6rem}
.cmp-head b{font-family:var(--f-display);font-weight:600;font-size:var(--t-small)}
.cmp-head b:first-of-type{color:var(--blush-deep)}
.cmp-row{border-top:1px solid var(--hairline)}
.cmp-row p{font-family:var(--f-mono);font-size:var(--t-mono);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);line-height:1.4;padding-top:.15rem}
.cmp-row span{position:relative;padding-left:1.25rem;font-size:var(--t-small);line-height:1.4}
.cmp-row .yes{color:var(--ink);font-weight:600}
.cmp-row .no{color:var(--ink-3)}
.cmp-row span::before{position:absolute;left:0;top:0;font-weight:700}
.cmp-row .yes::before{content:"✓";color:var(--blush-deep)}
.cmp-row .no::before{content:"✕";color:var(--ink-3)}
/* coming soon: a cream block for variety */
.soon{background:var(--butter-soft);border:1px solid var(--hairline-2);border-radius:var(--r-lg);padding:2.4rem 1.4rem 2.2rem;
--ink:var(--brand-ink);--ink-2:var(--brand-ink-2);--ink-3:var(--brand-ink-3);color:var(--ink)}
/* what you get: the free-updates bonus row */
.get-list .get-bonus{margin:0 -1.3rem -.4rem;padding:1.1rem 1.3rem 1.3rem;background:var(--blush-soft);border-radius:0 0 var(--r-lg) var(--r-lg)}
/* why it works: 2 × 2 */
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--card-gap)}
.why-grid li{display:flex;flex-direction:column;gap:.35rem;padding:1.2rem 1rem;border-radius:var(--r-lg);background:var(--card);border:1px solid var(--hairline-2)}
.why-grid b{font-family:var(--f-display);font-weight:600;font-size:var(--t-title);line-height:1.15}
.why-grid span{font-size:var(--t-small);color:var(--ink-2)}
/* bonus: a slowly floating row of example screenshots (portrait, tilted, edge to edge) */
.float-gallery{display:flex;margin-inline:calc(-1 * var(--gutter));margin-bottom:-1.2rem;overflow:hidden;padding:1rem 0 2.6rem}
.float-track{display:flex;gap:var(--card-gap);padding-right:var(--card-gap);flex:none}
.float-track li{flex:none;width:clamp(240px,68vw,300px);aspect-ratio:16/10;border-radius:var(--r-md);overflow:hidden;
background:var(--ground-2);border:4px solid var(--card);box-shadow:var(--shadow);rotate:-2deg}
.float-track li:nth-child(even){rotate:2deg;translate:0 .7rem}
.float-track li > img,.float-track li > .ph{width:100%;height:100%;object-fit:cover}
@media (prefers-reduced-motion:no-preference){.float-track{animation:float-row 40s linear infinite}}
@keyframes float-row{to{translate:-100% 0}}
@media (prefers-reduced-motion:reduce){.float-gallery{overflow-x:auto;padding-inline:var(--gutter)}.float-track[aria-hidden]{display:none}}
/* ============================================================
LAUNCH PHASES (sales pages): .
Elements marked .if-waitlist / .if-founding / .if-regular show only in their phase(s);
.if-buy = the buy button (founding + regular). Prices: .p-founding (waitlist + founding) / .p-regular.
============================================================ */
main[data-launch="waitlist"] :is(.if-founding,.if-regular,.if-buy):not(.if-waitlist){display:none!important}
main[data-launch="founding"] :is(.if-waitlist,.if-regular):not(.if-founding):not(.if-buy){display:none!important}
main[data-launch="regular"] :is(.if-waitlist,.if-founding):not(.if-regular):not(.if-buy){display:none!important}
main:not([data-launch="regular"]) .p-regular,main[data-launch="regular"] .p-founding{display:none}
.founding-pill{align-self:center;padding:.4rem .95rem;border-radius:999px;background:var(--blush-pop);color:var(--on-blush);
border:1px solid var(--blush-deep);font-size:var(--t-small);font-weight:600}
.founding-pill s{opacity:.6;font-weight:400}
.countdown{font-size:var(--t-small);color:var(--blush-deep);font-weight:600}
.countdown b{font-family:var(--f-mono);font-weight:500;letter-spacing:.04em}
/* the founding price card: the price, big */
.price-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.1rem;padding:2.4rem 1.4rem 2.2rem;
border-radius:var(--r-lg);background:var(--blush-soft);border:2px solid var(--blush-deep);
--ink:var(--brand-ink);--ink-2:var(--brand-ink-2);--ink-3:var(--brand-ink-3);--card:var(--brand-card);color:var(--ink)}
.price-card .sec-tag{align-self:center}
.price-big{font-family:var(--f-display);font-weight:800;font-size:var(--t-price);letter-spacing:-.04em;line-height:1}
.price-big s{font-size:.45em;font-weight:600;color:var(--ink-3);vertical-align:.35em;margin-right:.2rem}
.price-card .ticks{align-self:stretch;text-align:left}
/* affiliate offer */
.affiliate{background:var(--card);border:1px solid var(--hairline-2);border-radius:var(--r-lg);padding:2.4rem 1.4rem 2.2rem}
.aff-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.9rem}
.aff-steps li{display:flex;align-items:center;gap:.9rem}
.aff-steps b{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--blush-pop);
color:var(--on-blush);font-family:var(--f-display);font-weight:600;font-size:var(--t-title)}
.aff-steps span{font-size:var(--t-body)}
.aff-note{text-align:center;font-size:var(--t-xs);color:var(--ink-3)}
/* ============================================================
QUIRKY ACCENTS (2026-10-21): highlighter swipes, handwriting, hand-drawn arrows
============================================================ */
/* highlight words in headlines: … — a pink highlighter swipe (the portfolio's marker motif) */
mark.hl{color:inherit;background:linear-gradient(176deg,transparent 52%,var(--blush-pop) 53%,var(--blush-pop) 90%,transparent 91%);
padding:0 .12em;margin:0 -.04em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* a word in handwriting: … — use sparingly (one per section at most) */
.hand-word{font-family:var(--f-hand);font-weight:400;font-size:1.18em;letter-spacing:0;color:var(--blush-deep);line-height:1}
/* handwriting: only in small notes AROUND things — never inside headlines */
.hand{font-family:var(--f-hand);font-size:var(--t-hand);line-height:1.1;color:var(--blush-deep)}
/* the waitlist ticket (hero + final push): notches + a dashed tear-off line, the demo link on the stub */
.ticket-wrap{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;padding-top:.4rem}
.ticket{position:relative;width:min(100%,330px);border-radius:var(--r-lg);background:var(--blush);color:var(--brand-ink);
--ink:var(--brand-ink);--ink-2:var(--brand-ink-2);--card:var(--brand-card);rotate:-1.5deg;box-shadow:var(--shadow)}
.ticket-main{display:flex;flex-direction:column;align-items:center;gap:.55rem;padding:1.5rem 1.2rem 1.4rem}
.ticket-label{font-family:var(--f-mono);font-size:var(--t-mono);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--on-blush)}
.ticket-price{display:flex;align-items:baseline;gap:.5rem;margin-bottom:.35rem}
.ticket-price b{font-family:var(--f-display);font-weight:800;font-size:var(--t-name);letter-spacing:-.03em;line-height:1}
.ticket-price > span{font-size:var(--t-small);color:var(--ink-2)}
.ticket .btn-soft{align-self:center;background:var(--card);border-color:var(--blush-deep)}
/* the tear-off line with a notch on each side */
.ticket-stub{position:relative;display:flex;align-items:center;justify-content:center;gap:.55rem;min-height:56px;
border-top:2px dashed var(--blush-deep);text-decoration:none;color:var(--on-blush);font-family:var(--f-display);font-weight:600;font-size:var(--t-small)}
.ticket-stub::before,.ticket-stub::after{content:"";position:absolute;top:-12px;width:22px;height:22px;border-radius:50%;background:var(--ground)}
.ticket-stub::before{left:-11px}
.ticket-stub::after{right:-11px}
.stub-play{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--card);color:var(--brand-ink)}
.stub-play svg{width:13px;height:13px;margin-left:2px}
/* the little handwritten note beside the ticket */
.ticket-note{align-self:flex-end;display:flex;align-items:flex-start;gap:.1rem;margin:0 .2rem -.6rem 0;rotate:5deg;z-index:1}
.ticket-note .hand{font-size:calc(var(--t-hand) * .82)}
.curly{width:44px;height:36px;color:var(--blush-deep);margin-top:1.1rem}
.s-hero{gap:1.4rem}
.s-hero .hub-stage{margin-top:.2rem}
/* ============================================================
SALES PAGE round 3 (2026-10-21): compare band, tap-the-thoughts, receipt, affiliate animation
============================================================ */
/* how it compares: each row softly turns pink as it passes the middle of the screen, then fades again
(scroll-driven, no jumps; browsers without support just show the plain table) */
.compare{position:relative}
.cmp-row{position:relative;isolation:isolate} /* keeps each row’s glow inside its own row */
.cmp-row::before{content:"";position:absolute;inset:4px -10px;z-index:-1;border-radius:var(--r-md);background:var(--blush);opacity:0}
@supports (animation-timeline:view()){
@media (prefers-reduced-motion:no-preference){
.cmp-row::before{animation:cmp-glow linear both;animation-timeline:view();animation-range:cover 40% cover 60%}
}
}
@keyframes cmp-glow{0%{opacity:0}35%,65%{opacity:.9}100%{opacity:0}}
/* who it's for: thoughts as chat bubbles — tap the ones that sound like you */
.who-hint{text-align:center;margin-bottom:-.6rem}
.who-hint .hand{font-size:calc(var(--t-hand) * .8);display:inline-block;rotate:-2deg}
.who-bubbles{display:flex;flex-direction:column;gap:.75rem}
.who-bubbles li{display:flex}
.who-bubbles li:nth-child(even){justify-content:flex-end}
.bubble{position:relative;max-width:86%;padding:.85rem 1.05rem;border-radius:22px 22px 22px 6px;background:var(--card);color:var(--brand-ink);
text-align:left;font-size:var(--t-body);line-height:1.4;box-shadow:var(--shadow);transition:background .2s ease,transform .15s ease}
.who-bubbles li:nth-child(even) .bubble{border-radius:22px 22px 6px 22px}
.bubble:active{transform:scale(.98)}
.bubble i{position:absolute;right:-6px;bottom:-12px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
font-style:normal;font-size:15px;background:var(--card);color:var(--blush-deep);box-shadow:var(--shadow);scale:0;transition:scale .25s cubic-bezier(.3,1.6,.5,1)}
.who-bubbles li:nth-child(even) .bubble i{right:auto;left:-6px}
.bubble[aria-pressed="true"]{background:var(--blush-pop)}
.bubble[aria-pressed="true"] i{scale:1}
.who-end{transition:color .2s}
/* what you get: a receipt (desk-object motif) with a value per line */
.receipt{position:relative;background:var(--card);color:var(--brand-ink);padding:1.6rem 1.3rem 1.8rem;border-radius:var(--r-md) var(--r-md) 0 0;
box-shadow:var(--shadow);rotate:.6deg;--ink-2:var(--brand-ink-2);--ink-3:var(--brand-ink-3);
-webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50% / 18px 100%;
mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50% / 18px 100%}
.receipt-head{text-align:center;font-family:var(--f-mono);font-size:var(--t-small);font-weight:500;letter-spacing:.12em;text-transform:uppercase;
padding-bottom:1rem;border-bottom:1.5px dashed var(--brand-hairline)}
.receipt-head span{font-size:var(--t-mono);color:var(--ink-3)}
.receipt-lines{display:flex;flex-direction:column;gap:.75rem;padding:1.1rem 0}
.receipt-lines li{display:flex;align-items:baseline;gap:.4rem;font-size:var(--t-small)}
.receipt-lines li span{flex:none;max-width:78%}
.receipt-lines li::after{content:"";order:1;flex:1;border-bottom:1.5px dotted var(--brand-hairline);translate:0 -.25rem}
.receipt-lines li b{order:2;font-family:var(--f-mono);font-weight:500;font-size:var(--t-small)}
.receipt-lines .r-free b{color:var(--blush-deep)}
.receipt-total{display:flex;justify-content:space-between;align-items:baseline;padding-top:1rem;border-top:1.5px dashed var(--brand-hairline);
font-family:var(--f-mono);font-weight:500;font-size:var(--t-small);letter-spacing:.08em;text-transform:uppercase}
.receipt-total b{font-family:var(--f-display);font-weight:800;font-size:var(--t-feat);letter-spacing:-.02em;text-transform:none}
/* see it in action: each demo is its own card with feature tags */
.demo-card{background:var(--card);border:1px solid var(--hairline-2);border-radius:var(--r-lg);padding:.6rem .6rem 1.2rem;
--ink:var(--brand-ink);--ink-2:var(--brand-ink-2);color:var(--ink)}
.demo-card .demo{margin-bottom:.9rem}
.demo-card h3,.demo-card .fp-sub,.demo-card .tags{margin-inline:.6rem}
.tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.7rem}
.tags li{padding:.3rem .7rem;border-radius:999px;background:var(--blush-soft);color:var(--blush-deep);font-size:var(--t-xs);font-weight:600}
/* affiliate: the share story in 4 centred scenes, one at a time (14s loop) — motion rules:
only transform/opacity animate · arrivals ease out · pops overshoot slightly · coins fall with gravity ·
cursors move relative to the thing they click · each scene hands over to the next (plane lands in the envelope,
the envelope becomes the notification). Icons: Font Awesome Free 6.5.2 solid (CC BY 4.0). */
.ah{--d:11s;--out:cubic-bezier(.22,1,.36,1);--pop:cubic-bezier(.34,1.56,.64,1);--fall:cubic-bezier(.55,0,1,.45);
position:relative;height:260px;border-radius:var(--r-lg);background:var(--butter-soft);overflow:hidden;color:var(--brand-ink)}
.ah .fa{width:1em;height:1em;flex:none}
.ah-s{position:absolute;inset:0;display:grid;place-items:center;opacity:0}
.ah-s > *{will-change:transform,opacity}
/* scene 1 */
.ah-card{position:relative;width:176px;display:flex;flex-direction:column;gap:10px;padding:10px;border-radius:18px;background:var(--brand-card);box-shadow:var(--shadow-lift)}
.ah-thumb{display:flex;flex-direction:column;gap:5px;padding:10px;aspect-ratio:16/10;border-radius:10px;background:var(--brand-paper);border:1px solid var(--brand-hairline)}
.ah-thumb i{display:block;height:7px;border-radius:4px;background:var(--blush)}
.ah-thumb i:first-child{width:55%;background:var(--brand-ink)}
.ah-thumb i:last-child{width:75%}
.ah-btn{position:relative;display:grid;place-items:center;height:34px;border-radius:999px;background:var(--brand-ink);color:var(--brand-paper);
font-family:var(--f-display);font-weight:600;font-size:var(--t-xs);overflow:hidden}
.ah-btn em{grid-area:1/1;display:flex;align-items:center;gap:6px;font-style:normal}
.ah-btn em + em{opacity:0;translate:0 100%}
.ah-cur{position:absolute;width:22px;height:22px;color:var(--brand-ink);opacity:0;filter:drop-shadow(0 1px 0 var(--brand-card)) drop-shadow(0 3px 4px rgba(0,0,0,.18))}
.ah-cur .fa{width:100%;height:100%}
.ah-card .ah-cur{left:58%;top:78%}
/* scene 2: the plane flies a loop along a curve and lands in the envelope in the centre */
.ah-flight{position:relative;width:200px;height:180px}
.ah-plane{position:absolute;left:0;top:0;width:30px;height:30px;color:var(--blush-deep);
offset-path:path("M28,140 C70,170 150,160 160,105 C170,55 110,30 82,62 C62,86 82,102 100,92");offset-rotate:auto 45deg;offset-distance:0%}
.ah-plane .fa{width:100%;height:100%}
.ah-env{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;display:grid;place-items:center;
background:var(--brand-card);color:var(--blush-deep);font-size:26px;box-shadow:var(--shadow);opacity:0;scale:.4}
/* scene 3 */
.ah-notif{position:relative;display:flex;align-items:center;gap:.75rem;width:min(84%,270px);padding:.8rem .95rem;border-radius:18px;background:var(--brand-card);box-shadow:var(--shadow-lift)}
.ah-notif-icon{width:40px;height:40px;flex:none;border-radius:12px;display:grid;place-items:center;background:var(--blush);color:var(--blush-deep);font-size:18px}
.ah-notif-text{display:flex;flex-direction:column;min-width:0}
.ah-notif b{display:grid;font-family:var(--f-display);font-weight:600;font-size:var(--t-small);white-space:nowrap}
.ah-notif b em{grid-area:1/1;display:flex;align-items:center;gap:6px;font-style:normal}
.ah-notif b em + em{opacity:0}
.ah-tick{color:var(--blush-deep)}
.ah-notif small{font-size:var(--t-xs);color:var(--brand-ink-3)}
.ah-notif .ah-cur{left:62%;top:58%}
@media (prefers-reduced-motion:no-preference){
.ah-s1{animation:ah-s1 var(--d) infinite}
.ah-s1 .ah-cur{animation:ah-cur1 var(--d) infinite}
.ah-btn em:first-child{animation:ah-b1 var(--d) infinite}
.ah-btn em + em{animation:ah-b2 var(--d) infinite}
.ah-btn{animation:ah-bg var(--d) infinite}
.ah-s2{animation:ah-s2 var(--d) infinite}
.ah-plane{animation:ah-fly var(--d) infinite}
.ah-env{animation:ah-env var(--d) infinite}
.ah-s3{animation:ah-s3 var(--d) infinite}
.ah-s3 .ah-cur{animation:ah-cur3 var(--d) infinite}
.ah-notif b em:first-child{animation:ah-n1 var(--d) infinite}
.ah-notif b em + em{animation:ah-n2 var(--d) infinite}
.ah-s4{animation:ah-s4 var(--d) infinite}
}
/* — scene 1: 0–24% (copy) — */
@keyframes ah-s1{0%{opacity:0;scale:.85;animation-timing-function:var(--pop)}4%{opacity:1;scale:1}21%{opacity:1;scale:1;animation-timing-function:var(--out)}24%,100%{opacity:0;scale:.9}}
@keyframes ah-cur1{0%,5%{opacity:0;translate:70px 70px;animation-timing-function:var(--out)}7%{opacity:1}13%{translate:0 0;scale:1}14%{scale:.82}15.5%{scale:1}19%{opacity:1;translate:0 0}21%,100%{opacity:0;translate:6px 6px}}
@keyframes ah-b1{0%,14%{opacity:1;translate:0 0;animation-timing-function:var(--out)}16%,96%{opacity:0;translate:0 -100%}100%{opacity:1;translate:0 0}}
@keyframes ah-b2{0%,14%{opacity:0;translate:0 100%;animation-timing-function:var(--out)}16%,96%{opacity:1;translate:0 0}100%{opacity:0}}
@keyframes ah-bg{0%,14%{background:var(--brand-ink)}16%,96%{background:var(--blush-deep)}100%{background:var(--brand-ink)}}
/* — scene 2: 24–40% (send: plane loops and lands in the envelope) — */
@keyframes ah-s2{0%,24%{opacity:0}25%,39%{opacity:1}40.5%,100%{opacity:0}}
@keyframes ah-fly{0%,25%{offset-distance:0%;opacity:0;scale:.6;animation-timing-function:cubic-bezier(.45,0,.25,1)}27%{opacity:1;scale:1}35%{offset-distance:100%;opacity:1;scale:.9}36.5%,100%{offset-distance:100%;opacity:0;scale:.3}}
@keyframes ah-env{0%,34.5%{opacity:0;scale:.4;animation-timing-function:var(--pop)}37%{opacity:1;scale:1.12}38.5%,39.5%{opacity:1;scale:1}40.5%,100%{opacity:0;scale:1}}
/* — scene 3: 40–58% (a friend buys) — no gap after the envelope — */
@keyframes ah-s3{0%,39.5%{opacity:0;translate:0 14px;scale:.92;animation-timing-function:var(--out)}42%{opacity:1;translate:0 0;scale:1}55%{opacity:1;translate:0 0;animation-timing-function:var(--out)}58%,100%{opacity:0;translate:0 -10px}}
@keyframes ah-cur3{0%,42%{opacity:0;translate:60px 60px;animation-timing-function:var(--out)}44%{opacity:1}48%{translate:0 0;scale:1}49%{scale:.82}50.5%{scale:1}53%{opacity:1;translate:0 0}55%,100%{opacity:0}}
@keyframes ah-n1{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes ah-n2{0%,49%{opacity:0;scale:.9;animation-timing-function:var(--pop)}51%,100%{opacity:1;scale:1}}
/* — scene 4: 58–97% (Yay, you earned 40%!) — */
@keyframes ah-s4{0%,57.5%{opacity:0}59%,95%{opacity:1}98%,100%{opacity:0}}
/* my story: pain → fix rows — a pink ✕ before what’s out there, the fix in bold (never struck-through text) */
.pain-fix{display:flex;flex-direction:column;gap:.7rem}
.pain-fix li{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.6rem;padding:1rem 1rem;border-radius:var(--r-lg);
background:var(--card);border:1px solid var(--hairline-2)}
.pain-fix li::after{content:"→";grid-column:2;grid-row:1;color:var(--blush-deep);font-weight:600}
.pain{grid-column:1;grid-row:1;display:flex;align-items:center;gap:.45rem;font-size:var(--t-small);line-height:1.35;color:var(--ink-2)}
.pain::before{content:"✕";flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;margin-top:-.05rem;
background:var(--blush-pop);color:var(--on-blush);font-size:11px;font-weight:700;margin-top:0}
.fix{grid-column:3;grid-row:1;font-family:var(--f-display);font-weight:600;font-size:var(--t-small);line-height:1.3;color:var(--ink)}
.pains-end{text-align:center;font-family:var(--f-display);font-weight:600;font-size:var(--t-feat);line-height:1.15;letter-spacing:-.02em;text-wrap:balance}
/* testimonials: portrait video reviews in a sideways swipe row + written quotes */
.vt-row-wrap{margin-inline:calc(-1 * var(--gutter))}
.vt-row{display:flex;gap:var(--card-gap);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 var(--gutter) .6rem;scroll-padding-inline:var(--gutter)}
.vt-row::-webkit-scrollbar{display:none}
.vt{flex:0 0 62%;display:flex;flex-direction:column;gap:.6rem;scroll-snap-align:start}
.vt-video{position:relative;display:block;width:100%;aspect-ratio:9/16;border-radius:var(--r-lg);overflow:hidden;background:var(--ground-2);
border:4px solid var(--card);box-shadow:var(--shadow)}
.vt-video > img,.vt-video > .ph{width:100%;height:100%;object-fit:cover}
.vt-video::after{content:"";position:absolute;inset:auto 0 0;height:45%;background:linear-gradient(transparent,var(--scrim))}
.vt-play{position:absolute;z-index:1;left:50%;top:50%;translate:-50% -50%;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
background:var(--play-bg);color:var(--play-ink);box-shadow:var(--shadow)}
.vt-play svg{width:20px;height:20px;margin-left:3px}
.vt-name{position:absolute;z-index:1;left:.9rem;bottom:.8rem;display:flex;flex-direction:column;text-align:left;color:var(--on-photo);text-shadow:var(--photo-shadow)}
.vt-name b{font-family:var(--f-display);font-weight:600;font-size:var(--t-body)}
.vt-name small{font-size:var(--t-xs)}
.vt-quote{font-size:var(--t-small);color:var(--ink-2);padding-inline:.2rem}
.quotes{display:flex;flex-direction:column;gap:var(--card-gap)}
.quotes li{display:flex;flex-direction:column;gap:.6rem;padding:1.3rem 1.2rem;border-radius:var(--r-lg);background:var(--blush-soft);color:var(--brand-ink)}
.quotes p{font-family:var(--f-display);font-weight:600;font-size:var(--t-title);line-height:1.3}
.quotes span{font-size:var(--t-xs);color:var(--brand-ink-3)}
/* hero: a mini version of the real Notion hub (Brand Pipeline gallery) — illustration sizes on purpose.
12s loop: the middle card (Sunny Surf) moves through the hub's real statuses while its progress ring fills,
then the invoice and usage chips pop in. Only transform/opacity (+ the ring's stroke) animate. */
.np{flex:1;display:flex;flex-direction:column;background:var(--brand-card);overflow:hidden}
.np-cover{height:20%;display:grid;place-items:center;background:linear-gradient(120deg,var(--butter),var(--blush))}
.np-cover b{font-family:var(--f-display);font-weight:800;font-size:12px;color:var(--butter-soft);text-shadow:0 1px 3px rgba(0,0,0,.25);letter-spacing:-.01em}
.np-tabs{display:flex;gap:5px;padding:5px 7px 4px;font-size:6px;color:var(--brand-ink-3)}
.np-tabs span{padding:2px 5px;border-radius:5px}
.np-tabs .on{background:var(--brand-paper-2);color:var(--brand-ink);font-weight:600}
.np-gallery{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:0 7px 7px}
.nc{display:flex;flex-direction:column;gap:2px;border-radius:6px;border:1px solid var(--brand-hairline);background:var(--brand-card);overflow:hidden;padding-bottom:4px}
.nc-img{display:block;height:34%;min-height:22px}
.img-tee{background:linear-gradient(135deg,#F4F1EC,#DCD6CE)}
.img-surf{background:repeating-linear-gradient(100deg,var(--blush) 0 9px,var(--butter) 9px 15px,var(--blush-soft) 15px 22px,var(--butter-pop) 22px 26px)}
.img-glow{background:linear-gradient(135deg,var(--blush-soft),var(--blush-pop))}
.nc p{padding:0 4px;line-height:1.25;white-space:nowrap;overflow:hidden}
.nc-name{font-family:var(--f-display);font-weight:600;font-size:7px;color:var(--brand-ink);margin-top:2px}
.nc-tags{display:flex;gap:2px}
.nc-tags i,.st{font-style:normal;font-size:5.5px;padding:1px 3px;border-radius:3px;background:var(--butter);color:var(--on-butter)}
.nc-tags i + i{background:var(--blush-soft);color:var(--on-blush)}
.nc-status{display:grid;justify-items:start}
.st{grid-area:1/1;background:var(--blush);color:var(--on-blush)}
.nc-meta{display:flex;align-items:center;gap:3px;font-size:6px;color:var(--brand-ink-2)}
.ring{width:8px;height:8px;rotate:-90deg}
.ring circle{fill:none;stroke:var(--brand-hairline);stroke-width:3}
.ring .ring-fill{stroke:var(--blush-deep);stroke-dasharray:44;stroke-dashoffset:44}
.nc-live{box-shadow:0 0 0 1.5px var(--blush-pop),var(--shadow)}
.nc-live .st{opacity:0}
.nc-live .s1{opacity:1}
@media (prefers-reduced-motion:no-preference){
.nc-live{animation:nc-live 12s infinite}
.nc-live .s1{animation:st1 12s infinite}.nc-live .s2{animation:st2 12s infinite}.nc-live .s3{animation:st3 12s infinite}
.nc-live .s4{animation:st4 12s infinite}.nc-live .s5{animation:st5 12s infinite}
.ring-fill{animation:ring 12s infinite}
.chip-paid{animation:chip-pop2 12s cubic-bezier(.34,1.56,.64,1) infinite}
.chip-usage{animation:chip-pop3 12s cubic-bezier(.34,1.56,.64,1) infinite}
}
@media (prefers-reduced-motion:reduce){.nc-live .s1{opacity:0}.nc-live .s5{opacity:1}.ring .ring-fill{stroke-dashoffset:0}}
@keyframes nc-live{0%,4%{scale:1}6%{scale:1.06}10%,100%{scale:1}}
@keyframes st1{0%,14%{opacity:1;translate:0 0}17%,100%{opacity:0;translate:0 -4px}}
@keyframes st2{0%,14%{opacity:0;translate:0 4px}17%,30%{opacity:1;translate:0 0}33%,100%{opacity:0;translate:0 -4px}}
@keyframes st3{0%,30%{opacity:0;translate:0 4px}33%,46%{opacity:1;translate:0 0}49%,100%{opacity:0;translate:0 -4px}}
@keyframes st4{0%,46%{opacity:0;translate:0 4px}49%,62%{opacity:1;translate:0 0}65%,100%{opacity:0;translate:0 -4px}}
@keyframes st5{0%,62%{opacity:0;translate:0 4px}65%,94%{opacity:1;translate:0 0}98%,100%{opacity:0}}
@keyframes ring{0%,14%{stroke-dashoffset:44}33%{stroke-dashoffset:33}49%{stroke-dashoffset:22}65%{stroke-dashoffset:0}94%{stroke-dashoffset:0}100%{stroke-dashoffset:44}}
@keyframes chip-pop2{0%,66%{opacity:0;scale:.85}70%,94%{opacity:1;scale:1}98%,100%{opacity:0;scale:.95}}
@keyframes chip-pop3{0%,72%{opacity:0;scale:.85}76%,94%{opacity:1;scale:1}98%,100%{opacity:0;scale:.95}}
/* step number: a round tilted sticker on the screenshot's corner (our own numbering style) */
.step-img{position:relative}
.step-sticker{position:absolute;z-index:1;left:.8rem;top:.8rem;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
background:var(--blush-pop);color:var(--on-blush);border:3px solid var(--card);box-shadow:var(--shadow);
font-family:var(--f-display);font-weight:800;font-size:var(--t-title)}
/* step card mockups (Yule 2026-10-27): the real screenshot, inset on the white card, with one or two of its own
pieces lifted out on top: bigger, tilted, a little over the screenshot's edge; every card placed differently.
No soft pink here (section already very pink). Sample brand name patched over "Example". */
.step-img.is-lift{aspect-ratio:auto;padding:14px 14px 26px;background:var(--card)}
.lift-shot{position:relative;display:block}
.step-img .lift-shot > img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--hairline-2)}
.lift-pc{position:absolute;z-index:1;display:block;container-type:inline-size;overflow:hidden;border-radius:8px;background:var(--brand-card);border:1px solid var(--brand-hairline);box-shadow:var(--shadow-lift)}
.step-img .lift-pc > img{display:block;width:100%;height:auto}
/* pieces Yule cut herself (PNG with white corners): rounded off to their own shape (--rr), no extra box; shadow follows it */
.lift-pc.is-cut{border:0;border-radius:var(--rr,3cqw);background:none;box-shadow:none;filter:var(--shadow-cut)}
.lift-name{position:absolute;display:flex;align-items:center;background:var(--brand-card);color:var(--nt-ink);font-family:var(--f-notion);font-size:6.4cqw;font-weight:500;line-height:1;white-space:nowrap}
.step-img.is-lift .step-sticker{z-index:2;left:6px;top:6px}
/* the lifted pieces come in once the whole card is on screen (main.js adds .lift-wait, then .lift-go):
cards slide in from the side they hang over, bubbles pop; the 2nd piece a beat later. Reduced motion = static. */
@media (prefers-reduced-motion:no-preference){
.lift-wait .lift-pc{opacity:0;translate:var(--from,0 14%);scale:.96}
.lift-wait .lift-pc[style*="right:"]{--from:16% 4%}
.lift-wait .lift-pc[style*="left:"]{--from:-16% 4%}
.lift-wait .lift-pc[style*="99px"]{--from:0 0;scale:.6}
.lift-wait.lift-go .lift-pc{opacity:1;translate:0 0;scale:1;transition:opacity .8s ease-out var(--d,.15s),translate 1.2s cubic-bezier(.22,1,.36,1) var(--d,.15s),scale 1s cubic-bezier(.3,1.25,.5,1) var(--d,.15s)}
.lift-wait .lift-pc + .lift-pc{--d:.6s}
}
/* photo of Yule before the final push */
.me{position:relative;align-self:center;width:min(72%,280px);margin:0 0 calc(2.6rem - var(--section-gap))}
.me img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-lg);border:5px solid var(--card);box-shadow:var(--shadow-lift);rotate:-2deg}
.me figcaption{position:absolute;right:-.6rem;bottom:-.9rem;rotate:-6deg}
.me .hand{font-size:var(--t-hand);background:var(--ground);padding:0 .4rem;border-radius:8px}
/* affiliate scene 4: the confirmation */
.ah-done{display:flex;align-items:center;gap:.8rem;padding:.9rem 1.2rem;border-radius:20px;background:var(--brand-card);box-shadow:var(--shadow-lift)}
.ah-done span:last-child{display:flex;flex-direction:column}
.ah-done b{font-family:var(--f-display);font-weight:600;font-size:var(--t-title);color:var(--brand-ink);white-space:nowrap}
.ah-done small{font-size:var(--t-xs);color:var(--brand-ink-3)}
.ah-money{font-size:2rem;display:inline-block}
@media (prefers-reduced-motion:no-preference){
.ah-done{animation:ah-done var(--d) infinite}
.ah-money{animation:ah-money var(--d) infinite}
}
@media (prefers-reduced-motion:reduce){.ah-s4{opacity:1}}
@keyframes ah-done{0%,58%{opacity:0;scale:.8;animation-timing-function:var(--pop)}63%,92%{opacity:1;scale:1}97%,100%{opacity:0;scale:.95}}
@keyframes ah-money{0%,62%{rotate:0deg;scale:1}66%{rotate:-16deg;scale:1.3}70%{rotate:12deg;scale:1.15}74%,100%{rotate:0deg;scale:1}}
/* the laptop in silver + grey */
.hub-screen{border-color:var(--laptop-bezel)}
.laptop-base{background:linear-gradient(180deg,var(--laptop-silver-hi),var(--laptop-silver) 60%,var(--laptop-silver-lo));border-color:var(--laptop-silver-lo);height:13px;box-shadow:0 6px 12px -8px rgba(0,0,0,.35)}
/* hero: the real hub screenshots inside the laptop, a cursor clicks through the Home menu (12s loop) */
.hub-screen.shots{position:relative;display:block;background:var(--brand-card)}
.shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left top}
.sh2,.sh3{opacity:0}
.hub-cur{position:absolute;left:0;top:0;width:16px;height:16px;opacity:0;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}
.hub-cur svg{width:100%;height:100%}
@media (prefers-reduced-motion:no-preference){
.sh1{animation:sh1 12s infinite}.sh2{animation:sh2 12s infinite}.sh3{animation:sh3 12s infinite}
.hub-cur{animation:hcur 12s infinite}
.chip-usage{animation:chip-u 12s cubic-bezier(.34,1.56,.64,1) infinite}
.chip-paid{animation:chip-p 12s cubic-bezier(.34,1.56,.64,1) infinite}
}
/* screens: pipeline 0–30%, usage 33–63%, income 66–100% (each starts with a slow zoom-in, like a screen recording) */
@keyframes sh1{0%{opacity:1;scale:1}28%{opacity:1;scale:1.04}32%,96%{opacity:0;scale:1.04}100%{opacity:1;scale:1}}
@keyframes sh2{0%,29%{opacity:0;scale:1}33%{opacity:1;scale:1}60%{opacity:1;scale:1.04}64%,100%{opacity:0}}
@keyframes sh3{0%,62%{opacity:0;scale:1}66%{opacity:1;scale:1}96%{opacity:1;scale:1.04}100%{opacity:0}}
/* cursor: glides to "Usage Tracker" (13.9%, 53.8%), clicks; later to "Income Dashboard" (16.1%, 64.5%), clicks */
@keyframes hcur{0%,10%{opacity:0;translate:180px 150px;animation-timing-function:cubic-bezier(.22,1,.36,1)}13%{opacity:1}24%{translate:calc(.12 * 100cqw) calc(.505 * 100cqh);scale:1}26%{scale:.75}28%{scale:1}31%{opacity:1}33%{opacity:0;translate:calc(.12 * 100cqw) calc(.505 * 100cqh)}
42%{opacity:0;translate:120px 160px;animation-timing-function:cubic-bezier(.22,1,.36,1)}45%{opacity:1}56%{translate:calc(.13 * 100cqw) calc(.61 * 100cqh);scale:1}58%{scale:.75}60%{scale:1}63%{opacity:1}65%,100%{opacity:0;translate:calc(.13 * 100cqw) calc(.61 * 100cqh)}}
.hub-screen.shots{container-type:size}
@keyframes chip-u{0%,36%{opacity:0;scale:.85}40%,62%{opacity:1;scale:1}66%,100%{opacity:0;scale:.95}}
@keyframes chip-p{0%,70%{opacity:0;scale:.85}74%,95%{opacity:1;scale:1}99%,100%{opacity:0;scale:.95}}
@media (prefers-reduced-motion:reduce){.chip-paid,.chip-usage{opacity:1}}
/* facts: the ∞ sign runs small in Outfit — scale it up to sit level with 6 / $0 / 100% */
.facts b.inf{font-size:calc(var(--t-name) * 1.45);line-height:.8}
/* AI Brand Deal Manager: compact tiles instead of a list */
.ai-tiles{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.ai-tiles li{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;padding:.9rem .9rem;border-radius:var(--r-md);background:var(--brand-card);
font-family:var(--f-display);font-weight:600;font-size:var(--t-small);line-height:1.25;color:var(--brand-ink)}
.ai-tiles li span{font-size:1.25rem}
.ai-tiles .wide{grid-column:1/-1;flex-direction:row;align-items:center;gap:.6rem}
/* link page cover: the tilted photo + "xx, Yule" sticker; handle as a mono label (like the sales page sign-off) */
.me-top{margin:0 0 1rem;width:min(64%,250px)}
.top .handle{font-family:var(--f-mono);font-size:var(--t-mono);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.top h1{margin-top:.2rem}
.top .socials{margin-top:1.1rem}
/* take a tour: tabs + the real screenshot of that page */
.tour{display:flex;flex-direction:column;gap:1rem}
.tour-tabs{display:flex;gap:.4rem;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--gutter));padding:0 var(--gutter) .2rem}
.tour-tabs::-webkit-scrollbar{display:none}
.tour-tabs button{flex:none;min-height:44px;padding:0 1rem;border-radius:999px;background:var(--card);border:1px solid var(--hairline);
font-family:var(--f-display);font-weight:600;font-size:var(--t-small);color:var(--ink);white-space:nowrap}
.tour-tabs button[aria-selected="true"]{background:var(--blush-pop);border-color:var(--blush-deep);color:var(--on-blush)}
.tour-panel{display:flex;flex-direction:column;gap:.8rem}
.tour-shot{border-radius:var(--r-lg);overflow:hidden;border:5px solid var(--card);box-shadow:var(--shadow-lift);background:var(--ground-2)}
.tour-shot img{display:block;width:100%;height:auto} /* section screenshots shown whole, each at its own height */
.tour-panel p{text-align:center;color:var(--ink-2);padding-inline:.5rem}
@media (prefers-reduced-motion:no-preference){.tour-panel:not([hidden]) .tour-shot{animation:tour-in .35s cubic-bezier(.22,1,.36,1)}}
@keyframes tour-in{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
/* your AI manager: a chat — requests type out in the box, send, and the manager answers */
.chat{display:flex;flex-direction:column;gap:.7rem;padding:1rem;border-radius:var(--r-lg);background:var(--brand-paper);border:1px solid var(--brand-hairline);
color:var(--brand-ink);--ink-2:var(--brand-ink-2);--ink-3:var(--brand-ink-3)}
.chat-log{height:225px;display:flex;flex-direction:column;justify-content:flex-start;transition:opacity .3s;gap:.6rem;overflow:hidden}
.msg{flex:none;max-width:88%;padding:.65rem .85rem;border-radius:18px;font-size:var(--t-small);line-height:1.4}
.msg.user{align-self:flex-end;background:var(--blush);border-bottom-right-radius:6px}
.msg.ai{align-self:flex-start;width:94%;max-width:94%;display:flex;flex-direction:column;gap:.3rem;background:var(--brand-card);border:1px solid var(--brand-hairline-2);border-bottom-left-radius:6px}
.msg.ai b{font-family:var(--f-display);font-weight:600}
.ai-row{display:flex;justify-content:space-between;gap:.6rem;font-size:var(--t-xs)}
.ai-row i{font-style:normal;padding:.05rem .45rem;border-radius:999px;background:var(--butter);color:var(--on-butter);white-space:nowrap}
.msg.ai .ok{color:var(--blush-deep);font-weight:600;font-size:var(--t-xs)}
.msg.typing{display:flex;gap:4px;padding:.8rem .9rem}
.msg.typing i{width:7px;height:7px;border-radius:50%;background:var(--brand-ink-3);animation:dot 1s infinite}
.msg.typing i:nth-child(2){animation-delay:.15s}.msg.typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,60%,100%{opacity:.3;translate:0 0}30%{opacity:1;translate:0 -3px}}
.chat-box{display:flex;align-items:center;gap:.6rem;min-height:52px;padding:.4rem .4rem .4rem 1rem;border-radius:18px;background:var(--brand-card);
border:1px solid var(--brand-hairline);box-shadow:var(--shadow)}
.chat-input{flex:1;font-size:var(--t-small);color:var(--brand-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-input.has-text{color:var(--brand-ink)}
.chat-input.has-text::after{content:"";display:inline-block;width:1.5px;height:1em;margin-left:1px;vertical-align:-2px;background:var(--brand-ink);animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.chat-send{width:36px;height:36px;flex:none;border-radius:12px;display:grid;place-items:center;background:var(--brand-paper-2);color:var(--brand-ink-3);transition:background .2s,color .2s,scale .15s}
.chat-send svg{width:18px;height:18px}
.chat-send.ready{background:var(--blush-deep);color:var(--brand-card)}
.chat-send.press{scale:.85}
@media (prefers-reduced-motion:no-preference){.msg.in{animation:msg-in .35s cubic-bezier(.22,1,.36,1)}}
@keyframes msg-in{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
/* AI tiles: title + one line */
.ai-tiles li{gap:.25rem}
.ai-tiles li b{font-family:var(--f-display);font-weight:600;font-size:var(--t-body)}
.ai-tiles li small{font-family:var(--f-body);font-weight:400;font-size:var(--t-xs);color:var(--brand-ink-2);line-height:1.35}
.control{text-align:center;font-size:var(--t-small);color:var(--ink-2);padding-inline:.4rem}
.control b{color:var(--ink);font-family:var(--f-display);font-weight:600}
.next{display:flex;flex-direction:column;align-items:center;gap:.5rem}
.next-label{font-family:var(--f-mono);font-size:var(--t-mono);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.next{align-self:stretch}
.next-grid{align-self:stretch;display:grid;grid-template-columns:1fr 1fr;gap:.45rem}
.next-grid li{display:flex;align-items:center;min-height:40px;padding:0 .8rem;border-radius:999px;background:var(--brand-card);font-size:var(--t-xs);font-weight:600;color:var(--brand-ink);white-space:nowrap}
.wont{display:flex;flex-direction:column;gap:.7rem;padding:1.2rem 1.2rem 1.3rem;border-radius:var(--r-lg);background:var(--brand-card);border:2px dashed var(--blush-deep);color:var(--brand-ink)}
.wont-h{font-family:var(--f-display);font-weight:600;font-size:var(--t-title);line-height:1.2}
.wont ul{display:flex;flex-direction:column;gap:.55rem}
.wont li{position:relative;padding-left:1.8rem;font-size:var(--t-small);color:var(--brand-ink-2);line-height:1.4}
.wont li::before{content:"✕";position:absolute;left:0;top:.05rem;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--blush-pop);color:var(--on-blush);font-size:11px;font-weight:700}
/* what you need */
.needs{display:flex;flex-direction:column;gap:var(--card-gap)}
.needs li{display:grid;grid-template-columns:auto 1fr;column-gap:.9rem;align-items:center;padding:1.1rem 1.2rem;border-radius:var(--r-lg);background:var(--card);border:1px solid var(--hairline-2)}
.needs span{grid-row:span 2;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--butter-soft);font-size:1.3rem}
.needs b{font-family:var(--f-display);font-weight:600;font-size:var(--t-title)}
.needs small{font-size:var(--t-small);color:var(--ink-2)}
/* what if…? — question, one bold word, one line */
.whatif{display:grid;grid-template-columns:1fr 1fr;gap:var(--card-gap)}
.whatif li{display:flex;flex-direction:column;gap:.35rem;padding:1.1rem 1rem 1.2rem;border-radius:var(--r-lg);background:var(--card);border:1px solid var(--hairline-2)}
.whatif li:nth-child(2),.whatif li:nth-child(3){background:var(--blush-soft);border-color:transparent;color:var(--brand-ink)}
.wi-q{font-size:var(--t-xs);color:var(--ink-2);line-height:1.35}
.wi-a{font-family:var(--f-display);font-weight:800;font-size:var(--t-feat);letter-spacing:-.02em;line-height:1.1;color:var(--blush-deep)}
.wi-l{font-size:var(--t-small);line-height:1.4}
/* price anchor under the receipt */
.anchor{text-align:center;font-size:var(--t-small);color:var(--ink-2);padding-inline:1rem}
.anchor b{display:block;color:var(--ink);font-family:var(--f-display);font-weight:600;font-size:var(--t-body);margin-top:.2rem}
.chat-log.fade{opacity:0}
.msg.ai{line-height:1.55}
.msg.ai b{display:block;margin-bottom:.15rem}
.chat-hello{margin:auto;display:flex;flex-direction:column;align-items:center;gap:.6rem;text-align:center}
.chat-hello-icon{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--blush);font-size:1.6rem}
.chat-hello p{font-family:var(--f-display);font-weight:600;font-size:var(--t-title);line-height:1.25;color:var(--brand-ink)}
@media (prefers-reduced-motion:no-preference){.chat-hello{animation:msg-in .45s cubic-bezier(.22,1,.36,1)}}
/* portfolio sales page: 5 screenshots cross-fade on the laptop (until a screen recording replaces them) */
.pf-shots .shot{opacity:0}
.pf-shots .pf1{opacity:1}
@media (prefers-reduced-motion:no-preference){
.pf-shots .shot{animation:pf-shot 15s infinite}
.pf-shots .pf1{animation-name:pf-first}
.pf-shots .pf2{animation-delay:3s}.pf-shots .pf3{animation-delay:6s}.pf-shots .pf4{animation-delay:9s}.pf-shots .pf5{animation-delay:12s}
}
@keyframes pf-shot{0%{opacity:0;scale:1}4%,20%{opacity:1}24%,100%{opacity:0;scale:1.04}}
@keyframes pf-first{0%,20%{opacity:1;scale:1}24%,96%{opacity:0;scale:1.04}100%{opacity:1}}
.step-img img{width:100%;height:100%;object-fit:cover;object-position:left top}
.receipt-lines li b{color:var(--blush-deep)}
.feat-cover > img{object-position:left top}
/* round 6: story photo, calm control card, for/not-for, soft compare, static screenshot flip */
.me-story{margin:0 0 .4rem}
.me-ph{display:grid;place-items:center;aspect-ratio:4/5;border-radius:var(--r-lg);border:5px solid var(--card);box-shadow:var(--shadow-lift);rotate:-2deg;text-align:center;line-height:1.6}
.wont.calm{border-style:solid;border-color:var(--blush)}
.wont.calm li::before{content:"✓";background:var(--blush);color:var(--blush-deep)}
.fit{display:flex;flex-direction:column;gap:var(--card-gap)}
.fit-card{padding:1.3rem 1.2rem 1.4rem;border-radius:var(--r-lg);color:var(--brand-ink)}
.yes-card{background:var(--blush-soft)}
.no-card{background:var(--card);border:1px solid var(--hairline-2)}
.fit-h{font-family:var(--f-display);font-weight:600;font-size:var(--t-title);margin-bottom:.7rem}
.fit ul{display:flex;flex-direction:column;gap:.55rem}
.fit li{position:relative;padding-left:1.8rem;font-size:var(--t-small);line-height:1.4;color:var(--brand-ink-2)}
.fit li::before{position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700}
.yes-card li::before{content:"✓";background:var(--blush-pop);color:var(--on-blush)}
.no-card li::before{content:"✕";background:var(--ground-2);color:var(--brand-ink-3)}
.compare.soft .no::before{content:"•";color:var(--ink-3)}
.compare.soft .no{color:var(--ink-2)}
@keyframes pf-shot{0%{opacity:0}3%,20%{opacity:1}23%,100%{opacity:0}}
@keyframes pf-first{0%,20%{opacity:1}23%,97%{opacity:0}100%{opacity:1}}
/* control card: three short lines with room to breathe */
.calm-card{display:flex;flex-direction:column;align-items:center;gap:1.2rem;padding:2rem 1.4rem 2.1rem;border-radius:var(--r-lg);background:var(--brand-card);color:var(--brand-ink)}
.calm-h{font-family:var(--f-display);font-weight:600;font-size:var(--t-feat);letter-spacing:-.02em;text-align:center}
.calm-list{display:flex;flex-direction:column;gap:.9rem;align-self:stretch}
.calm-list li{display:flex;align-items:center;gap:.8rem;font-family:var(--f-display);font-weight:600;font-size:var(--t-body)}
.calm-list span{width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--blush-soft);font-size:1.1rem}
/* for / not for: two airy cards of short pills */
.fit2{display:flex;flex-direction:column;gap:1.4rem}
.fit2-col{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:1.8rem 1.2rem 2rem;border-radius:var(--r-lg);text-align:center;color:var(--brand-ink)}
.fit2-col.yes{background:var(--blush-soft)}
.fit2-col.no{background:var(--card);border:1px solid var(--hairline-2)}
.fit2-h{font-family:var(--f-display);font-weight:600;font-size:var(--t-feat);letter-spacing:-.02em}
.fit2 ul{display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem}
.fit2 li{padding:.55rem 1rem;border-radius:999px;font-size:var(--t-small);font-weight:600}
.fit2 .yes li{background:var(--brand-card)}
.fit2 .yes li::before{content:"✓ ";color:var(--blush-deep)}
.fit2 .no li{background:var(--ground-2);color:var(--brand-ink-2)}
.fit2 .no li::before{content:"✕ ";color:var(--brand-ink-3)}
/* freebie pages in the sales-page style: centred hero, sign-up / instant card in pink */
.s-hero .fp-cover{width:100%;margin:0}
.signup-card{background:var(--blush-soft);border-radius:var(--r-lg);padding:2.2rem 1.3rem 2rem;color:var(--brand-ink);
--ink:var(--brand-ink);--ink-2:var(--brand-ink-2);--ink-3:var(--brand-ink-3);--card:var(--brand-card)}
.signup-card .feat-body{align-items:stretch;padding:0}
.signup-card .sec-tag{align-self:center}
.signup-card h2{text-align:center;margin-bottom:.6rem}
.signup-card.instant .feat-body{align-items:center;text-align:center;gap:.6rem}
.signup-card.instant .btn{align-self:center;margin-top:.6rem}
/* how it works (small products): 4 short steps on a dotted line, then the result */
.flow{list-style:none;margin:0 auto;padding:0;display:flex;flex-direction:column;gap:1rem;position:relative;width:min(100%,320px)}
.flow::before{content:"";position:absolute;left:21px;top:22px;bottom:22px;border-left:2px dashed var(--blush-pop)}
.flow li{position:relative;display:flex;align-items:center;gap:.9rem}
.flow b{width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--blush-pop);color:var(--on-blush);
font-family:var(--f-display);font-weight:800;font-size:var(--t-title);border:3px solid var(--ground)}
.flow span{font-family:var(--f-display);font-weight:600;font-size:var(--t-body);line-height:1.3}
.result{display:flex;flex-direction:column;align-items:center;gap:.9rem;padding:.6rem .6rem 1.4rem;border-radius:var(--r-lg);background:var(--blush-soft);color:var(--brand-ink)}
.result img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:left top;border-radius:var(--r-md)}
.result-h{font-family:var(--f-mono);font-size:var(--t-mono);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--on-blush)}
.result-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:.45rem;padding:0 .4rem}
.result-pills li{padding:.45rem .85rem;border-radius:999px;background:var(--brand-card);font-size:var(--t-small);font-weight:600}
.need-line{text-align:center;font-size:var(--t-small);color:var(--ink-2);padding-inline:1rem}
/* ============================================================
PRODUCT THEME: Steal my UGC portfolio (main.theme-pf) — each product gets its own look (Yule, like the reference).
This one borrows the portfolio itself: cream + ink, a paperclip on the laptop, washi tape on the photo.
============================================================ */
.theme-pf mark.hl{background:linear-gradient(176deg,transparent 52%,var(--butter-pop) 53%,var(--butter-pop) 90%,transparent 91%)}
.theme-pf .sec-tag{color:var(--butter-deep)}
.theme-pf .ticket{background:var(--butter-soft);border:1px solid var(--butter-pop)}
.theme-pf .ticket-label{color:var(--butter-deep)}
.theme-pf .ticket-stub{border-top-color:var(--butter-deep);color:var(--on-butter)}
.theme-pf .ticket .btn-soft,.theme-pf .btn-soft{background:var(--edge);color:var(--ground);border-color:var(--edge)}
.theme-pf .ticket .btn-soft{background:var(--brand-ink);color:var(--brand-paper)}
.theme-pf .ticket-note .hand,.theme-pf .curly{color:var(--butter-deep)}
.theme-pf .flow b{background:var(--butter-pop);color:var(--on-butter)}
.theme-pf .flow::before{border-left-color:var(--butter-pop)}
.theme-pf .result{background:var(--butter-soft)}
.theme-pf .result-h{color:var(--butter-deep)}
.theme-pf .tour-tabs button[aria-selected="true"]{background:var(--butter);border-color:var(--butter-deep);color:var(--on-butter)}
.theme-pf .hub-chip{display:none}
/* paperclip on the laptop (the portfolio's motif) */
.theme-pf .laptop{position:relative}
.theme-pf .clip{position:absolute;z-index:3;top:0;right:12%;width:30px;height:auto;overflow:visible;translate:0 -30%;
fill:none;stroke:var(--clip);stroke-width:5.5;stroke-linecap:round;filter:drop-shadow(0 2px 2px var(--clip-shadow))}
.theme-pf .clip .clip-hi{stroke:var(--clip-hi);stroke-width:1.6;transform:translate(-1.1px,-.4px)}
/* washi tape on the photo (drawn in CSS, like the portfolio) */
.theme-pf .me .tape{position:absolute;z-index:2;top:-3%;left:50%;width:42%;aspect-ratio:3/1;translate:-50% 0;rotate:-4deg;
filter:drop-shadow(0 1px 2px var(--cutout-shadow))}
.theme-pf .me .tape::before{content:"";position:absolute;inset:0;
background:linear-gradient(104deg,transparent 29%,var(--tape-crease) 34%,transparent 40%),
linear-gradient(74deg,transparent 62%,var(--tape-crease) 67%,transparent 73%),
repeating-linear-gradient(0deg,var(--tape-fibre) 0 1px,transparent 1px 3px),var(--tape);
clip-path:polygon(2% 0,98% 0,99.5% 9%,97.5% 19%,100% 30%,98% 41%,99.6% 52%,97.2% 63%,99.4% 74%,97.8% 86%,99.2% 100%,1.5% 100%,0% 89%,2.4% 78%,0.4% 66%,2.8% 55%,0.6% 43%,2.2% 31%,0% 20%,2.6% 9%)}
.theme-pf .me .hand{color:var(--butter-deep)}
/* compact stats row + side-by-side comparison */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}
.stats li{display:flex;flex-direction:column;align-items:center;padding:.9rem .2rem;border-radius:var(--r-md);background:var(--butter-soft);color:var(--brand-ink)}
.stats b{font-family:var(--f-display);font-weight:800;font-size:var(--t-feat);letter-spacing:-.03em;line-height:1.1}
.stats span{font-size:var(--t-xs);color:var(--brand-ink-2)}
.vs{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.vs-col{padding:1.1rem .9rem 1.2rem;border-radius:var(--r-lg);background:var(--card);border:1px solid var(--hairline-2);color:var(--brand-ink)}
.vs-col.mine{background:var(--butter-soft);border-color:var(--butter-pop)}
.vs-h{font-family:var(--f-display);font-weight:600;font-size:var(--t-title);margin-bottom:.6rem}
.vs ul{display:flex;flex-direction:column;gap:.5rem}
.vs li{font-size:var(--t-small);line-height:1.35;color:var(--brand-ink-2);padding-left:1.1rem;position:relative}
.vs li::before{content:"•";position:absolute;left:.2rem;color:var(--brand-ink-3)}
.vs .mine li{color:var(--brand-ink);font-weight:600}
.vs .mine li::before{content:"✓";left:0;color:var(--butter-deep)}
/* theme-pf.plain (Yule 2026-10-23: “too much going on, colours awful”): white page, no decoration, pink only as accent */
body:has(.theme-pf.plain){background:var(--paper-white)}
.theme-pf.plain{--ground:var(--paper-white)}
.theme-pf.plain mark.hl{background:linear-gradient(176deg,transparent 52%,var(--blush-pop) 53%,var(--blush-pop) 90%,transparent 91%)}
.theme-pf.plain .sec-tag{color:var(--ink-2)}
.theme-pf.plain .flow b{background:var(--blush-pop);color:var(--on-blush)}
.theme-pf.plain .flow::before{border-left-color:var(--blush-pop)}
.theme-pf.plain .result{background:none;padding:0}
.theme-pf.plain .result-h{color:var(--ink-2)}
.theme-pf.plain .result-pills li{background:var(--paper-white);border:1px solid var(--hairline)}
.theme-pf.plain .vs-col,.theme-pf.plain .vs-col.mine{background:var(--paper-white)}
.theme-pf.plain .vs-col.mine{border:1.5px solid var(--brand-ink)}
.theme-pf.plain .vs .mine li::before{color:var(--blush-deep)}
.theme-pf.plain .tour-tabs button{background:var(--paper-white)}
.theme-pf.plain .tour-tabs button[aria-selected="true"]{background:var(--brand-ink);border-color:var(--brand-ink);color:var(--paper-white)}
.theme-pf.plain .me img{rotate:0deg;border-color:var(--paper-white)}
.theme-pf.plain .me .hand{color:var(--blush-deep);background:var(--paper-white)}
.buy{display:flex;flex-direction:column;align-items:center;gap:.7rem}
.buy-price{font-size:var(--t-small);color:var(--ink-2)}
.buy-price b{font-family:var(--f-display);font-weight:800;font-size:var(--t-feat);color:var(--ink);margin-right:.2rem}
.buy .btn{align-self:center}
/* ---- link page header, two versions (header[data-hero]) ---- */
.top .handle{font-family:var(--f-body);font-size:var(--t-body);font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink-2)}
.top .socials{display:none}
.work-btn,.float-mail{gap:.5rem}
.work-btn svg,.float-mail svg{width:20px;height:20px}
/* version "stickers": tags float around the photo, solid button under the H1 */
.top[data-hero="stickers"] .me-top{margin-bottom:1.6rem}
.sticker{position:absolute;z-index:3;padding:.4rem .8rem;border-radius:999px;background:var(--card);border:1px solid var(--hairline);
box-shadow:var(--shadow);font-size:var(--t-small);font-weight:600;white-space:nowrap;color:var(--ink)}
.s-ai{left:-22%;top:18%;rotate:-6deg}
.s-free{right:-24%;top:44%;rotate:5deg;background:var(--blush-pop);border-color:var(--blush-pop);color:var(--on-blush)}
.s-boss{left:-16%;bottom:12%;rotate:3deg}
@media (prefers-reduced-motion:no-preference){
.sticker{animation:drift 6s ease-in-out infinite}
.s-free{animation-delay:-2s}.s-boss{animation-delay:-4s}
}
@keyframes drift{0%,100%{translate:0 0}50%{translate:0 -6px}}
.work-btn{align-self:center;margin-top:.6rem;background:var(--brand-ink);color:var(--brand-paper)}
/* ============================================================
CALMER, MORE PROFESSIONAL (2026-10-23): one strong button colour (ink), pink only for small accents
(highlighter swipes, New/Free tags, the signature). Overrides earlier rules on purpose.
============================================================ */
.btn-soft,.ticket .btn-soft,.kit-embed .formkit-submit{background:var(--edge);color:var(--ground);border:1px solid var(--edge)}
.feat .btn-soft,.club .btn-soft,.signup-card .btn-soft,.ticket .btn-soft,.price-card .btn-soft{background:var(--brand-ink);color:var(--brand-paper);border-color:var(--brand-ink)}
.btn-soft .btn-price{color:inherit;opacity:.7}
.feat{background:var(--card);border:1px solid var(--hairline)}
.club{background:var(--blush-soft)}
.sec-tag svg{color:var(--ink-2)}
.sticker,.s-free{background:var(--card);border-color:var(--hairline);color:var(--ink)}
.icon-btn{background:var(--card);color:var(--ink);border:1px solid var(--hairline)}
.tour-tabs button[aria-selected="true"]{background:var(--brand-ink);border-color:var(--brand-ink);color:var(--brand-paper)}
.flow b,.step-sticker,.aff-steps b{background:var(--brand-ink);color:var(--brand-paper)}
.flow::before{border-left-color:var(--hairline)}
.ticks li::before,.inside li::before{background:var(--brand-ink)}
.ticks li::after,.inside li::after{border-color:var(--brand-paper)}
.who{background:var(--blush-soft)}
.bubble[aria-pressed="true"]{background:var(--blush)}
.foot-card{background:var(--blush-soft);border:1px solid var(--hairline-2)}
/* ============================================================
COLOUR SYSTEM, FINAL (Yule picked "C · black + pink statement", 2026-10-23)
White page · black buttons · soft pink for the #1 card + small accents · ONE black statement card (Mail Club)
with a pink button · black footer card with the brand name in pink.
============================================================ */
.feat{background:var(--blush-soft);border:0}
.s-free,.tag,.free-pill{background:var(--blush-pop);border-color:var(--blush-pop);color:var(--on-blush)}
.sec-tag svg{color:var(--blush-deep)}
.club{background:var(--brand-ink);border:0;color:var(--brand-paper);
--ink:var(--brand-paper);--ink-2:var(--statement-ink-2);--brand-ink:var(--brand-paper);--brand-ink-2:var(--statement-ink-2)}
.club .btn-soft{background:var(--blush-pop);color:var(--brand-ink-dark);border-color:var(--blush-pop)}
.foot-card{background:var(--brand-ink);border:0;color:var(--brand-paper);
--ink:var(--brand-paper);--ink-2:var(--statement-ink-2);--ink-3:var(--statement-ink-3);--card:var(--brand-ink)}
.foot-brand{color:var(--blush-pop)}
.foot-card .icon-btn{background:transparent;color:var(--brand-paper);border-color:var(--statement-ink-3)}
section.club{background:var(--brand-ink-dark)}
section.club .feat-body :is(h2,h3){color:var(--brand-paper)}
section.club .row-sub{color:var(--statement-ink-2)}
/* the "xx, Yule" name label: brand pink with black handwriting (no berry) */
.me .hand{background:var(--blush-pop);color:var(--brand-ink-dark);padding:.1rem .55rem;border-radius:8px}
.theme-pf.plain .me .hand{background:var(--blush-pop);color:var(--brand-ink-dark)}
/* Boss Girl favourites (Yule, 2026-10-23): the #1 card is a plum-black statement card (the page's anchor; full pink was
too much pink, soft pink blended in) with a WHITE button; the cards under it stay soft pink */
.feat{background:var(--blush-soft);border:0}
[aria-labelledby="best-h"] .feat{background:var(--brand-ink-dark);color:var(--brand-paper)}
[aria-labelledby="best-h"] .feat-body :is(h2,h3),[aria-labelledby="best-h"] .feat-body h3 a{color:var(--brand-paper)}
[aria-labelledby="best-h"] .feat .row-sub{color:var(--statement-ink-2)}
[aria-labelledby="best-h"] .feat .btn-soft{background:var(--brand-paper);color:var(--brand-ink-dark);border-color:var(--brand-paper)}
[aria-labelledby="best-h"] .mid{background:var(--blush-soft);border-color:transparent}
/* FOUR SURFACES ONLY (2026-10-21): white (+ hairline) · one soft pink (--blush-soft) · full pink (--blush-pop) for the
ONE hero item per page (link page: #1 favourite · sales pages: the ticket) · plum-black (Mail Club, footer).
No mid pink, no warm grey cards. */
.ticket{background:var(--blush-pop)}
.brands,.soon{background:var(--blush-soft);border-color:transparent}
.stats li{background:var(--card);border:1px solid var(--hairline)}
.needs span{background:var(--blush-soft)}
.bubble[aria-pressed="true"]{background:var(--blush-pop)}
/* AI Brand Deal Manager block in plum-black (2026-10-21, trying out): text on it light, its inner cards stay white */
.soon{background:var(--brand-ink-dark);border-color:transparent;color:var(--brand-paper);
--ink:var(--brand-paper);--ink-2:var(--statement-ink-2);--ink-3:var(--statement-ink-3)}
.soon :is(.chat,.ai-tiles li,.next-grid li,.calm-card){color:var(--brand-ink)}
.soon .chat{border-color:transparent}
.soon mark.hl{background:none;color:var(--blush-pop)} /* white on the pink swipe was unreadable: on dark, the word itself turns pink */
/* ============================================================
SALES PAGE ROUND (2026-10-21, Yule's notes)
============================================================ */
/* every card stack on the sales pages: the same gap */
.step-cards,.demos,.quotes{gap:var(--card-gap)}
/* what it does: 4 cards, pink number stickers + pink ticks */
.step-sticker{background:var(--blush-pop);color:var(--on-blush)}
.step-card .ticks li::before{background:var(--blush-pop)}
.step-card .ticks li::after{border-color:var(--on-blush)}
/* how it compares: soft pink card, a full-pink column behind "The Hub", no row glow */
.compare.hub-col{background:var(--blush-soft);border-color:transparent;isolation:isolate}
.compare.hub-col::after{content:"";position:absolute;z-index:-1;top:.4rem;bottom:.4rem;left:5.8rem;
width:calc((100% - 8rem) / 2 + 1rem);border-radius:var(--r-md);background:var(--blush-pop)}
.compare.hub-col .cmp-head b:first-of-type,.compare.hub-col .yes::before{color:var(--on-blush)}
.compare.hub-col .cmp-row::before{display:none}
/* how it works (demo cards): soft pink cards, white tags */
.demo-card{background:var(--blush-soft);border-color:transparent}
.demo-card .tags li{background:var(--card);color:var(--brand-ink)}
/* AI manager chat: the questions in full pink so they stand out */
.msg.user{background:var(--blush-pop);color:var(--on-blush)}
/* written testimonials: round profile photo on the left */
.quotes li{flex-direction:row;align-items:flex-start;gap:.9rem}
.q-photo{width:48px;height:48px;flex:none;border-radius:50%;overflow:hidden;background:var(--card);font-size:9px}
.q-photo img{width:100%;height:100%;object-fit:cover}
.q-text{display:flex;flex-direction:column;gap:.6rem;min-width:0}
/* receipt: soft pink paper so it stands off the white page */
.receipt{background:var(--blush-soft)}
/* founding price card: full pink, no outline; ticks black on it */
.price-card{background:var(--blush-pop);border:0}
/* affiliate animation box: soft pink, not grey */
.ah{background:var(--blush-soft)}
.cmp-row p{margin:0} /* a general paragraph margin made every row ~40px too tall */
/* ============================================================
ROUND (2026-10-22): Yule's notes on the Creator Hub page
============================================================ */
/* grey is only for placeholder images: fact cards white */
.facts li{background:var(--card);border:1px solid var(--hairline)}
/* compare: wider label column so "Everything" doesn't run under the pink Hub column */
.compare.hub-col .cmp-head,.compare.hub-col .cmp-row{grid-template-columns:5.6rem 1fr 1fr}
.compare.hub-col::after{left:6.85rem;width:calc((100% - 9rem) / 2 + .9rem)}
/* bonus gallery: a swipe row, tap a tile to enlarge */
.swipe-wrap{margin-inline:calc(-1 * var(--gutter))}
.swipe-row{display:flex;gap:var(--card-gap);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:.4rem var(--gutter) 1rem;scroll-padding-inline:var(--gutter)}
.swipe-row::-webkit-scrollbar{display:none}
.swipe-row li{flex:0 0 78%;scroll-snap-align:start}
.zoom-tile{display:block;width:100%;aspect-ratio:16/10;border-radius:var(--r-md);overflow:hidden;background:var(--ground-2);border:4px solid var(--card);box-shadow:var(--shadow);cursor:zoom-in}
.zoom-tile > img,.zoom-tile > .ph{width:100%;height:100%;object-fit:cover}
.zoom-box{border:0;padding:0;background:none;overflow:visible;width:min(94vw,900px);max-height:92svh}
.zoom-box::backdrop{background:var(--overlay)}
.zoom-body{border-radius:var(--r-md);overflow:hidden;background:var(--card);aspect-ratio:16/10}
.zoom-body > img,.zoom-body > .ph{width:100%;height:100%;object-fit:contain}
/* share animation: the envelope turns into a pink money icon when the commission comes in */
.ah-notif-icon{position:relative;display:grid}
.ah-notif-icon > span{grid-area:1/1;display:grid;place-items:center;width:100%;height:100%}
.ni-b{opacity:0;scale:.5;font-size:20px}
@media (prefers-reduced-motion:no-preference){
.ah-notif-icon{animation:ni-bg var(--d) infinite}
.ni-a{animation:ni-a var(--d) infinite}
.ni-b{animation:ni-b var(--d) infinite}
.ah-notif{animation:ni-glow var(--d) infinite}
}
@keyframes ni-bg{0%,49%{background:var(--blush);scale:1}51%{background:var(--blush-pop);scale:1.15}54%,100%{background:var(--blush-pop);scale:1}}
@keyframes ni-a{0%,49%{opacity:1;scale:1}51%,100%{opacity:0;scale:.5}}
@keyframes ni-b{0%,49%{opacity:0;scale:.5}52%{opacity:1;scale:1.25}55%,100%{opacity:1;scale:1}}
@keyframes ni-glow{0%,49%{box-shadow:var(--shadow-lift)}52%,57%{box-shadow:0 0 0 4px var(--blush-pop),var(--shadow-lift)}62%,100%{box-shadow:var(--shadow-lift)}}
/* for you if: white checks in pink circles */
.fit2 .yes li{display:inline-flex;align-items:center;gap:.45rem}
.fit2 .yes li::before{content:"✓";width:20px;height:20px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--blush-pop);color:var(--brand-paper);font-size:11px;font-weight:700}
/* see it in action: pink tags */
.demo-card .tags li{background:var(--blush-pop);color:var(--on-blush)}
/* ============================================================
ROUND (2026-10-22, later): more contrast
============================================================ */
/* for you if: brand pink circles with a dark tick · not for you: plum-black pills */
.fit2 .yes li::before{background:var(--blush-pop);color:var(--on-blush)}
.fit2 .no li{background:var(--brand-ink-dark);color:var(--brand-paper)}
.fit2 .no li::before{color:var(--statement-ink-3)}
/* link page: Freebies sticker white like the other two (pink lives in the H1 highlight now) */
.sticker.s-free{background:var(--card);border-color:var(--hairline);color:var(--ink)}
.fit2 .no li{display:inline-flex;align-items:center;gap:.45rem}
.fit2 .no li::before{content:"✕"}
/* commission section ("For founding members") in plum-black, like the AI manager block: breaks up the long white
stretch after the price card. The animation box stays soft pink, the step numbers turn brand pink. */
.affiliate{background:var(--brand-ink-dark);border-color:transparent;color:var(--brand-paper);
--ink:var(--brand-paper);--ink-2:var(--statement-ink-2);--ink-3:var(--statement-ink-3)}
.affiliate mark.hl{background:none;color:var(--blush-pop)}
.affiliate .aff-steps b{background:var(--blush-pop);color:var(--on-blush)}
/* LIGHTBOX GALLERY (2026-10-22): an enlarged image swipes through the rest of its gallery.
Applies to every [data-zoom] gallery, now and in the future. */
.zoom-track{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.zoom-track::-webkit-scrollbar{display:none}
.zoom-slide{flex:0 0 100%;height:100%;scroll-snap-align:center;scroll-snap-stop:always}
.zoom-slide > img,.zoom-slide > .ph{width:100%;height:100%;object-fit:contain}
.zoom-nav{display:flex;justify-content:center;align-items:center;gap:1.1rem;margin-top:.9rem}
.zoom-nav[hidden]{display:none}
.zoom-nav button{width:44px;height:44px;border-radius:50%;background:var(--card);color:var(--ink);font-size:1.5rem;line-height:1;box-shadow:var(--shadow)}
.zoom-count{min-width:3.5em;text-align:center;font-family:var(--f-mono);font-weight:500;font-size:var(--t-mono);letter-spacing:.12em;color:var(--on-photo)}
/* cover as a screen recording (freebie + product pages): a wider 16:10 frame so the whole screen shows */
.fp-cover > video{display:block;width:100%;height:100%;object-fit:cover;object-position:left top;clip-path:url(#fun-cut);background:var(--ground-2)}
.fp-cover.wide{aspect-ratio:16/10}
/* a cover recording opens bigger in the video popup (controls: play/pause + progress bar): the whole cover is the
tap area, a small white expand icon sits top-right (the Free/New tag is top-left) */
.cover-play{position:absolute;inset:0;z-index:2;background:none;border:0;cursor:zoom-in;-webkit-tap-highlight-color:transparent}
.cover-play > span{position:absolute;top:.7rem;right:.7rem;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
background:var(--play-bg);color:var(--play-ink);box-shadow:var(--shadow)}
.cover-play svg{width:18px;height:18px}
.fp-cover .tag.on-img{z-index:3}
.vid-bar .btn{white-space:nowrap;flex:none}
/* cover variant: a screenshot shown whole in a soft pink box (no fun cut) — for page screenshots that shouldn't be cropped */
.fp-cover.boxed{aspect-ratio:auto;padding:1.1rem;border-radius:var(--r-lg);background:var(--blush-soft)}
.fp-cover.boxed > img{height:auto;aspect-ratio:auto;object-fit:contain;clip-path:none;border-radius:var(--r-sm);border:1px solid var(--hairline-2)}
.fp-cover.boxed .tag.on-img{top:1.6rem;left:1.6rem}
/* What's inside (freebie pages): brand-pink circles with a dark tick, like "For you if…" on the sales pages */
.inside li::before{background:var(--blush-pop)}
.inside li::after{border-color:var(--on-blush)}
/* footer: Yule's photo (not a cut-out) in the corner spot: square crop, white rim, same tilt */
.foot-cutout.foot-photo{bottom:-2.4rem;right:-.4rem;width:29%;height:auto;object-fit:cover;object-position:center 20%;border:4px solid var(--brand-paper);border-radius:var(--r-md);filter:none;box-shadow:var(--shadow-lift)}
/* how it compares, premium (2026-10-22): white card, plum-black column behind "The Hub" with a small pink badge on
top, ticks in brand-pink circles. Less pink, more contrast. */
.compare.hub-col{background:var(--blush-soft);border-color:transparent;margin-bottom:1.4rem}
.compare.hub-col::after{background:var(--brand-ink-dark);top:-.35rem;bottom:-.35rem;box-shadow:var(--shadow)}
.compare.hub-col .cmp-head b:first-of-type{color:var(--brand-paper)}
.compare.hub-col .yes{color:var(--brand-paper);padding-left:1.6rem}
.compare.hub-col .yes::before{content:"✓";top:.05rem;width:1.1rem;height:1.1rem;border-radius:50%;display:grid;place-items:center;
background:var(--blush-pop);color:var(--on-blush);font-size:.68rem;line-height:1}
.cmp-badge{position:absolute;z-index:1;bottom:-.35rem;left:calc(6.85rem + ((100% - 9rem) / 2 + .9rem) / 2);translate:-50% 50%;
white-space:nowrap;padding:.3rem .7rem;border-radius:99px;background:var(--blush-pop);color:var(--on-blush);
font-family:var(--f-mono);font-weight:500;font-size:var(--t-mono);letter-spacing:.12em;text-transform:uppercase;line-height:1.4}
.compare.hub-col .no,.compare.hub-col .cmp-head b:last-of-type{margin-left:.6rem} /* room between the dark column and the usual way */
/* Laptop placeholder (until a screenshot is in): fill the screen */
.hub-screen > .ph{flex:1}
/* Plenty of courses: many scattered options (muted chips, ✕) → one arrow → ONE Hub card (soft pink, pink ✓ rows).
Only the headline gets a highlighter swipe here. */
.swap{display:flex;flex-direction:column;align-items:center}
.swap-was{display:flex;flex-wrap:wrap;justify-content:center;gap:.35rem}
.swap-was li{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .6rem .35rem .35rem;border-radius:999px;
background:var(--card);border:1px solid var(--hairline);font-size:var(--t-xs);line-height:1.4;color:var(--ink-3)}
.swap-was li::before{content:"✕";width:16px;height:16px;border-radius:50%;display:grid;place-items:center;background:var(--ground-2);font-size:10px;font-weight:700}
.swap-arrow{display:grid;place-items:center;width:36px;height:36px;margin:.7rem 0;color:var(--ink-3)}
.swap-arrow svg{width:22px;height:22px}
.swap-now{width:100%;padding:1.3rem 1.25rem 1.1rem;border-radius:var(--r-lg);background:var(--blush-soft)}
.swap-now .swap-label{font-family:var(--f-mono);font-weight:500;font-size:var(--t-mono);letter-spacing:.12em;text-transform:uppercase;line-height:1.4;color:var(--ink-2);margin-bottom:.4rem}
.swap-now li{display:flex;align-items:center;gap:.7rem;padding:.75rem 0;font-family:var(--f-display);font-weight:600;font-size:var(--t-title);line-height:1.15;color:var(--ink)}
.swap-now li + li{border-top:1px solid var(--hairline)}
.swap-now li::before{content:"✓";flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--blush-pop);color:var(--on-blush);font-family:var(--f-body);font-size:12px;font-weight:700}
/* Price stacked: big price centred, small line underneath (Money Hub) */
.buy-price.stack{display:flex;flex-direction:column;align-items:center;gap:.15rem;text-align:center}
.buy-price.stack b{margin-right:0;line-height:1}
/* dark AI block on a themed page (Money Hub): the theme swipe must not beat the pink-word rule */
.theme-pf .soon mark.hl{background:none}
/* Reassurance cues under a buy button + on the receipt (Money Hub): one-time, no subscription, yours forever */
.reassure{display:flex;flex-wrap:wrap;justify-content:center;gap:.25rem .5rem;white-space:nowrap;font-family:var(--f-mono);font-size:var(--t-mono);
font-weight:500;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-2)}
.reassure li::before{content:"✓";display:inline-grid;place-items:center;width:1rem;height:1rem;margin-right:.25rem;border-radius:50%;
background:var(--blush-pop);color:var(--on-blush);font-size:.7rem;letter-spacing:0}
.receipt-note{margin-top:.9rem;text-align:center;font-family:var(--f-mono);font-size:var(--t-mono);font-weight:500;letter-spacing:.12em;
text-transform:uppercase;color:var(--ink-3)}
/* roomier: 2 cues, normal mono tracking (Yule: 3 looked cramped) */
.reassure{gap:.3rem 1.3rem;letter-spacing:.12em;margin-top:.15rem}
.reassure li::before{width:1.1rem;height:1.1rem;margin-right:.4rem}
/* the Creator Hub ticket on the plain portfolio theme (Money Hub): keep it brand pink, not the portfolio grey */
.theme-pf.plain .ticket{background:var(--blush-pop);border:0}
.theme-pf.plain .ticket-label{color:var(--on-blush)}
.theme-pf.plain .ticket-stub{border-top-color:var(--blush-deep);color:var(--on-blush)}
/* ===== MONEY HUB round 2 (2026-10-22) ===== */
/* How it works as tilted cards: soft pink, number inside, a dotted line joins each card to the next */
.tilt-steps{list-style:none;margin:0 auto;padding:0;display:flex;flex-direction:column;gap:2.6rem;width:min(100%,340px)}
.tilt-steps li{position:relative;display:flex;align-items:flex-start;gap:.85rem;padding:1rem 1.1rem 1.1rem;border-radius:var(--r-lg);
background:var(--blush-soft);color:var(--brand-ink);rotate:-1.2deg}
.tilt-steps li:nth-child(even){rotate:1.2deg}
/* connector = 3 whole round dots centred in the gap (a dashed border got cut off at the card edges, Yule 2026-10-23) */
.tilt-steps li:not(:last-child)::after{content:"";position:absolute;left:50%;top:calc(100% + (2.6rem - 30px) / 2);width:7px;height:30px;
translate:-50% 0;background:radial-gradient(circle,var(--blush-pop) 2.6px,transparent 3.1px) center top/7px 10px repeat-y}
.tilt-steps b{width:36px;height:36px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--brand-ink);
color:var(--brand-paper);font-family:var(--f-display);font-weight:600;font-size:var(--t-body)}
.tilt-steps h3{font-family:var(--f-display);font-weight:600;font-size:var(--t-body);line-height:1.3;margin:.35rem 0 .2rem}
.tilt-steps p{font-size:var(--t-small);color:var(--brand-ink-2);line-height:1.5}
/* result tags as an even 2×2 grid, regular weight (Yule: the wrapping pills looked stacked weird) */
.pill-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;width:min(100%,340px);margin:0 auto}
.pill-grid li{display:block;text-align:center;white-space:nowrap;padding:.6rem .5rem;border-radius:var(--r-md);background:var(--paper-white);
border:1px solid var(--hairline);font-size:var(--t-small);line-height:1.4}
/* Why I made this: tilted photo overlapping a soft pink story card with before → after rows */
.story{display:flex;flex-direction:column;align-items:center;width:min(100%,360px);margin:0 auto}
.story-photo{position:relative;z-index:1;width:62%;margin:0}
.story-photo > img,.story-photo > .ph{display:grid;place-items:center;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-lg);
border:5px solid var(--card);box-shadow:var(--shadow-lift);rotate:-3deg;line-height:1.6}
.story-photo figcaption{position:absolute;right:-.8rem;bottom:.6rem;rotate:-6deg}
.story-photo .hand{font-size:var(--t-hand);background:var(--blush-pop);color:var(--brand-ink-dark);padding:.1rem .55rem;border-radius:8px}
.story-card{margin-top:-2.6rem;padding:3.6rem 1.3rem 1.4rem;border-radius:var(--r-lg);background:var(--blush-soft);color:var(--brand-ink);text-align:center}
.story-card > p{font-size:var(--t-body);line-height:1.5}
.shift{display:flex;flex-direction:column;gap:.6rem;margin-top:1.2rem;text-align:left}
.shift li{display:flex;flex-direction:column;gap:.15rem;padding:.75rem .95rem;border-radius:var(--r-md);background:var(--paper-white)}
.shift span{font-size:var(--t-xs);color:var(--brand-ink-3)}
.shift span::after{content:" →"}
.shift b{font-family:var(--f-display);font-weight:600;font-size:var(--t-small)}
/* Calmer small cards (Yule, 2026-10-23): a small plain arrow instead of the round button (the whole card is the tap
target), and a quieter price (14px, soft ink) so the title leads */
.arrow{width:auto;height:auto;background:none;border:0;border-radius:0;color:var(--ink-3)}
.arrow svg{width:18px;height:18px;stroke-width:2}
.mid,.list-card .row{column-gap:.8rem}
.price{font-size:var(--t-small);color:var(--ink-2)}
.row-meta{margin-top:.35rem}
.mid .row-sub,.list-card .row-sub{text-wrap:pretty} /* no lonely last word */
/* Boss Girl favourites: ONE title size for every card (Yule, 2026-10-23: the bigger #1 title looked off) */
[aria-labelledby="best-h"] .feat-body :is(h2,h3){font-size:var(--t-title)}
/* ==========================================================================
PRICING LADDER (Yule 2026-10-23): one price display per tier, on every page.
Low ticket (under ~$20, e.g. the portfolio design, the link-in-bio template) = .price-tag, a soft pink swing tag
with a punched hole right above the button. Mid + high ($37 and up) = the full pink .ticket.
========================================================================== */
/* same text as the ticket (Yule: unified, nothing floating), in SOFT pink (Yule: back from full pink); the shape says "small thing" */
.price-tag{position:relative;display:flex;flex-direction:column;align-items:center;gap:.4rem;margin:0;padding:1rem 1.6rem 1rem 2.9rem;
background:var(--blush-soft);color:var(--on-blush);rotate:-2deg;
clip-path:polygon(1.6rem 0,100% 0,100% 100%,1.6rem 100%,0 50%);border-radius:0 var(--r-sm) var(--r-sm) 0}
.price-tag::before{content:"";position:absolute;left:1.2rem;top:50%;width:11px;height:11px;translate:0 -50%;
border-radius:50%;background:var(--ground);box-shadow:inset 0 0 0 1.5px var(--hairline)}
.price-tag .ticket-price{margin:0}
.price-tag .ticket-price > span{color:var(--on-blush)}
.buy:has(.price-tag){gap:1.1rem}
/* ===== LINK PAGE: ONE CARD RECIPE (Yule, 2026-10-23: the page didn't feel cohesive) =====
Every card: 26px corners · images sit 8px inside the card with 18px corners (follows the card's curve) · text starts
16px from the card edge · ONE title size (18px) · ONE thumbnail (88px, 18px corners) · every row is its own card
(Favourites soft pink, Little Gifts white + hairline, no shared list box). Scoped to the link page (sales/freebie pages are main.page.sales). */
main.page:not(.sales){--thumb:88px}
main.page:not(.sales) :is(.feat,.club){padding:8px 8px 18px;gap:14px}
main.page:not(.sales) :is(.feat-cover,.club-img){border-radius:18px}
main.page:not(.sales) :is(.feat,.club,.brands) .feat-body{padding-inline:8px}
main.page:not(.sales) :is(.feat,.club,.brands) .feat-body :is(h2,h3){font-size:var(--t-title)}
main.page:not(.sales) .brands{padding:20px 8px}
main.page:not(.sales) :is(.mid,.list-card .row){padding:8px 16px 8px 8px;column-gap:14px}
main.page:not(.sales) :is(.mid,.list-card .row) .thumb{width:88px;border-radius:18px}
main.page:not(.sales) .list-card{background:none;border:0;padding:0;display:grid;gap:var(--card-gap)}
main.page:not(.sales) .list-card .row{background:var(--card);border:1px solid var(--hairline-2);border-radius:var(--r-lg)} /* only Favourites are pink (Yule) */
main.page:not(.sales) .row + .row::before{display:none}
/* the picture is part of the card's tap area (Yule, 2026-10-23: tapping the image felt broken): thumbnails sit UNDER the
card's stretched link; only a thumbnail that plays a demo video stays on top as its own button. Tags never block taps. */
.thumb:not(.has-video){z-index:auto}
.tag.on-img{pointer-events:none}
/* plum-black ticket (Money Hub final push, Yule 2026-10-24: too much pink at the bottom, more premium): white text,
white button, light dashed tear line. Add class="ticket is-dark". */
.page .ticket.is-dark{background:var(--brand-ink-dark);color:var(--brand-paper);border:0;--ink-2:var(--statement-ink-2)}
.ticket.is-dark .ticket-label,.ticket.is-dark .ticket-price > span{color:var(--statement-ink-2)}
.ticket.is-dark .btn-soft{background:var(--brand-paper);color:var(--brand-ink-dark);border-color:var(--brand-paper)}
.ticket.is-dark .ticket-stub{border-top-color:var(--statement-ink-3);color:var(--brand-paper)}
/* questions popup (#askpop): FAQ button, then Instagram + email copy boxes, each with a small mono label */
.pop > .btn{align-self:flex-start}
.pop-row{display:flex;flex-direction:column;gap:.4rem}
.pop-label{font-family:var(--f-mono);font-size:var(--t-mono);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.need-ask{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
/* urgency pill under the buy/waitlist button (Creator Hub, Yule 2026-10-24): ONE price per phase, no “goes up to $X” */
.ticket-perk{align-self:center;padding:.35rem .8rem;border-radius:999px;background:var(--brand-paper);color:var(--brand-ink);
font-family:var(--f-display);font-weight:600;font-size:var(--t-small);text-align:center;margin-top:.2rem}
/* the anchor under the big waitlist price: launch price + what the waitlist saves */
.price-was{font-size:var(--t-small);color:var(--ink-2);text-align:center;margin-top:-.6rem} /* sits close under the big price: one quiet anchor, no “save $X” */
/* ============================================================
ICONS (Yule 2026-10-24: fewer emojis, solid icons instead).
= a Font Awesome Free 6.5.2 solid icon (CC BY 4.0, fontawesome.com) in the text colour, 1em big.
To add one: copy the path from fontawesome-free/svgs/solid/NAME.svg into a new .ic-NAME line.
============================================================ */
.ic{display:inline-block;width:1em;height:1em;flex:none;vertical-align:-.125em;background:currentColor;
-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.ic-arrows-rotate{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M105.1 202.6c7.7-21.8 20.2-42.3 37.8-59.8c62.5-62.5 163.8-62.5 226.3 0L386.3 160H352c-17.7 0-32 14.3-32 32s14.3 32 32 32H463.5c0 0 0 0 0 0h.4c17.7 0 32-14.3 32-32V80c0-17.7-14.3-32-32-32s-32 14.3-32 32v35.2L414.4 97.6c-87.5-87.5-229.3-87.5-316.8 0C73.2 122 55.6 150.7 44.8 181.4c-5.9 16.7 2.9 34.9 19.5 40.8s34.9-2.9 40.8-19.5zM39 289.3c-5 1.5-9.8 4.2-13.7 8.2c-4 4-6.7 8.8-8.1 14c-.3 1.2-.6 2.5-.8 3.8c-.3 1.7-.4 3.4-.4 5.1V432c0 17.7 14.3 32 32 32s32-14.3 32-32V396.9l17.6 17.5 0 0c87.5 87.4 229.3 87.4 316.7 0c24.4-24.4 42.1-53.1 52.9-83.7c5.9-16.7-2.9-34.9-19.5-40.8s-34.9 2.9-40.8 19.5c-7.7 21.8-20.2 42.3-37.8 59.8c-62.5 62.5-163.8 62.5-226.3 0l-.1-.1L125.6 352H160c17.7 0 32-14.3 32-32s-14.3-32-32-32H48.4c-1.6 0-3.2 .1-4.8 .3s-3.1 .5-4.6 1z'/%3E%3C/svg%3E")}
.ic-bag-shopping{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M160 112c0-35.3 28.7-64 64-64s64 28.7 64 64v48H160V112zm-48 48H48c-26.5 0-48 21.5-48 48V416c0 53 43 96 96 96H352c53 0 96-43 96-96V208c0-26.5-21.5-48-48-48H336V112C336 50.1 285.9 0 224 0S112 50.1 112 112v48zm24 48a24 24 0 1 1 0 48 24 24 0 1 1 0-48zm152 24a24 24 0 1 1 48 0 24 24 0 1 1 -48 0z'/%3E%3C/svg%3E")}
.ic-ban{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M367.2 412.5L99.5 144.8C77.1 176.1 64 214.5 64 256c0 106 86 192 192 192c41.5 0 79.9-13.1 111.2-35.5zm45.3-45.3C434.9 335.9 448 297.5 448 256c0-106-86-192-192-192c-41.5 0-79.9 13.1-111.2 35.5L412.5 367.2zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z'/%3E%3C/svg%3E")}
.ic-book{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M96 0C43 0 0 43 0 96V416c0 53 43 96 96 96H384h32c17.7 0 32-14.3 32-32s-14.3-32-32-32V384c17.7 0 32-14.3 32-32V32c0-17.7-14.3-32-32-32H384 96zm0 384H352v64H96c-17.7 0-32-14.3-32-32s14.3-32 32-32zm32-240c0-8.8 7.2-16 16-16H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16zm16 48H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16s7.2-16 16-16z'/%3E%3C/svg%3E")}
.ic-brain{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M184 0c30.9 0 56 25.1 56 56V456c0 30.9-25.1 56-56 56c-28.9 0-52.7-21.9-55.7-50.1c-5.2 1.4-10.7 2.1-16.3 2.1c-35.3 0-64-28.7-64-64c0-7.4 1.3-14.6 3.6-21.2C21.4 367.4 0 338.2 0 304c0-31.9 18.7-59.5 45.8-72.3C37.1 220.8 32 207 32 192c0-30.7 21.6-56.3 50.4-62.6C80.8 123.9 80 118 80 112c0-29.9 20.6-55.1 48.3-62.1C131.3 21.9 155.1 0 184 0zM328 0c28.9 0 52.6 21.9 55.7 49.9c27.8 7 48.3 32.1 48.3 62.1c0 6-.8 11.9-2.4 17.4c28.8 6.2 50.4 31.9 50.4 62.6c0 15-5.1 28.8-13.8 39.7C493.3 244.5 512 272.1 512 304c0 34.2-21.4 63.4-51.6 74.8c2.3 6.6 3.6 13.8 3.6 21.2c0 35.3-28.7 64-64 64c-5.6 0-11.1-.7-16.3-2.1c-3 28.2-26.8 50.1-55.7 50.1c-30.9 0-56-25.1-56-56V56c0-30.9 25.1-56 56-56z'/%3E%3C/svg%3E")}
.ic-bullseye{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M448 256A192 192 0 1 0 64 256a192 192 0 1 0 384 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 80a80 80 0 1 0 0-160 80 80 0 1 0 0 160zm0-224a144 144 0 1 1 0 288 144 144 0 1 1 0-288zM224 256a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z'/%3E%3C/svg%3E")}
.ic-calendar-days{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M128 0c17.7 0 32 14.3 32 32V64H288V32c0-17.7 14.3-32 32-32s32 14.3 32 32V64h48c26.5 0 48 21.5 48 48v48H0V112C0 85.5 21.5 64 48 64H96V32c0-17.7 14.3-32 32-32zM0 192H448V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V192zm64 80v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm128 0v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H208c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H336zM64 400v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H208zm112 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H336c-8.8 0-16 7.2-16 16z'/%3E%3C/svg%3E")}
.ic-camera{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M149.1 64.8L138.7 96H64C28.7 96 0 124.7 0 160V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V160c0-35.3-28.7-64-64-64H373.3L362.9 64.8C356.4 45.2 338.1 32 317.4 32H194.6c-20.7 0-39 13.2-45.5 32.8zM256 192a96 96 0 1 1 0 192 96 96 0 1 1 0-192z'/%3E%3C/svg%3E")}
.ic-cart-shopping{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M0 24C0 10.7 10.7 0 24 0H69.5c22 0 41.5 12.8 50.6 32h411c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3H170.7l5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H199.7c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z'/%3E%3C/svg%3E")}
.ic-chart-line{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M64 64c0-17.7-14.3-32-32-32S0 46.3 0 64V400c0 44.2 35.8 80 80 80H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H80c-8.8 0-16-7.2-16-16V64zm406.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L320 210.7l-57.4-57.4c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L240 221.3l57.4 57.4c12.5 12.5 32.8 12.5 45.3 0l128-128z'/%3E%3C/svg%3E")}
.ic-chart-pie{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M304 240V16.6c0-9 7-16.6 16-16.6C443.7 0 544 100.3 544 224c0 9-7.6 16-16.6 16H304zM32 272C32 150.7 122.1 50.3 239 34.3c9.2-1.3 17 6.1 17 15.4V288L412.5 444.5c6.7 6.7 6.2 17.7-1.5 23.1C371.8 495.6 323.8 512 272 512C139.5 512 32 404.6 32 272zm526.4 16c9.3 0 16.6 7.8 15.4 17c-7.7 55.9-34.6 105.6-73.9 142.3c-6 5.6-15.4 5.2-21.2-.7L320 288H558.4z'/%3E%3C/svg%3E")}
.ic-circle-check{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z'/%3E%3C/svg%3E")}
.ic-arrow-up{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2V448c0 17.7 14.3 32 32 32s32-14.3 32-32V141.2L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z'/%3E%3C/svg%3E")}
.ic-circle-question{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM169.8 165.3c7.9-22.3 29.1-37.3 52.8-37.3h58.3c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L280 264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24V250.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1H222.6c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z'/%3E%3C/svg%3E")}
.ic-clipboard{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M192 0c-41.8 0-77.4 26.7-90.5 64H64C28.7 64 0 92.7 0 128V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V128c0-35.3-28.7-64-64-64H282.5C269.4 26.7 233.8 0 192 0zm0 64a32 32 0 1 1 0 64 32 32 0 1 1 0-64zM112 192H272c8.8 0 16 7.2 16 16s-7.2 16-16 16H112c-8.8 0-16-7.2-16-16s7.2-16 16-16z'/%3E%3C/svg%3E")}
.ic-coins{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M512 80c0 18-14.3 34.6-38.4 48c-29.1 16.1-72.5 27.5-122.3 30.9c-3.7-1.8-7.4-3.5-11.3-5C300.6 137.4 248.2 128 192 128c-8.3 0-16.4 .2-24.5 .6l-1.1-.6C142.3 114.6 128 98 128 80c0-44.2 86-80 192-80S512 35.8 512 80zM160.7 161.1c10.2-.7 20.7-1.1 31.3-1.1c62.2 0 117.4 12.3 152.5 31.4C369.3 204.9 384 221.7 384 240c0 4-.7 7.9-2.1 11.7c-4.6 13.2-17 25.3-35 35.5c0 0 0 0 0 0c-.1 .1-.3 .1-.4 .2l0 0 0 0c-.3 .2-.6 .3-.9 .5c-35 19.4-90.8 32-153.6 32c-59.6 0-112.9-11.3-148.2-29.1c-1.9-.9-3.7-1.9-5.5-2.9C14.3 274.6 0 258 0 240c0-34.8 53.4-64.5 128-75.4c10.5-1.5 21.4-2.7 32.7-3.5zM416 240c0-21.9-10.6-39.9-24.1-53.4c28.3-4.4 54.2-11.4 76.2-20.5c16.3-6.8 31.5-15.2 43.9-25.5V176c0 19.3-16.5 37.1-43.8 50.9c-14.6 7.4-32.4 13.7-52.4 18.5c.1-1.8 .2-3.5 .2-5.3zm-32 96c0 18-14.3 34.6-38.4 48c-1.8 1-3.6 1.9-5.5 2.9C304.9 404.7 251.6 416 192 416c-62.8 0-118.6-12.6-153.6-32C14.3 370.6 0 354 0 336V300.6c12.5 10.3 27.6 18.7 43.9 25.5C83.4 342.6 135.8 352 192 352s108.6-9.4 148.1-25.9c7.8-3.2 15.3-6.9 22.4-10.9c6.1-3.4 11.8-7.2 17.2-11.2c1.5-1.1 2.9-2.3 4.3-3.4V304v5.7V336zm32 0V304 278.1c19-4.2 36.5-9.5 52.1-16c16.3-6.8 31.5-15.2 43.9-25.5V272c0 10.5-5 21-14.9 30.9c-16.3 16.3-45 29.7-81.3 38.4c.1-1.7 .2-3.5 .2-5.3zM192 448c56.2 0 108.6-9.4 148.1-25.9c16.3-6.8 31.5-15.2 43.9-25.5V432c0 44.2-86 80-192 80S0 476.2 0 432V396.6c12.5 10.3 27.6 18.7 43.9 25.5C83.4 438.6 135.8 448 192 448z'/%3E%3C/svg%3E")}
.ic-comment{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M512 240c0 114.9-114.6 208-256 208c-37.1 0-72.3-6.4-104.1-17.9c-11.9 8.7-31.3 20.6-54.3 30.6C73.6 471.1 44.7 480 16 480c-6.5 0-12.3-3.9-14.8-9.9c-2.5-6-1.1-12.8 3.4-17.4l0 0 0 0 0 0 0 0 .3-.3c.3-.3 .7-.7 1.3-1.4c1.1-1.2 2.8-3.1 4.9-5.7c4.1-5 9.6-12.4 15.2-21.6c10-16.6 19.5-38.4 21.4-62.9C17.7 326.8 0 285.1 0 240C0 125.1 114.6 32 256 32s256 93.1 256 208z'/%3E%3C/svg%3E")}
.ic-earth-europe{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M266.3 48.3L232.5 73.6c-5.4 4-8.5 10.4-8.5 17.1v9.1c0 6.8 5.5 12.3 12.3 12.3c2.4 0 4.8-.7 6.8-2.1l41.8-27.9c2-1.3 4.4-2.1 6.8-2.1h1c6.2 0 11.3 5.1 11.3 11.3c0 3-1.2 5.9-3.3 8l-19.9 19.9c-5.8 5.8-12.9 10.2-20.7 12.8l-26.5 8.8c-5.8 1.9-9.6 7.3-9.6 13.4c0 3.7-1.5 7.3-4.1 10l-17.9 17.9c-6.4 6.4-9.9 15-9.9 24v4.3c0 16.4 13.6 29.7 29.9 29.7c11 0 21.2-6.2 26.1-16l4-8.1c2.4-4.8 7.4-7.9 12.8-7.9c4.5 0 8.7 2.1 11.4 5.7l16.3 21.7c2.1 2.9 5.5 4.5 9.1 4.5c8.4 0 13.9-8.9 10.1-16.4l-1.1-2.3c-3.5-7 0-15.5 7.5-18l21.2-7.1c7.6-2.5 12.7-9.6 12.7-17.6c0-10.3 8.3-18.6 18.6-18.6H400c8.8 0 16 7.2 16 16s-7.2 16-16 16H379.3c-7.2 0-14.2 2.9-19.3 8l-4.7 4.7c-2.1 2.1-3.3 5-3.3 8c0 6.2 5.1 11.3 11.3 11.3h11.3c6 0 11.8 2.4 16 6.6l6.5 6.5c1.8 1.8 2.8 4.3 2.8 6.8s-1 5-2.8 6.8l-7.5 7.5C386 262 384 266.9 384 272s2 10 5.7 13.7L408 304c10.2 10.2 24.1 16 38.6 16H454c6.5-20.2 10-41.7 10-64c0-111.4-87.6-202.4-197.7-207.7zm172 307.9c-3.7-2.6-8.2-4.1-13-4.1c-6 0-11.8-2.4-16-6.6L396 332c-7.7-7.7-18-12-28.9-12c-9.7 0-19.2-3.5-26.6-9.8L314 287.4c-11.6-9.9-26.4-15.4-41.7-15.4H251.4c-12.6 0-25 3.7-35.5 10.7L188.5 301c-17.8 11.9-28.5 31.9-28.5 53.3v3.2c0 17 6.7 33.3 18.7 45.3l16 16c8.5 8.5 20 13.3 32 13.3H248c13.3 0 24 10.7 24 24c0 2.5 .4 5 1.1 7.3c71.3-5.8 132.5-47.6 165.2-107.2zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zM187.3 100.7c-6.2-6.2-16.4-6.2-22.6 0l-32 32c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0l32-32c6.2-6.2 6.2-16.4 0-22.6z'/%3E%3C/svg%3E")}
.ic-envelope{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z'/%3E%3C/svg%3E")}
.ic-eye{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z'/%3E%3C/svg%3E")}
.ic-file-lines{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V160H256c-17.7 0-32-14.3-32-32V0H64zM256 0V128H384L256 0zM112 256H272c8.8 0 16 7.2 16 16s-7.2 16-16 16H112c-8.8 0-16-7.2-16-16s7.2-16 16-16zm0 64H272c8.8 0 16 7.2 16 16s-7.2 16-16 16H112c-8.8 0-16-7.2-16-16s7.2-16 16-16zm0 64H272c8.8 0 16 7.2 16 16s-7.2 16-16 16H112c-8.8 0-16-7.2-16-16s7.2-16 16-16z'/%3E%3C/svg%3E")}
.ic-file-pen{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M0 64C0 28.7 28.7 0 64 0H224V128c0 17.7 14.3 32 32 32H384V299.6l-94.7 94.7c-8.2 8.2-14 18.5-16.8 29.7l-15 60.1c-2.3 9.4-1.8 19 1.4 27.8H64c-35.3 0-64-28.7-64-64V64zm384 64H256V0L384 128zM549.8 235.7l14.4 14.4c15.6 15.6 15.6 40.9 0 56.6l-29.4 29.4-71-71 29.4-29.4c15.6-15.6 40.9-15.6 56.6 0zM311.9 417L441.1 287.8l71 71L382.9 487.9c-4.1 4.1-9.2 7-14.9 8.4l-60.1 15c-5.5 1.4-11.2-.2-15.2-4.2s-5.6-9.7-4.2-15.2l15-60.1c1.4-5.6 4.3-10.8 8.4-14.9z'/%3E%3C/svg%3E")}
.ic-gift{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M190.5 68.8L225.3 128H224 152c-22.1 0-40-17.9-40-40s17.9-40 40-40h2.2c14.9 0 28.8 7.9 36.3 20.8zM64 88c0 14.4 3.5 28 9.6 40H32c-17.7 0-32 14.3-32 32v64c0 17.7 14.3 32 32 32H480c17.7 0 32-14.3 32-32V160c0-17.7-14.3-32-32-32H438.4c6.1-12 9.6-25.6 9.6-40c0-48.6-39.4-88-88-88h-2.2c-31.9 0-61.5 16.9-77.7 44.4L256 85.5l-24.1-41C215.7 16.9 186.1 0 154.2 0H152C103.4 0 64 39.4 64 88zm336 0c0 22.1-17.9 40-40 40H288h-1.3l34.8-59.2C329.1 55.9 342.9 48 357.8 48H360c22.1 0 40 17.9 40 40zM32 288V464c0 26.5 21.5 48 48 48H224V288H32zM288 512H432c26.5 0 48-21.5 48-48V288H288V512z'/%3E%3C/svg%3E")}
.ic-handshake{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M323.4 85.2l-96.8 78.4c-16.1 13-19.2 36.4-7 53.1c12.9 17.8 38 21.3 55.3 7.8l99.3-77.2c7-5.4 17-4.2 22.5 2.8s4.2 17-2.8 22.5l-20.9 16.2L512 316.8V128h-.7l-3.9-2.5L434.8 79c-15.3-9.8-33.2-15-51.4-15c-21.8 0-43 7.5-60 21.2zm22.8 124.4l-51.7 40.2C263 274.4 217.3 268 193.7 235.6c-22.2-30.5-16.6-73.1 12.7-96.8l83.2-67.3c-11.6-4.9-24.1-7.4-36.8-7.4C234 64 215.7 69.6 200 80l-72 48V352h28.2l91.4 83.4c19.6 17.9 49.9 16.5 67.8-3.1c5.5-6.1 9.2-13.2 11.1-20.6l17 15.6c19.5 17.9 49.9 16.6 67.8-2.9c4.5-4.9 7.8-10.6 9.9-16.5c19.4 13 45.8 10.3 62.1-7.5c17.9-19.5 16.6-49.9-2.9-67.8l-134.2-123zM16 128c-8.8 0-16 7.2-16 16V352c0 17.7 14.3 32 32 32H64c17.7 0 32-14.3 32-32V128H16zM48 320a16 16 0 1 1 0 32 16 16 0 1 1 0-32zM544 128V352c0 17.7 14.3 32 32 32h32c17.7 0 32-14.3 32-32V144c0-8.8-7.2-16-16-16H544zm32 208a16 16 0 1 1 32 0 16 16 0 1 1 -32 0z'/%3E%3C/svg%3E")}
.ic-heart{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z'/%3E%3C/svg%3E")}
.ic-hourglass-half{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M32 0C14.3 0 0 14.3 0 32S14.3 64 32 64V75c0 42.4 16.9 83.1 46.9 113.1L146.7 256 78.9 323.9C48.9 353.9 32 394.6 32 437v11c-17.7 0-32 14.3-32 32s14.3 32 32 32H64 320h32c17.7 0 32-14.3 32-32s-14.3-32-32-32V437c0-42.4-16.9-83.1-46.9-113.1L237.3 256l67.9-67.9c30-30 46.9-70.7 46.9-113.1V64c17.7 0 32-14.3 32-32s-14.3-32-32-32H320 64 32zM96 75V64H288V75c0 19-5.6 37.4-16 53H112c-10.3-15.6-16-34-16-53zm16 309c3.5-5.3 7.6-10.3 12.1-14.9L192 301.3l67.9 67.9c4.6 4.6 8.6 9.6 12.1 14.9H112z'/%3E%3C/svg%3E")}
.ic-house{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M575.8 255.5c0 18-15 32.1-32 32.1h-32l.7 160.2c0 2.7-.2 5.4-.5 8.1V472c0 22.1-17.9 40-40 40H456c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1H416 392c-22.1 0-40-17.9-40-40V448 384c0-17.7-14.3-32-32-32H256c-17.7 0-32 14.3-32 32v64 24c0 22.1-17.9 40-40 40H160 128.1c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2H104c-22.1 0-40-17.9-40-40V360c0-.9 0-1.9 .1-2.8V287.6H32c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z'/%3E%3C/svg%3E")}
.ic-inbox{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M121 32C91.6 32 66 52 58.9 80.5L1.9 308.4C.6 313.5 0 318.7 0 323.9V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V323.9c0-5.2-.6-10.4-1.9-15.5l-57-227.9C446 52 420.4 32 391 32H121zm0 64H391l48 192H387.8c-12.1 0-23.2 6.8-28.6 17.7l-14.3 28.6c-5.4 10.8-16.5 17.7-28.6 17.7H195.8c-12.1 0-23.2-6.8-28.6-17.7l-14.3-28.6c-5.4-10.8-16.5-17.7-28.6-17.7H73L121 96z'/%3E%3C/svg%3E")}
.ic-laptop{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M128 32C92.7 32 64 60.7 64 96V352h64V96H512V352h64V96c0-35.3-28.7-64-64-64H128zM19.2 384C8.6 384 0 392.6 0 403.2C0 445.6 34.4 480 76.8 480H563.2c42.4 0 76.8-34.4 76.8-76.8c0-10.6-8.6-19.2-19.2-19.2H19.2z'/%3E%3C/svg%3E")}
.ic-lock{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M144 144v48H304V144c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192V144C80 64.5 144.5 0 224 0s144 64.5 144 144v48h16c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V256c0-35.3 28.7-64 64-64H80z'/%3E%3C/svg%3E")}
.ic-magnifying-glass{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E")}
.ic-mobile-screen{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M16 64C16 28.7 44.7 0 80 0H304c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H80c-35.3 0-64-28.7-64-64V64zM144 448c0 8.8 7.2 16 16 16h64c8.8 0 16-7.2 16-16s-7.2-16-16-16H160c-8.8 0-16 7.2-16 16zM304 64H80V384H304V64z'/%3E%3C/svg%3E")}
.ic-moon{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z'/%3E%3C/svg%3E")}
.ic-mug-hot{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M88 0C74.7 0 64 10.7 64 24c0 38.9 23.4 59.4 39.1 73.1l1.1 1C120.5 112.3 128 119.9 128 136c0 13.3 10.7 24 24 24s24-10.7 24-24c0-38.9-23.4-59.4-39.1-73.1l-1.1-1C119.5 47.7 112 40.1 112 24c0-13.3-10.7-24-24-24zM32 192c-17.7 0-32 14.3-32 32V416c0 53 43 96 96 96H288c53 0 96-43 96-96h16c61.9 0 112-50.1 112-112s-50.1-112-112-112H352 32zm352 64h16c26.5 0 48 21.5 48 48s-21.5 48-48 48H384V256zM224 24c0-13.3-10.7-24-24-24s-24 10.7-24 24c0 38.9 23.4 59.4 39.1 73.1l1.1 1C232.5 112.3 240 119.9 240 136c0 13.3 10.7 24 24 24s24-10.7 24-24c0-38.9-23.4-59.4-39.1-73.1l-1.1-1C231.5 47.7 224 40.1 224 24z'/%3E%3C/svg%3E")}
.ic-palette{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M512 256c0 .9 0 1.8 0 2.7c-.4 36.5-33.6 61.3-70.1 61.3H344c-26.5 0-48 21.5-48 48c0 3.4 .4 6.7 1 9.9c2.1 10.2 6.5 20 10.8 29.9c6.1 13.8 12.1 27.5 12.1 42c0 31.8-21.6 60.7-53.4 62c-3.5 .1-7 .2-10.6 .2C114.6 512 0 397.4 0 256S114.6 0 256 0S512 114.6 512 256zM128 288a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm0-96a32 32 0 1 0 0-64 32 32 0 1 0 0 64zM288 96a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm96 96a32 32 0 1 0 0-64 32 32 0 1 0 0 64z'/%3E%3C/svg%3E")}
.ic-pen{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M362.7 19.3L314.3 67.7 444.3 197.7l48.4-48.4c25-25 25-65.5 0-90.5L453.3 19.3c-25-25-65.5-25-90.5 0zm-71 71L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4L1 481.2C-1.5 489.7 .8 498.8 7 505s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L421.7 220.3 291.7 90.3z'/%3E%3C/svg%3E")}
.ic-question{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M80 160c0-35.3 28.7-64 64-64h32c35.3 0 64 28.7 64 64v3.6c0 21.8-11.1 42.1-29.4 53.8l-42.2 27.1c-25.2 16.2-40.4 44.1-40.4 74V320c0 17.7 14.3 32 32 32s32-14.3 32-32v-1.4c0-8.2 4.2-15.8 11-20.2l42.2-27.1c36.6-23.6 58.8-64.1 58.8-107.7V160c0-70.7-57.3-128-128-128H144C73.3 32 16 89.3 16 160c0 17.7 14.3 32 32 32s32-14.3 32-32zm80 320a40 40 0 1 0 0-80 40 40 0 1 0 0 80z'/%3E%3C/svg%3E")}
.ic-receipt{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M14 2.2C22.5-1.7 32.5-.3 39.6 5.8L80 40.4 120.4 5.8c9-7.7 22.3-7.7 31.2 0L192 40.4 232.4 5.8c9-7.7 22.3-7.7 31.2 0L304 40.4 344.4 5.8c7.1-6.1 17.1-7.5 25.6-3.6s14 12.4 14 21.8V488c0 9.4-5.5 17.9-14 21.8s-18.5 2.5-25.6-3.6L304 471.6l-40.4 34.6c-9 7.7-22.3 7.7-31.2 0L192 471.6l-40.4 34.6c-9 7.7-22.3 7.7-31.2 0L80 471.6 39.6 506.2c-7.1 6.1-17.1 7.5-25.6 3.6S0 497.4 0 488V24C0 14.6 5.5 6.1 14 2.2zM96 144c-8.8 0-16 7.2-16 16s7.2 16 16 16H288c8.8 0 16-7.2 16-16s-7.2-16-16-16H96zM80 352c0 8.8 7.2 16 16 16H288c8.8 0 16-7.2 16-16s-7.2-16-16-16H96c-8.8 0-16 7.2-16 16zM96 240c-8.8 0-16 7.2-16 16s7.2 16 16 16H288c8.8 0 16-7.2 16-16s-7.2-16-16-16H96z'/%3E%3C/svg%3E")}
.ic-robot{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M320 0c17.7 0 32 14.3 32 32V96H472c39.8 0 72 32.2 72 72V440c0 39.8-32.2 72-72 72H168c-39.8 0-72-32.2-72-72V168c0-39.8 32.2-72 72-72H288V32c0-17.7 14.3-32 32-32zM208 384c-8.8 0-16 7.2-16 16s7.2 16 16 16h32c8.8 0 16-7.2 16-16s-7.2-16-16-16H208zm96 0c-8.8 0-16 7.2-16 16s7.2 16 16 16h32c8.8 0 16-7.2 16-16s-7.2-16-16-16H304zm96 0c-8.8 0-16 7.2-16 16s7.2 16 16 16h32c8.8 0 16-7.2 16-16s-7.2-16-16-16H400zM264 256a40 40 0 1 0 -80 0 40 40 0 1 0 80 0zm152 40a40 40 0 1 0 0-80 40 40 0 1 0 0 80zM48 224H64V416H48c-26.5 0-48-21.5-48-48V272c0-26.5 21.5-48 48-48zm544 0c26.5 0 48 21.5 48 48v96c0 26.5-21.5 48-48 48H576V224h16z'/%3E%3C/svg%3E")}
.ic-rocket{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M156.6 384.9L125.7 354c-8.5-8.5-11.5-20.8-7.7-32.2c3-8.9 7-20.5 11.8-33.8L24 288c-8.6 0-16.6-4.6-20.9-12.1s-4.2-16.7 .2-24.1l52.5-88.5c13-21.9 36.5-35.3 61.9-35.3l82.3 0c2.4-4 4.8-7.7 7.2-11.3C289.1-4.1 411.1-8.1 483.9 5.3c11.6 2.1 20.6 11.2 22.8 22.8c13.4 72.9 9.3 194.8-111.4 276.7c-3.5 2.4-7.3 4.8-11.3 7.2v82.3c0 25.4-13.4 49-35.3 61.9l-88.5 52.5c-7.4 4.4-16.6 4.5-24.1 .2s-12.1-12.2-12.1-20.9V380.8c-14.1 4.9-26.4 8.9-35.7 11.9c-11.2 3.6-23.4 .5-31.8-7.8zM384 168a40 40 0 1 0 0-80 40 40 0 1 0 0 80z'/%3E%3C/svg%3E")}
.ic-sack-dollar{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M320 96H192L144.6 24.9C137.5 14.2 145.1 0 157.9 0H354.1c12.8 0 20.4 14.2 13.3 24.9L320 96zM192 128H320c3.8 2.5 8.1 5.3 13 8.4C389.7 172.7 512 250.9 512 416c0 53-43 96-96 96H96c-53 0-96-43-96-96C0 250.9 122.3 172.7 179 136.4l0 0 0 0c4.8-3.1 9.2-5.9 13-8.4zm84 88c0-11-9-20-20-20s-20 9-20 20v14c-7.6 1.7-15.2 4.4-22.2 8.5c-13.9 8.3-25.9 22.8-25.8 43.9c.1 20.3 12 33.1 24.7 40.7c11 6.6 24.7 10.8 35.6 14l1.7 .5c12.6 3.8 21.8 6.8 28 10.7c5.1 3.2 5.8 5.4 5.9 8.2c.1 5-1.8 8-5.9 10.5c-5 3.1-12.9 5-21.4 4.7c-11.1-.4-21.5-3.9-35.1-8.5c-2.3-.8-4.7-1.6-7.2-2.4c-10.5-3.5-21.8 2.2-25.3 12.6s2.2 21.8 12.6 25.3c1.9 .6 4 1.3 6.1 2.1l0 0 0 0c8.3 2.9 17.9 6.2 28.2 8.4V424c0 11 9 20 20 20s20-9 20-20V410.2c8-1.7 16-4.5 23.2-9c14.3-8.9 25.1-24.1 24.8-45c-.3-20.3-11.7-33.4-24.6-41.6c-11.5-7.2-25.9-11.6-37.1-15l0 0-.7-.2c-12.8-3.9-21.9-6.7-28.3-10.5c-5.2-3.1-5.3-4.9-5.3-6.7c0-3.7 1.4-6.5 6.2-9.3c5.4-3.2 13.6-5.1 21.5-5c9.6 .1 20.2 2.2 31.2 5.2c10.7 2.8 21.6-3.5 24.5-14.2s-3.5-21.6-14.2-24.5c-6.5-1.7-13.7-3.4-21.1-4.7V216z'/%3E%3C/svg%3E")}
.ic-star{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z'/%3E%3C/svg%3E")}
.ic-sun{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM160 256a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zm224 0a128 128 0 1 0 -256 0 128 128 0 1 0 256 0z'/%3E%3C/svg%3E")}
.ic-triangle-exclamation{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/%3E%3C/svg%3E")}
.ic-wand-magic-sparkles{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M234.7 42.7L197 56.8c-3 1.1-5 4-5 7.2s2 6.1 5 7.2l37.7 14.1L248.8 123c1.1 3 4 5 7.2 5s6.1-2 7.2-5l14.1-37.7L315 71.2c3-1.1 5-4 5-7.2s-2-6.1-5-7.2L277.3 42.7 263.2 5c-1.1-3-4-5-7.2-5s-6.1 2-7.2 5L234.7 42.7zM46.1 395.4c-18.7 18.7-18.7 49.1 0 67.9l34.6 34.6c18.7 18.7 49.1 18.7 67.9 0L529.9 116.5c18.7-18.7 18.7-49.1 0-67.9L495.3 14.1c-18.7-18.7-49.1-18.7-67.9 0L46.1 395.4zM484.6 82.6l-105 105-23.3-23.3 105-105 23.3 23.3zM7.5 117.2C3 118.9 0 123.2 0 128s3 9.1 7.5 10.8L64 160l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L128 160l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L128 96 106.8 39.5C105.1 35 100.8 32 96 32s-9.1 3-10.8 7.5L64 96 7.5 117.2zm352 256c-4.5 1.7-7.5 6-7.5 10.8s3 9.1 7.5 10.8L416 416l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L480 416l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L480 352l-21.2-56.5c-1.7-4.5-6-7.5-10.8-7.5s-9.1 3-10.8 7.5L416 352l-56.5 21.2z'/%3E%3C/svg%3E")}
.stub-play .ic{font-size:13px}
.ic{margin-inline-end:.4em} /* space before the text that follows */
:is(.ai-tiles span,.calm-list span,.stub-play,.chat-hello-icon,.ah-money,.ni-b,.needs span) > .ic{margin:0}
/* Money Hub: the 4 tile icons under the money buddy chat in brand pink (Yule 2026-10-24) */
.theme-pf .soon .ai-tiles li > span{color:var(--blush-pop)}
/* Creator Hub headache photo: keep Yule + the laptop in the 4:5 crop (the photo is tall) */
.me-story img{object-position:50% 72%}
/* Card headlines (h3) everywhere: plain line breaks, the first line fills up as far as the words fit
(Yule 2026-10-28: balanced lines left a half-empty first line on the step cards; Safari’s “pretty” can do the same). */
h3,main.sales h3{text-wrap:wrap}
/* Creator Hub “See exactly what’s inside”: a two-part toggle (At launch / Free updates, with counts), one list at a time.
Live = the pink-tick list card; free updates = soft pink card with a plum-black + (coming later, not live yet) */
.incl-box{display:flex;flex-direction:column;gap:.9rem}
.incl-toggle{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:999px;background:var(--card);border:1px solid var(--hairline-2)}
.incl-toggle button{min-height:44px;border:0;border-radius:999px;background:none;color:var(--ink-2);font:600 var(--t-small)/1.4 var(--f-display);cursor:pointer;
display:flex;align-items:center;justify-content:center;gap:.45rem}
.incl-toggle small{font:500 var(--t-mono)/1 var(--f-mono);min-width:1.6rem;padding:.3rem .4rem;border-radius:999px;background:var(--blush-soft);color:var(--ink)}
.incl-toggle button[aria-selected="true"]{background:var(--ink);color:var(--card)}
.incl-toggle button[aria-selected="true"] small{background:var(--blush-pop);color:var(--on-blush)}
.incl-toggle button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (prefers-reduced-motion:no-preference){.incl-box [role="tabpanel"]:not([hidden]){animation:tour-in .35s cubic-bezier(.22,1,.36,1)}}
.inside.later{background:var(--blush-soft);border-color:transparent}
.inside.later li::before{background:var(--card);border:1px solid var(--hairline-2)}
.inside.later li::after{left:.275rem;top:1.325rem;width:.55rem;height:.55rem;border:0;transform:none;
background:linear-gradient(var(--ink),var(--ink)) center/2px 100% no-repeat,linear-gradient(var(--ink),var(--ink)) center/100% 2px no-repeat}
/* Creator Hub “Here’s exactly how it works”: the 4 things you say, shown like Instagram stories (js/main.js [data-steps]).
Stepper (4 numbered steps) → phone with 4 story bars + the screen recording (tap right = next, left = back) → the step. */
.howto{--ph:min(13.5rem,60vw);display:flex;flex-direction:column;align-items:center;gap:1.2rem}
.howto-tabs{display:grid;grid-template-columns:repeat(4,1fr);width:100%;max-width:26rem;position:relative}
.howto-tabs::before{content:"";position:absolute;top:22px;left:12.5%;right:12.5%;height:1px;background:var(--hairline-2)}
.howto-tabs button{position:relative;display:flex;flex-direction:column;align-items:center;gap:.35rem;min-height:44px;padding:.4rem 0 0;border:0;background:none;
color:var(--ink-2);font:500 var(--t-xs)/1.4 var(--f-body);cursor:pointer}
.ht-num{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--card);border:1px solid var(--hairline-2);
font:600 var(--t-xs)/1 var(--f-display);color:var(--ink)}
.howto-tabs button[aria-selected="true"]{color:var(--ink);font-weight:600}
.howto-tabs button[aria-selected="true"] .ht-num{background:var(--ink);border-color:var(--ink);color:var(--card)}
.howto-tabs button:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:var(--r-sm)}
.howto-stage{position:relative;width:100%}
.howto-bars{position:absolute;z-index:2;top:calc(9px + .7rem);left:50%;translate:-50% 0;width:calc(var(--ph) - 18px - 1.6rem);display:grid;grid-template-columns:repeat(4,1fr);gap:4px;pointer-events:none}
.howto-bars i{position:relative;height:3px;border-radius:2px;overflow:hidden;background:color-mix(in srgb,var(--ink) 16%,transparent)}
.howto-bars i::after{content:"";position:absolute;inset:0;background:var(--ink);transform-origin:left;transform:scaleX(var(--p,0))}
.howto-step{display:flex;flex-direction:column;align-items:center;gap:1.2rem}
.howto-screen{position:relative;width:var(--ph);aspect-ratio:9/19.5;border:9px solid var(--ink);border-radius:2.4rem;overflow:hidden;
background:var(--ground-2);box-shadow:var(--shadow-lift);cursor:pointer;-webkit-tap-highlight-color:transparent}
.howto-screen > video,.howto-screen > img,.howto-screen > .ph{display:block;width:100%;height:100%;object-fit:cover}
.howto-screen > .ph{display:grid;place-items:center;padding:3rem 1.2rem;text-align:center}
.howto-text{display:flex;flex-direction:column;align-items:center;gap:.55rem;text-align:center;max-width:30rem}
.howto-count{font-family:var(--f-mono);font-size:var(--t-mono);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.howto-text h3{font-size:var(--t-title)}
.say{display:inline-block;margin-left:.15rem;padding:.2rem .75rem .3rem;border-radius:1.1rem 1.1rem .35rem 1.1rem;background:var(--blush-pop);color:var(--on-blush)}
.howto-text .tags{justify-content:center;margin-top:.2rem}
@media (prefers-reduced-motion:no-preference){.howto-step:not([hidden]){animation:tour-in .35s cubic-bezier(.22,1,.36,1)}}
/* Creator Hub receipt = “what you’d pay separately” (.receipt.separately): rows wrap, so columns instead of dot leaders:
icon | the Hub part + a small grey “instead of …” line | the price */
.separately .receipt-lines{gap:.95rem}
.separately .receipt-lines li{justify-content:space-between;align-items:start;gap:.8rem}
.separately .receipt-lines li::after{content:none}
.separately .receipt-lines li span{display:flex;align-items:center;gap:.55rem;max-width:none;flex:1}
.separately .receipt-lines li span .ic{flex:none;width:1.1em}
.separately .receipt-lines li b{white-space:nowrap}
.separately small{grid-column:2;display:block;margin-top:.1rem;font-family:var(--f-body);font-size:var(--t-xs);font-weight:400;
letter-spacing:0;text-transform:none;color:var(--ink-3)}
.separately .receipt-total small{margin-top:.2rem}
/* “Without the Hub” receipt: every price in quiet grey (what you WON'T pay); the last line “You pay $47” in a full-width
brand pink band, bold = what you DO pay */
.separately .receipt-lines li b{color:var(--ink-2);font-family:var(--f-body);font-weight:600;font-size:var(--t-small)}
.separately .receipt-lines li{align-items:center}
.separately .receipt-lines em{margin-left:.35rem;padding:.1rem .45rem;border-radius:999px;background:var(--blush-pop);color:var(--on-blush);
font:500 var(--t-mono)/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;font-style:normal;flex:none}
.separately .receipt-total b{color:var(--ink-2);font-weight:600}
.r-pay{display:flex;justify-content:space-between;align-items:center;margin:1rem -1.3rem 0;padding:1rem 1.3rem 1.1rem;
background:var(--blush-pop);color:var(--on-blush);font-family:var(--f-mono);font-size:var(--t-small);font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.r-pay small{display:block;margin-top:.2rem;font-family:var(--f-body);font-size:var(--t-xs);font-weight:400;letter-spacing:0;text-transform:none;color:var(--on-blush)}
.r-pay b{font-family:var(--f-display);font-weight:800;font-size:var(--t-name);letter-spacing:-.03em;line-height:1;text-transform:none}
/* receipt groups: “Every month” / “One-time” small labels; the one-time total sits right under the monthly one */
.separately .r-group{margin-top:1rem;font-family:var(--f-mono);font-size:var(--t-mono);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.separately .r-group + .receipt-lines{padding-top:.6rem}
.separately .receipt-lines{padding-bottom:.4rem}
.separately .receipt-total{margin-top:.8rem}
.separately .receipt-total.r-once{margin-top:.4rem;padding-top:0;border-top:0}
.separately .r-once b{font-size:var(--t-title)}
/* "Watch it work": the story player on a laptop (same silver laptop as the hero) instead of a phone */
.howto{--ph:min(34rem,86%)}
.howto-lap{width:var(--ph)}
.howto-lap .howto-screen{width:100%;aspect-ratio:16/10;border-radius:14px 14px 4px 4px;border-width:7px 7px 9px;border-color:var(--laptop-bezel);box-shadow:none;display:block}
.howto-lap .howto-screen > .ph{padding:1.2rem}
.howto-bars{top:calc(7px + .6rem);width:calc(var(--ph) - 14px - 1.6rem)}
/* ---- WATCH IT WORK: the drawn screens in the laptop (.wk, js/main.js [data-steps]). Claude chat left, the app right.
Sizes inside are em of the screen width (a scaled-down picture of a real screen, not page text). Light screen in
dark mode too (brand tokens), like the hero laptop. Motion = transform + opacity only. ---- */
.howto-lap .howto-screen{container-type:inline-size}
.wk{position:absolute;inset:0;display:grid;grid-template-columns:42% 1fr;padding-top:7.5cqw;font-size:3.3cqw;line-height:1.3;
font-family:var(--f-body);color:var(--brand-ink);background:var(--brand-paper-2);text-align:left}
.wk .ic{flex:none}
.wk-lab{display:flex;align-items:center;gap:.45em;font-family:var(--f-mono);font-weight:500;font-size:.72em;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-ink-3);white-space:nowrap}
.wk-chat{display:flex;flex-direction:column;gap:.6em;min-height:0;padding:.8em .7em .8em;background:var(--blush-soft)}
.wk-log{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;gap:.45em;overflow:hidden;
-webkit-mask-image:linear-gradient(to bottom,transparent,#000 22%);mask-image:linear-gradient(to bottom,transparent,#000 22%)}
.wk-me,.wk-ai{flex:none;max-width:94%;padding:.4em .65em .45em}
.wk-me{align-self:flex-end;min-height:1.75em;border-radius:1em 1em .3em 1em;background:var(--blush-pop);color:var(--on-blush);font-weight:500}
.wk-ai{align-self:flex-start;border-radius:1em 1em 1em .3em;background:var(--brand-card);border:1px solid var(--brand-hairline)}
.wk-dots{flex:none;align-self:flex-start;display:flex;gap:.3em;padding:.6em .7em;border-radius:1em;background:var(--brand-card);border:1px solid var(--brand-hairline)}
.wk-dots i{width:.4em;height:.4em;border-radius:50%;background:var(--brand-ink-3);opacity:.35}
.wk-app{position:relative;background:var(--brand-card);border-left:1px solid var(--brand-hairline)}
.wk-view{position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;gap:.55em;padding:.8em .8em;opacity:0;transition:opacity .35s ease}
.wk-view.on{opacity:1}
.wk-view.off{opacity:0}
.wk-row{display:flex;justify-content:space-between;align-items:center;gap:.6em;width:100%;padding-bottom:.45em;border-bottom:1px solid var(--brand-hairline-2)}
.wk-row > span{color:var(--brand-ink-3);white-space:nowrap}
.wk-row > b{font-weight:600;text-align:right;white-space:nowrap}
.wk b{font-family:var(--f-display);font-weight:600}
.wk-sm{display:block;font-size:.82em;color:var(--brand-ink-3)}
.wk-pill{display:inline-flex;align-items:center;gap:.35em;padding:.15em .6em .2em;border-radius:999px;background:var(--blush-soft);color:var(--brand-ink);font-family:var(--f-body);font-weight:500;font-size:.85em;white-space:nowrap}
.wk-pill.is-pop{background:var(--blush-pop);color:var(--on-blush)}
.wk-pill.dark{background:var(--brand-ink);color:var(--brand-paper)}
.wk-cols{display:grid;grid-template-columns:1fr 1fr;gap:.4em;width:100%;flex:1;min-height:0}
.wk-col{display:flex;flex-direction:column;gap:.35em;padding:.4em;overflow:hidden;border-radius:.6em;background:var(--brand-paper-2)}
.wk-colh{font-family:var(--f-mono);font-weight:500;font-size:.68em;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-ink-3)}
.wk-card{flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:.2em;padding:.35em .45em .4em;border-radius:.55em;background:var(--brand-card);border:1px solid var(--brand-hairline)}
.wk-card b{font-size:.85em;line-height:1.15}
.wk-card .wk-sm{font-size:.7em;line-height:1.2}
.wk-card .wk-pill{font-size:.74em}
.wk-card.is-hot{border-color:var(--blush-pop);box-shadow:0 0 0 1px var(--blush-pop)}
.wk-kit{display:flex;flex-direction:column;align-items:center;gap:.3em;width:100%;padding:.8em .6em;border-radius:.8em;border:1px solid var(--brand-hairline);text-align:center}
.wk-ava{display:grid;place-items:center;width:2.6em;height:2.6em;border-radius:50%;background:var(--blush-pop);color:var(--on-blush)}
.wk-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:.3em;margin-top:.2em}
.wk-done{align-self:center}
.wk-mail{display:flex;flex-direction:column;gap:.45em;width:100%;padding-top:.2em}
.wk-mail mark.hl{color:inherit}
.wk-ln{display:block;height:.45em;width:100%;border-radius:.3em;background:var(--brand-hairline-2)}
.wk-ln.short{width:60%}
.wk-check{display:flex;align-items:center;gap:.5em;width:100%;padding:.5em .6em;border-radius:.6em;background:var(--brand-paper-2);font-weight:500}
.wk-check .ic{color:var(--brand-ink)}
.wk-check.is-flag{background:var(--brand-ink);color:var(--brand-paper)}
.wk-check.is-flag .ic{color:var(--blush-pop)}
/* timeline: [data-at] items take no room until they're on, [data-out] items leave (views fade instead) */
.wk [data-at]:not(.on):not(.wk-view),.wk .off:not(.wk-view){display:none}
@media (prefers-reduced-motion:no-preference){
.wk .on:not(.wk-view){animation:wk-in .45s cubic-bezier(.22,1,.36,1) both}
.wk .wk-slide.on{animation-name:wk-slide}
.wk .wk-pill.on,.wk-check.on{animation-name:wk-pop;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}
.wk-dots i{animation:wk-dot 1s ease-in-out infinite}
.wk-dots i:nth-child(2){animation-delay:.15s}
.wk-dots i:nth-child(3){animation-delay:.3s}
}
@keyframes wk-in{from{opacity:0;transform:translateY(.6em) scale(.96)}}
@keyframes wk-slide{from{opacity:0;transform:translateX(-90%) rotate(-3deg)}}
@keyframes wk-pop{from{opacity:0;transform:scale(.6)}}
@keyframes wk-dot{50%{opacity:1;transform:translateY(-.2em)}}
/* ---- WATCH IT WORK, window style (step 1 first; the others follow once Yule likes it). Floating browser windows like
the reference: a Claude card types one command, then the real result builds itself (drawn after the real designs:
UGC portfolio, media kit). Timing = [data-at] / [data-out] / [data-type] / data-len, same player as .wk.
Sizes inside are em of the window width (a scaled-down picture of a page). Light in dark mode too (brand tokens). ---- */
.bw-stage.howto-screen{width:var(--ph);aspect-ratio:10/10.4;border:0;border-radius:0;overflow:visible;background:none;box-shadow:none;display:block}
.bw{position:absolute;display:flex;flex-direction:column;border-radius:10px;overflow:hidden;background:var(--brand-card);
border:1px solid var(--brand-hairline);box-shadow:var(--shadow);container-type:inline-size;text-align:left;color:var(--brand-ink)}
.bw-bar{display:flex;align-items:center;gap:1.1cqw;padding:1.6cqw 2.2cqw;background:var(--brand-paper-2);border-bottom:1px solid var(--brand-hairline-2)}
.bw-bar > i{width:1.5cqw;height:1.5cqw;border-radius:50%;background:var(--brand-hairline)}
.bw-url{margin:0 auto;padding:.5cqw 3cqw;border-radius:99px;background:var(--brand-card);font-family:var(--f-mono);font-size:2.1cqw;color:var(--brand-ink-3)}
.bw-body{position:relative;display:block;font-size:2.6cqw;line-height:1.3;font-family:var(--f-body)}
.bw b{font-family:var(--f-display)}
.bw img{display:block;width:100%;height:100%;object-fit:cover}
.bw-tag{position:absolute;right:2.5cqw;bottom:2.5cqw;display:inline-flex;align-items:center;padding:.8cqw 2.4cqw;border-radius:99px;
background:var(--blush-pop);color:var(--on-blush);font-family:var(--f-display);font-weight:600;font-size:2.6cqw}
.bw .ic{margin-inline-end:.35em}
/* the media kit (after Yule’s real one, [Name] placeholders) */
.mk{display:grid;grid-template-columns:.8fr 1.2fr;gap:3cqw 4cqw;align-items:center;padding:4cqw 4.5cqw 4cqw}
.mk-photo{position:relative;aspect-ratio:4/5;padding:1cqw;border-radius:2cqw;background:var(--brand-card);border:1px solid var(--brand-hairline);rotate:-3deg}
.mk-photo img{border-radius:1.4cqw}
.mk-tag{position:absolute;right:-3cqw;top:-3cqw;padding:.6cqw 2cqw;border-radius:99px;background:var(--blush-pop);rotate:4deg;font-family:var(--f-mono);font-size:.72em;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.mk-copy{display:flex;flex-direction:column;align-items:flex-start;gap:1.8cqw}
.mk-handle{font-family:var(--f-mono);font-size:.75em;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-ink-3)}
.mk-h{font-weight:800;font-size:2.15em;line-height:1.02;letter-spacing:-.03em}
.mk-h mark.hl{color:inherit}
.mk-p{color:var(--brand-ink-2);font-size:.9em}
.mk-chips{display:flex;flex-wrap:wrap;gap:1.2cqw}
.mk-chips > span{padding:.5cqw 2cqw;border-radius:99px;border:1px solid var(--brand-hairline);font-size:.82em}
.mk-stats{grid-column:1 / -1;display:grid;grid-template-columns:auto repeat(4,1fr);align-items:center;gap:3cqw;padding:3cqw 4cqw;border-radius:3cqw;background:var(--brand-ink);color:var(--brand-paper)}
.mk-stats > span{display:flex;flex-direction:column;font-size:.75em;color:var(--statement-ink-2)}
.mk-stats > span b{font-weight:800;font-size:2.3em;line-height:1;letter-spacing:-.03em;color:var(--brand-paper)}
.mk-glance{font-weight:600;font-size:.95em;line-height:1.1;max-width:5em}
/* timeline: items fade in where they stand (no layout jumps); window 2 slides up */
.bw-stage [data-at]{opacity:0;translate:0 .7em}
.bw-stage .bw-mk[data-at]{translate:6% 18%}
.bw-stage .bw-mk.on{translate:0 0}
.bw-stage .on{opacity:1;translate:0 0}
.bw-stage .on.off{opacity:0;scale:.94}
@media (prefers-reduced-motion:no-preference){
.bw-stage [data-at]{transition:opacity .45s ease,translate .7s cubic-bezier(.22,1,.36,1),scale .45s ease}
.bw-stage .cc-ticks > span,.bw-stage .bw-tag{translate:0 0;scale:.6;transition:opacity .3s ease,scale .45s cubic-bezier(.34,1.56,.64,1)}
.bw-stage .cc-ticks > .on,.bw-stage .bw-tag.on{scale:1}
.bw-stage [data-type]{translate:0 0}
}
/* step 2: one window, Notion pipeline (after the real “Brand Pipeline (quick view)”, real brand photos) */
.bw-one{left:0;right:0;top:5%;width:96%;margin:0 auto;rotate:-1.2deg}
.bw-cur{position:absolute;left:58%;bottom:3%;width:4.2cqw;height:4.2cqw;color:var(--brand-ink);filter:drop-shadow(0 0 1px var(--brand-card))}
.bw-cur .fa{width:100%;height:100%}
.bw-stage .bw-cur[data-at]{translate:9cqw 7cqw}
.bw-stage .bw-cur.on{translate:0 0}
.np{display:flex;flex-direction:column;gap:1.8cqw;padding:0 0 3.4cqw;aspect-ratio:16/11.5}
.np-cover{display:block;height:13cqw;overflow:hidden}
.np-h{margin:0 4cqw;font-weight:700;font-size:1.9em;line-height:1.1}
.np-tabs{display:flex;gap:1.5cqw;margin:0 4cqw;font-size:.82em;color:var(--brand-ink-3)}
.np-tabs > span{padding:.5cqw 1.6cqw;border-radius:1cqw}
.np-tabs .is-on{background:var(--brand-paper-2);color:var(--brand-ink);font-weight:500}
.np-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw;margin:0 4cqw}
.np-card{display:flex;flex-direction:column;gap:.9cqw;padding-bottom:1.6cqw;border-radius:1.4cqw;overflow:hidden;border:1px solid var(--brand-hairline);background:var(--brand-card)}
.np-card img{height:auto;aspect-ratio:282/122}
.np-card b{margin:0 1.6cqw;font-weight:600;font-size:.92em}
.np-pill{align-self:flex-start;margin:0 1.6cqw;padding:.3cqw 1.4cqw;border-radius:99px;background:var(--blush-soft);font-size:.78em}
/* step 3: Claude picks 2 of 4 ideas → Gmail draft → Notion card “Pitched” + follow-up → Claude reminder */
.gm{display:flex;flex-direction:column;aspect-ratio:16/11.5;font-size:.92em}
.gm-head{padding:1.6cqw 3cqw;background:var(--brand-paper-2);font-size:.95em}
.gm-head b{font-weight:600}
.gm-row{display:flex;gap:2cqw;margin:0 3cqw;padding:1.3cqw 0;border-bottom:1px solid var(--brand-hairline-2)}
.gm-row > span{color:var(--brand-ink-3)}
.gm-text{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:.9cqw;padding:1.6cqw 3cqw}
.gm-text mark.hl{color:inherit}
.gm-ideas{display:flex;flex-direction:column;gap:.6cqw;padding-left:2cqw}
.gm-ideas > span::before{content:"";display:inline-block;width:1cqw;height:1cqw;margin-right:1.4cqw;border-radius:50%;background:var(--brand-ink);vertical-align:middle}
.gm-links{display:flex;gap:3cqw}
.gm-links > span{text-decoration:underline;text-decoration-color:var(--blush-pop);text-decoration-thickness:.5cqw;text-underline-offset:.6cqw}
.gm-foot{padding:0 3cqw 3cqw}
.gm-send{display:inline-block;padding:1cqw 3.6cqw;border-radius:99px;background:var(--brand-ink);color:var(--brand-paper);font-family:var(--f-display);font-weight:600}
.bw-np,.bw-remind{position:absolute;display:flex;border-radius:9px;background:var(--brand-card);border:1px solid var(--brand-hairline);box-shadow:var(--shadow-lift);color:var(--brand-ink);text-align:left;font-family:var(--f-body)}
.bw-np{left:1%;bottom:21%;width:72%;align-items:center;gap:2.6cqw;padding:1.6cqw;rotate:1.5deg;font-size:2.6cqw}
.bw-np img{width:22cqw;height:auto;aspect-ratio:282/122;border-radius:1.2cqw;object-fit:cover}
.bw-np b{display:block;margin-bottom:.8cqw;font-family:var(--f-display);font-weight:600}
.bw-pills{display:grid;grid-template-columns:auto auto;justify-content:start;gap:1cqw}
.bw-pills > .np-pill{margin:0;white-space:nowrap}
.bw-pills > .np-pill:nth-child(-n+2){grid-area:1/1}
.np-pill.is-pop{background:var(--blush-pop);color:var(--on-blush)}
.bw-remind{right:0;top:9%;width:60%;flex-direction:column;gap:.6cqw;padding:2cqw 2.4cqw;rotate:-1.5deg;font-size:2.5cqw;line-height:1.3}
.bw-remind b{font-family:var(--f-display);font-weight:600}
.bw-stage .bw-np[data-at]{translate:-6% 30%}
.bw-stage .bw-remind[data-at]{translate:6% -30%}
.bw-stage .bw-np.on,.bw-stage .bw-remind.on{translate:0 0}
/* Watch it work, calmer (Yule 2026-10-26): no story bars (no auto-jump), no "Step 1 of 4" (the stepper says it), tighter
so stepper + screen + text fit one phone screen. A finished step shows a "Next: …" pill and pulses the next number. */
.howto{gap:.6rem}
.howto-step{gap:.4rem}
.howto-bars,.howto-count{display:none}
.howto-text{gap:.4rem}
.howto-next{position:absolute;z-index:3;right:.6rem;bottom:.6rem;display:inline-flex;align-items:center;gap:.35rem;min-height:44px;padding:0 1rem;
border:0;border-radius:999px;background:var(--ink);color:var(--card);font-family:var(--f-display);font-weight:600;font-size:var(--t-small);
cursor:pointer;opacity:0;transform:translateY(6px);pointer-events:none;transition:opacity .3s,transform .3s}
.is-done .howto-next{opacity:1;transform:none;pointer-events:auto}
@media (prefers-reduced-motion:no-preference){
}
@keyframes ht-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
/* step 1 v2: portfolio = poster style (giant word, cutout photo, after Yule’s reference), then the media kit in its
own window AFTER it (not on top). .bw-now = the “what’s happening” pill under the windows, page-size text. */
.bw-stage .bw-one.bw-pf,.bw-stage .bw-one.bw-mk{top:5%}
.bw-stage .bw-one.bw-mk{width:90%}
.pp{position:relative;display:block;aspect-ratio:16/10.4;overflow:hidden;background:var(--blush-pop);color:var(--brand-ink)}
.pp-word{position:absolute;left:0;right:0;top:4%;text-align:center;font-weight:800;font-size:16cqw;line-height:1;letter-spacing:-.05em;text-transform:uppercase;color:var(--brand-paper)}
.pp-hand{position:absolute;top:35%;font-family:var(--f-hand);font-size:5.6cqw;line-height:1;color:var(--brand-paper)}
.pp-hand.is-l{left:5%;rotate:-4deg}
.pp-hand.is-r{right:5%;rotate:4deg}
.pp-me{position:absolute;left:0;right:0;bottom:0;width:44%;margin:0 auto}
.pp-me img{height:auto;object-fit:contain}
.pp-txt{position:absolute;bottom:7%;max-width:26%;font-size:2.1cqw;line-height:1.35}
.pp-txt.is-l{left:5%}
.pp-txt.is-r{right:5%;text-align:right}
.bw-stage .pp-me[data-at]{translate:0 25%}
.bw-stage .pp-me.on{translate:0 0}
.bw-now{position:absolute;left:0;right:0;bottom:4%;display:grid;justify-items:center;pointer-events:none}
.bw-now > span{grid-area:1/1;display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:99px;background:var(--brand-ink);color:var(--brand-paper);
font-family:var(--f-display);font-weight:600;font-size:var(--t-small);white-space:nowrap}
.bw-now .ic{margin:0;color:var(--on-blush)}
.bw-now > .is-done{background:var(--blush-pop);color:var(--on-blush)}
.bw-dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--blush-pop)}
@media (prefers-reduced-motion:no-preference){.bw-dot{animation:bw-dot 1s ease-in-out infinite}}
@keyframes bw-dot{50%{opacity:.3}}
/* Watch it work, quieter (Yule 2026-10-26): the steps = one switch (white track, a dark pill slides to the open
step, so it reads as tappable); under the screen only one line of text + a small "Next: …" link (no h3, no tags). */
.howto-tabs{grid-template-columns:repeat(4,1fr);max-width:26rem;padding:4px;border-radius:999px;background:var(--card);border:1px solid var(--hairline-2)}
.howto-tabs::before{content:"";position:absolute;top:4px;bottom:4px;left:4px;right:auto;width:calc((100% - 8px) / 4);height:auto;border-radius:999px;
background:var(--ink);transform:translateX(calc(var(--i,0) * 100%));transition:transform .35s cubic-bezier(.22,1,.36,1)}
.howto-tabs button{z-index:1;flex-direction:row;justify-content:center;min-height:44px;padding:0 .2rem;border-radius:999px;color:var(--ink-2);
font:600 var(--t-xs)/1.15 var(--f-display);text-align:center;transition:color .35s}
.howto-tabs button[aria-selected="true"]{color:var(--card)}
.howto-tabs .ht-num{display:none}
@media (prefers-reduced-motion:reduce){.howto-tabs::before,.howto-tabs button{transition:none}}
.howto-text .howto-next{position:static;min-height:44px;padding:0 .4rem;background:none;color:var(--ink);font-size:var(--t-small);
text-decoration:underline;text-decoration-color:var(--blush-pop);text-decoration-thickness:2px;text-underline-offset:4px}
/* step 4: brand page (one click adds the tasks, they tick off) → invoice fills itself in → Open & Overdue Invoices,
Happy Tees flagged + Claude note. Three windows one after the other, like step 1. Less is more: flow, not detail. */
.bw-stage .bw-one.bw-gp{top:5%}
.bw-stage .bw-gp[data-at]:not([data-at="0"]),.bw-stage .bw-pf[data-at]{translate:6% 18%}
.bw-stage .bw-gp[data-at].on,.bw-stage .bw-pf[data-at].on{translate:0 0}
/* rebuilt after the real hub (Yule 2026-10-26: "doesn't look like the product"): brand page = cover, title, Deal Value ·
Delivery Deadline · Progress, the 3 step tabs, "Project To Do's" + "Auto create standard Tasks" → task rows with date +
checkbox; invoice = From / Issued to, callout, Services, Total Due; table with Open / Overdue tabs + Payment flag. */
.nb,.ni,.bw-stage .no{gap:1.5cqw}
.nb .np-cover{height:9cqw}
.nb .np-h{font-size:1.6em}
.nb-props{display:flex;gap:4cqw;margin:0 4cqw}
.nb-props > span{display:flex;flex-direction:column;gap:.3cqw;font-weight:500}
.nb-props > span > span:first-child,.ni-cols > span > span,.ni-items > span:first-child,.no-head{font-size:.82em;font-weight:400;color:var(--brand-ink-3)}
.nb-prog{display:grid;grid-template-columns:repeat(5,1fr);gap:.4cqw;width:20cqw;height:1.6cqw;margin-top:.8cqw;padding:.3cqw;border-radius:99px;background:var(--brand-paper-2)}
.nb-prog i{border-radius:99px;background:var(--blush-pop)}
.bw-stage .nb-prog i[data-at]{translate:0 0}
.nb .np-tabs{font-size:.78em}
.nb-todo{display:flex;align-items:center;justify-content:space-between;margin:.6cqw 4cqw 0}
.nb-todo b{font-weight:700;font-size:1.15em}
.nb-btn{display:inline-flex;align-items:center;gap:1cqw;padding:.6cqw 1.8cqw;border-radius:1cqw;border:1px solid var(--brand-hairline);color:var(--brand-ink-3);font-size:.85em}
.nb-btn .ic{margin:0;color:var(--blush-pop)}
.nb-tasks{display:flex;flex-direction:column;margin:0 4cqw}
.nb-tasks > span{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:2cqw;padding:.7cqw 0;border-bottom:1px solid var(--brand-hairline-2)}
.nb-tasks > span > span:nth-child(2){color:var(--brand-ink-3);font-size:.85em}
.nb-tasks > .nb-more{display:block;border:0;color:var(--brand-ink-3);font-size:.85em}
.nb-tasks i{position:relative;width:2.4cqw;height:2.4cqw;border-radius:.5cqw;border:1px solid var(--brand-hairline);background:var(--brand-card)}
.nb-tasks i.on{background:var(--blush-pop);border-color:var(--blush-pop)}
.nb-tasks i::after{content:"";position:absolute;left:33%;top:12%;width:28%;height:52%;border:solid var(--brand-ink);border-width:0 .45cqw .45cqw 0;rotate:45deg;opacity:0}
.nb-tasks i.on::after{opacity:1}
.bw-stage .nb-tasks i[data-at]{opacity:1;translate:0 0}
.bw-cur.is-a{left:auto;right:14%;bottom:auto;top:45%}
.ni{gap:2.6cqw;padding:4cqw 5cqw}
.ni .np-h{display:flex;align-items:center;gap:1.6cqw;margin:0;font-size:1.6em}
.ni .np-h .ic{margin:0;color:var(--brand-ink-3)}
.ni-cols{display:grid;grid-template-columns:1fr 1fr;gap:4cqw}
.ni-cols > span{display:flex;flex-direction:column;gap:.6cqw;padding-top:1cqw;border-top:1px solid var(--brand-hairline)}
.ni-cols b{font-weight:600;font-size:1.1em}
.ni-call{display:flex;flex-direction:column;gap:.3cqw;padding:1.6cqw 2.4cqw;border-radius:1.2cqw;background:var(--blush-soft)}
.ni-call b{font-weight:600}
.ni-items{display:flex;flex-direction:column;gap:.6cqw}
.ni-items > span:last-child{display:flex;justify-content:space-between;padding:1cqw 0;border-block:1px solid var(--brand-hairline-2)}
.ni-total{align-self:flex-end;font-weight:700;font-size:1.25em}
.bw-stage .no{padding-top:4cqw} /* scoped: .no is also the ✕ column of the compare table (it pushed that text down) */
.no .np-h{margin-top:0}
.bw-stage .no .np-tabs .on.off{opacity:1;scale:1;background:none;color:var(--brand-ink-3);font-weight:400}
.no-tab.on{background:var(--brand-paper-2);color:var(--brand-ink);font-weight:500}
.no-rows{display:flex;flex-direction:column;margin:0 4cqw}
.no-rows > span{display:grid;grid-template-columns:15cqw 1fr 10cqw 27cqw;align-items:center;gap:2cqw;padding:1.3cqw 0;border-bottom:1px solid var(--brand-hairline-2)}
.no-rows > .no-head{border-bottom-color:var(--brand-hairline)}
.no-rows b{font-weight:600}
.no-rows .np-pill{display:inline-flex;align-items:center;gap:.8cqw}
.no-rows .np-pill .ic{margin:0}
.bw-remind.is-low{top:auto;bottom:22%;right:1%}
/* the Claude chat (Yule 2026-10-26): no browser window, stands alone and bigger; same look as the AI Brand Deal
Manager chat further down (.chat: white, pink user bubble, white answer card, composer with shadow). Claude spark in
the hello. You type IN the composer, it sends: your bubble on the right, the answer card below. */
.cc{position:absolute;left:0;right:0;top:7%;width:100%;height:78%;margin:0 auto;display:flex;flex-direction:column;gap:2.4cqw;padding:3.6cqw;
border-radius:16px;background:var(--brand-paper);border:1px solid var(--brand-hairline);box-shadow:var(--shadow);rotate:.8deg;
container-type:inline-size;font-family:var(--f-body);font-size:3.5cqw;line-height:1.4;color:var(--brand-ink);text-align:left}
.cc-spark{display:block;width:1em;height:1em;color:var(--claude-orange)}
.cc-log{position:relative;flex:1;display:flex;flex-direction:column;justify-content:flex-start;gap:2.2cqw;min-height:0;overflow:hidden}
.cc-hi{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.4cqw;text-align:center}
.cc-hi .cc-spark{box-sizing:content-box;width:7cqw;height:7cqw;padding:2.6cqw;border-radius:4cqw;background:var(--blush-soft)}
.cc-hi b{font-family:var(--f-display);font-weight:600;font-size:6cqw;line-height:1.2}
.cc-me{align-self:flex-end;max-width:80%;padding:1.8cqw 3cqw;border-radius:4.5cqw 4.5cqw 1.5cqw 4.5cqw;background:var(--blush-soft)}
.cc-ai{align-self:stretch;display:flex;flex-direction:column;align-items:flex-start;gap:1.6cqw;padding:2.6cqw 3cqw;border-radius:4.5cqw 4.5cqw 4.5cqw 1.5cqw;
background:var(--brand-card);border:1px solid var(--brand-hairline-2)}
.cc-tool{display:inline-flex;align-items:center;gap:1.8cqw;color:var(--brand-ink-3);font-size:.9em}
.cc-busy .cc-spark{width:4cqw;height:4cqw}
.cc-end{display:none}
.cc-list{align-self:stretch;display:flex;flex-direction:column;gap:.8cqw}
.cc-list > span{display:flex;justify-content:space-between;gap:3cqw;font-size:.92em;color:var(--brand-ink-3)}
.cc-list b{display:inline-flex;align-items:center;font-family:var(--f-display);font-weight:600;color:var(--brand-ink)}
.cc-list .ic{color:var(--brand-ink)}
.cc-ideas{align-self:stretch;display:grid;grid-template-columns:repeat(4,1fr);gap:1.4cqw}
.cc-ideas > span{position:relative;isolation:isolate;padding:1.4cqw;border-radius:99px;background:var(--brand-paper-2);font-family:var(--f-display);font-weight:600;text-align:center;white-space:nowrap}
.cc-ideas i{position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--blush-pop)}
.cc-input{display:flex;align-items:center;gap:2cqw;min-height:12cqw;padding:1.4cqw 1.4cqw 1.4cqw 3.4cqw;border-radius:4.5cqw;background:var(--brand-card);border:1px solid var(--brand-hairline);box-shadow:var(--shadow)}
.cc-text{flex:1;display:grid;min-height:1.4em}
.cc-text > span{grid-area:1/1;white-space:nowrap}
.cc-ph{color:var(--brand-ink-3)}
.cc-tools{display:contents}
.cc-plus{display:none}
.cc-send{display:grid;place-items:center;width:9cqw;height:9cqw;border-radius:3cqw;background:var(--brand-ink);color:var(--brand-paper);font-size:.85em}
.cc-send .ic{margin:0}
.bw-stage .cc[data-at]{opacity:1;translate:0 0}
.bw-stage .cc.off{opacity:0;scale:.94}
.bw-stage .cc-text [data-at],.bw-stage .cc-text [data-out]{translate:0 0;transition:none}
.bw-remind b{display:inline-flex;align-items:center;gap:.4em}
.bw-remind .cc-spark{width:1.1em;height:1.1em}
@media (prefers-reduced-motion:no-preference){
.bw-stage .cc{transition:opacity .45s ease,scale .45s ease}
.cc-busy{animation:cc-busy 1.6s linear infinite}
}
@keyframes cc-busy{to{rotate:360deg}}
.cc-busy{display:block}
/* the "what's happening" pill (Yule 2026-10-26: the eye never landed on it under the screen): a small sticker
(soft pink + hairline, pink dot: full pink was a bit much, plum-black looked like a button) on the bottom-right corner of the window, it pops in fast and its words type themselves (data-type="22" = ms per
letter); no success states. */
.bw-stage .bw-one.bw-one{top:9%}
.bw-now{left:auto;right:-1%;top:auto;bottom:6%;z-index:4;justify-items:end;rotate:3deg}
/* Yule 2026-10-27: now the same Claude status card as the heroes (.st-card): white card, spinning spark in a pink square */
.bw-now > span{gap:.55rem;padding:.4rem .9rem .4rem .4rem;border-radius:14px;background:var(--brand-card);color:var(--brand-ink);border:1px solid var(--brand-hairline);font-family:var(--f-body);font-weight:500;font-size:var(--t-xs);line-height:1.2;box-shadow:var(--shadow-lift)}
.bw-stage .bw-now > span[data-at]{translate:0 0;scale:.7;transform-origin:100% 50%}
.bw-stage .bw-now > span.on{scale:1}
.bw-stage .bw-now > span.on.off{opacity:0;scale:.85}
@media (prefers-reduced-motion:no-preference){
.bw-stage .bw-now > span[data-at]{transition:opacity .25s ease,scale .4s cubic-bezier(.34,1.56,.64,1)}
.bw-now{animation:bw-float 3.2s ease-in-out infinite}
}
@keyframes bw-float{50%{translate:0 -4px}}
.bw-remind{top:16%}
/* receipt “what you pay” line, quieter (Yule 2026-10-26: the pink band + the pink price card right under it = too
intense): no band, the last line of the receipt under a solid ink rule, price big with a highlighter swipe */
.r-pay{margin:1.1rem 0 0;padding:1rem 0 0;background:none;border:0;border-top:2px solid var(--brand-ink);color:var(--brand-ink)}
.r-pay small{color:var(--ink-2)}
/* one price display everywhere (Yule 2026-10-26): crossed-out launch price small + grey before the real price
(tickets, receipt line, price card; .price-big s above) */
.ticket-price b s,.r-pay b s{font-size:.5em;font-weight:600;color:var(--ink-3);vertical-align:.3em;margin-right:.25rem;letter-spacing:-.02em}
.ticket.is-dark .ticket-price b s{color:var(--statement-ink-2)}
/* the drawing measures its own width: loose pieces right in the stage (.bw-remind, .bw-np…) use cqw too, which without
this fell back to the WINDOW width (huge in a wide browser, covering the text under it) */
.bw-stage.howto-screen{container-type:inline-size}
/* …and the loose pieces keep exactly their phone size: their own cqw values were tuned against the 390px phone
window; the drawing is 308px wide there, so ×1.266 (= 390/308) */
.bw-stage{--k:1.266}
.cc{gap:calc(2.4cqw * var(--k));padding:calc(3.6cqw * var(--k));font-size:calc(3.5cqw * var(--k))}
.bw-np{gap:calc(2.6cqw * var(--k));padding:calc(1.6cqw * var(--k));font-size:calc(2.6cqw * var(--k))}
.bw-np img{width:calc(22cqw * var(--k));border-radius:calc(1.2cqw * var(--k))}
.bw-np b{margin-bottom:calc(.8cqw * var(--k))}
.bw-remind{gap:calc(.6cqw * var(--k));padding:calc(2cqw * var(--k)) calc(2.4cqw * var(--k));font-size:calc(2.5cqw * var(--k))}
/* Creator Hub “See exactly what’s inside” (Yule 2026-10-26: cards with text were too text heavy): a swipe row, one white
card per part of the Hub = real screenshot (tap = bigger) + name + short pills. No toggle, no free-updates list. */
.in-row li.in-card{flex-basis:80%}
.in-card{display:flex;flex-direction:column;padding:8px 8px 1.1rem;background:var(--card);border:1px solid var(--hairline-2);border-radius:var(--r-lg)}
.in-shot{display:block;width:100%;aspect-ratio:16/10;padding:0;border:0;border-radius:18px;overflow:hidden;background:var(--blush-soft);cursor:zoom-in}
.in-shot img{width:100%;height:100%;object-fit:cover;object-position:top}
.in-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;cursor:default;font:600 var(--t-small)/1.4 var(--f-display)}
.in-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--card);font-size:1.3rem}
.in-ic .ic{margin:0}
.in-card h3{margin:1rem .6rem 0;font-size:var(--t-title)}
.in-card .tags{margin:.6rem .6rem 0}
.in-card .tags li{flex:none}
.in-note{margin-top:.4rem;text-align:center;font-size:var(--t-small);color:var(--ink-2)}
/* whole screenshots, never cropped (Yule): own height; the cards share one height */
.in-row{align-items:stretch}
.in-shot{aspect-ratio:auto}
.in-shot img{height:auto}
.in-panel{aspect-ratio:1500/850}
/* the guides + scripts under the screenshots: one soft pink card, icon + title + pills */
.in-extra{margin-top:var(--card-gap);padding:1.2rem 1.2rem 1.3rem;border-radius:var(--r-lg);background:var(--blush-soft)}
.in-extra h3{display:flex;align-items:center;gap:.7rem;font-size:var(--t-title)}
.in-extra .in-ic{width:40px;height:40px;font-size:1rem}
.in-extra .tags{margin-top:.8rem}
.in-extra .tags li{background:var(--card)}
/* hero animation (Yule 2026-10-27): the hub home + Income Dashboard are Yule's REAL screenshots, the animation plays
on top (masks, patches, pop-ups, one cursor). One hub window, its pages crossfade; the "camera" (.ha-cam, --o origin,
--z zoom) zooms in where things happen. Pop-ups grow out of what was clicked. No pill, no piling. */
.hero-anim{position:relative;width:100%;aspect-ratio:10/7;margin:.6rem 0 1.2rem}
.hero-anim.bw-stage .bw-one.bw-one{top:3%}
.ha-body{aspect-ratio:16/9.8;overflow:hidden}
.ha-url{display:grid}
.ha-url > span{grid-area:1/1}
.hero-anim .ha-url > [data-at]{translate:0 0}
.ha-page{position:absolute;inset:0;padding-bottom:0}
.hero-anim .ha-page[data-at]{translate:0 0}
.ha-cam{position:relative;display:block;container-type:inline-size;transform-origin:var(--o,50% 50%)}
.ha-cam > img{display:block;width:100%;height:auto}
.hero-anim .ha-cam[data-at]{opacity:1;translate:0 0}
.hero-anim .ha-cam.on{scale:var(--z,1)}
.ha-mask,.ha-hot,.ha-patch,.ha-paid{position:absolute}
.ha-mask{background:var(--brand-card)}
.hero-anim .ha-mask.off{opacity:0;scale:1}
.ha-patch{display:flex;align-items:center;background:var(--brand-card);color:var(--nt-ink);font-family:var(--f-notion);font-size:.8cqw;line-height:1;white-space:nowrap}
.ha-patch.is-green{justify-content:flex-start;background:var(--nt-col-green);color:var(--nt-dot-green)}
.ha-paid{display:block;container-type:inline-size;border-radius:.9cqw;box-shadow:var(--shadow-lift)}
.ha-paid > img{display:block;width:100%;height:auto;border-radius:inherit}
.ha-paid .ha-patch{gap:3.2cqw;font-size:4.3cqw;font-weight:500}
.ha-paid .ha-patch u{text-decoration-color:var(--brand-hairline);text-underline-offset:.3em}
.hero-anim .ha-patch[data-at]{translate:0 0}
.hero-anim .ha-paid[data-at]{translate:0 -30%}
.hero-anim .ha-paid.on{translate:0 0}
/* brand page = 2 screenshots stacked (header, task box); the camera glides down + zooms to the tasks (.ha-scroll),
a white wipe hides the task rows until "Auto create standard Tasks" is clicked, then Notion-blue ticks pop in */
.hero-anim .ha-scroll.on{translate:0 -55.65%;scale:1.2}
.hero-anim .ha-wipe{transform-origin:50% 100%}
.hero-anim .ha-wipe.off{opacity:1;scale:1 0}
.ha-tick{position:absolute;left:83.75%;width:1.62%;aspect-ratio:1;border-radius:.25cqw;background:var(--nt-blue)}
.ha-tick::after{content:"";position:absolute;left:34%;top:14%;width:28%;height:50%;border:solid var(--brand-paper);border-width:0 .28cqw .28cqw 0;rotate:45deg}
.hero-anim .ha-tick[data-at]{translate:0 0;scale:.4}
.hero-anim .ha-tick.on{scale:1}
/* the Claude button (over the Notion AI face) + side panel */
.ha-spark{display:grid;place-items:center;width:4.4%;aspect-ratio:1;margin:-2.6% 0 0 -2.2%;border-radius:50%;background:var(--brand-card);border:1px solid var(--brand-hairline);box-shadow:var(--shadow-lift)}
.hero-anim .ha-spark{position:absolute}
.ha-spark .cc-spark{width:55%;height:55%}
.ha-panel{position:absolute;top:0;right:0;bottom:0;z-index:2;width:58%;display:flex;flex-direction:column;gap:2cqw;padding:2.6cqw;background:var(--brand-paper);border-left:1px solid var(--brand-hairline);box-shadow:var(--shadow);font-size:1.05em}
.hero-anim .ha-panel[data-at]{opacity:1;translate:105% 0}
.hero-anim .ha-panel.on{translate:0 0}
.hero-anim .ha-panel.on.off{opacity:1;scale:1;translate:105% 0}
.ha-panel-h{display:flex;align-items:center;gap:1.4cqw;font-family:var(--f-display);font-weight:600}
.ha-panel .cc-log{gap:1.6cqw}
.ha-panel .cc-hi b{font-size:1.5em}
.ha-panel .cc-me{padding:1.2cqw 2.4cqw}
.ha-panel .cc-ai{gap:1.2cqw;padding:2cqw 2.4cqw}
.ha-panel .cc-busy .cc-spark{width:3cqw;height:3cqw}
.ha-panel .cc-input{min-height:8cqw;padding:1cqw 1cqw 1cqw 2.4cqw;border-radius:2.6cqw;box-shadow:none}
.ha-panel .cc-send{width:6cqw;height:6cqw;border-radius:2cqw}
.ha-btn{padding:.8cqw 2.4cqw;border-radius:99px;background:var(--brand-ink);color:var(--brand-paper);font-family:var(--f-display);font-weight:600}
/* pop-ups: grow out of what was clicked, shrink back into it */
.ha-pop{position:absolute;left:8%;right:8%;top:6%;z-index:2;display:flex;flex-direction:column;border-radius:1.6cqw;overflow:hidden;background:var(--brand-card);border:1px solid var(--brand-hairline);box-shadow:var(--shadow)}
.ha-gm{top:3%}
.hero-anim .ha-pop[data-at]{translate:0 0;scale:.12}
.hero-anim .ha-pop.on{scale:1}
.hero-anim .ha-pop.on.off{opacity:0;scale:.12}
.ha-pop .gm,.ha-pop .ni{aspect-ratio:auto}
.ha-pop .gm-text{flex:none;padding-bottom:2.4cqw}
.ha-gm .gm{font-size:.8em}
.ha-gm .gm-text{gap:.7cqw}
.ni-foot{display:flex;align-items:center;justify-content:space-between}
.gm-link{text-decoration:underline;text-decoration-color:var(--blush-pop);text-decoration-thickness:.4cqw;text-underline-offset:.5cqw}
/* last frame: a small "You got paid!" note drops in at the top once the payment lands in Paid */
.ha-paidnote{position:absolute;left:0;right:0;top:4%;z-index:3;display:flex;align-items:center;gap:2cqw;padding:1.8cqw 4cqw 1.8cqw 2cqw;margin:0 auto;width:fit-content;border-radius:99px;background:var(--brand-card);border:1px solid var(--brand-hairline);box-shadow:var(--shadow-lift);line-height:1.15}
.ha-paidnote > span{display:flex;flex-direction:column;gap:.5cqw;min-width:0}
.ha-paidnote b{font-family:var(--f-display);font-weight:600;font-size:2.6cqw;color:var(--brand-ink)}
.ha-paidnote > span > span{font-size:2cqw;color:var(--brand-ink-3);white-space:nowrap}
.ha-paidnote-tick{position:relative;flex:none;width:6cqw;aspect-ratio:1;border-radius:50%;background:var(--blush-pop)}
.ha-paidnote-tick::after{content:"";position:absolute;left:37%;top:22%;width:22%;height:40%;border:solid var(--brand-ink);border-width:0 .5cqw .5cqw 0;rotate:45deg}
.hero-anim .ha-paidnote[data-at]{translate:0 -160%}
.hero-anim .ha-paidnote.on{translate:0 0}
/* the cursor + its click */
.ha-cur{position:absolute;left:0;top:0;z-index:5;width:3.4%;color:var(--brand-ink);filter:drop-shadow(0 0 1px var(--brand-card));pointer-events:none}
.ha-cur .fa{display:block;width:100%;height:auto}
.ha-cur.is-press{scale:.85}
.hero-anim .is-press:not(.ha-cur):not(.ha-hot){scale:.94}
@media (prefers-reduced-motion:no-preference){
.ha-cur{transition:translate .75s cubic-bezier(.45,0,.2,1),scale .15s ease}
.hero-anim .ha-cam[data-at]{transition:scale 1.4s cubic-bezier(.45,0,.2,1),translate 1.4s cubic-bezier(.45,0,.2,1)}
.hero-anim .ha-wipe{transition:scale 1.1s cubic-bezier(.45,0,.2,1)}
.hero-anim .ha-tick[data-at]{transition:opacity .2s ease,scale .3s cubic-bezier(.34,1.56,.64,1)}
.hero-anim .ha-pop[data-at]{transition:opacity .35s ease,scale .55s cubic-bezier(.22,1,.36,1)}
.hero-anim .ha-panel[data-at]{transition:translate .6s cubic-bezier(.22,1,.36,1)}
.hero-anim .ha-paidnote[data-at]{transition:opacity .3s ease,translate .6s cubic-bezier(.34,1.4,.64,1)}
.hero-anim .ha-mask{transition:opacity .5s ease}
.hero-anim .is-press,.ha-btn,.gm-send,.nb-btn,.ha-spark{transition:scale .15s ease,opacity .45s ease,translate .7s cubic-bezier(.22,1,.36,1)}
}
@media (prefers-reduced-motion:reduce){.ha-cur{display:none}}
/* ==== BONUS EXAMPLES (Creator Hub): one switch Portfolio | Media kit; each tab shows its title screen as a still
building itself piece by piece, no scrolling (Yule: scrolling through the whole page felt off). ==== */
.bn{display:flex;flex-direction:column;align-items:center;gap:1.4rem}
.bn-tabs.howto-tabs{grid-template-columns:repeat(2,1fr);max-width:17rem}
.bn-tabs.howto-tabs::before{width:calc((100% - 8px) / 2)}
.bn-panel{width:100%}
.bn-win,.bn-kit{position:relative;display:block;width:100%;rotate:-1deg;background:var(--brand-card);border:1px solid var(--brand-hairline);box-shadow:var(--shadow-lift);overflow:hidden}
.bn-win{border-radius:var(--r-md)}
.bn-kit{border-radius:var(--r-sm);rotate:1deg}
.bn-bar{display:flex;align-items:center;gap:5px;height:26px;padding:0 10px;background:var(--ground-2);border-bottom:1px solid var(--brand-hairline)}
.bn-bar i{width:7px;height:7px;border-radius:50%;background:var(--brand-hairline)}
.bn-bar span{margin:0 auto;padding:2px 14px;border-radius:99px;background:var(--brand-card);font:500 var(--t-mono)/1.4 var(--f-mono);color:var(--ink-2);translate:-14px 0}
.bn-kit{aspect-ratio:2000/1413}
.bn-view{position:relative;display:block;aspect-ratio:1440/900;overflow:hidden}
/* the title screen builds itself: a piece (.bn-pc) is a window onto ONE screenshot (--x/--y/--w/--h = its spot in % of
the screen); the img inside is the whole screen, shifted so only that spot shows. [data-anim] adds .on = it drops in. */
.bn-page{position:absolute;inset:0;display:block;opacity:0}
.bn-page.on{opacity:1}
.bn-page.on.off{opacity:0}
.bn-pc{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);width:calc(var(--w) * 1%);height:calc(var(--h) * 1%);overflow:hidden;
opacity:0;translate:0 14%;scale:.94}
.bn-pc.on{opacity:1;translate:0 0;scale:1}
.bn-pc img{position:absolute;max-width:none;width:calc(10000% / var(--w));height:auto;left:calc(-100% * var(--x) / var(--w));top:calc(-100% * var(--y) / var(--h))}
@media (prefers-reduced-motion:no-preference){
.bn-pc{transition:opacity .35s ease,translate .55s cubic-bezier(.34,1.4,.64,1),scale .55s cubic-bezier(.34,1.4,.64,1)}
.bn-page{transition:opacity .5s ease}
}
/* ===== "Free update" pill at the end of a tick-list line ===== */
.ticks .free-pill{margin-left:.3rem;padding:.12rem .5rem;vertical-align:.1em}
/* ===== WAITLIST PAGE (shop/ugc-creator-hub/waitlist/): plum-black, centred, one idea, nothing else ===== */
.wl-body{background:var(--brand-ink-dark)}
.wl{--ink:var(--brand-paper);--ink-2:var(--statement-ink-2);--ink-3:var(--statement-ink-3);color:var(--ink);
min-height:100svh;display:flex;flex-direction:column;padding-top:calc(4.2rem + env(safe-area-inset-top))}
.wl-hero{flex:1}
.wl-hero .feat-body{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.9rem;padding:0}
.wl .sec-tag{color:var(--statement-ink-2);align-self:center}
.wl h1{text-wrap:balance;max-width:14ch}
.wl mark.hl{background:none;color:var(--blush-pop)} /* on dark the word itself turns pink */
.wl .hero-anim{width:88%;margin:.4rem 0 .2rem}
.wl-sub{max-width:31ch;color:var(--ink-2);text-wrap:pretty}
.wl-price{display:flex;flex-direction:column;align-items:center;gap:.15rem;margin-top:.3rem}
.wl-price-label{font-family:var(--f-mono);font-size:var(--t-mono);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--statement-ink-3)}
.wl-price-num{display:flex;align-items:baseline;gap:.55rem}
.wl-price-num s{font-family:var(--f-display);font-weight:600;font-size:var(--t-feat);color:var(--statement-ink-3)}
.wl-price-num b{font-family:var(--f-display);font-weight:800;font-size:var(--t-price);letter-spacing:-.03em;line-height:1;color:var(--blush-pop)}
.wl .kit-embed{align-self:stretch;margin-top:.2rem;text-align:left}
.wl .kit-embed .formkit-fields{gap:.7rem}
.wl .kit-embed .field{background:transparent;color:var(--brand-paper);border:1.5px solid var(--statement-ink-3);text-align:center}
.wl .kit-embed .field::placeholder{color:var(--statement-ink-3)}
.wl .kit-embed .field:focus{border-color:var(--blush-pop);outline:none}
.wl .kit-embed .formkit-submit,.wl .done .btn{align-self:stretch;justify-content:center;background:var(--brand-paper);color:var(--brand-ink-dark);border-color:var(--brand-paper)}
.wl .kit-embed .formkit-checkboxes{justify-content:center;align-items:center;color:var(--statement-ink-2)}
.wl .kit-embed .formkit-checkbox:not(:checked){border-color:var(--statement-ink-3);background:transparent} /* :not(:checked), or the pink tick never shows */
.wl .kit-embed .optin{text-align:center}
.wl .kit-embed .optin legend{width:100%;color:var(--brand-paper)}
.wl .kit-embed .formkit-alert-error{color:var(--blush-pop)}
.wl .kit-embed .formkit-powered-by-convertkit-container{justify-content:center;margin-top:.4rem}
.wl .kit-embed .formkit-powered-by-convertkit{color:var(--statement-ink-3)}
.wl-note{display:flex;align-items:flex-start;gap:.2rem;margin-top:.1rem;margin-left:3.5rem;rotate:-3deg}
.wl-note .curly{color:var(--blush-pop);margin:0;width:34px;height:28px;flex:none;scale:-1 1} /* points up-right, at the $67 */
.wl-note .hand{font-size:calc(var(--t-hand) * .72);line-height:1.05;text-align:left;color:var(--blush-pop);padding-top:.9rem;max-width:11.5rem;text-wrap:balance}
.wl .done{min-height:60svh;justify-content:center}
.wl .done-icon{background:var(--blush-pop);color:var(--on-blush)}
.wl .done .row-sub{color:var(--statement-ink-2)}
.wl .done .btn{align-self:center;margin-top:1rem}
.wl .foot{color:var(--statement-ink-3)}
.wl .foot a{color:var(--statement-ink-3)}
.wl .back-btn{background:transparent;border-color:var(--statement-ink-3);color:var(--brand-paper)}
.wl .kit-embed .formkit-checkboxes label{max-width:24ch}
.wl .wl-hero.signup,.wl .wl-hero.signup.is-done{background:none;border:0;padding:0;box-shadow:none}
/* ===== LINK PAGE: feature card with the Creator Hub hero animation as its cover ===== */
.feat-anim .feat-cover{background:var(--brand-card)}
.feat-anim .hero-anim{width:100%;margin:0} /* the hub screen fills the cover edge to edge: no box, no tilt, no browser bar (Yule) */
.feat-anim .hero-anim.bw-stage .bw-one.bw-one{top:0;width:100%;rotate:0deg;border-radius:0;box-shadow:none;border:0}
.feat-anim .hero-anim .bw-bar{display:none}
.feat-anim .tag.on-img{z-index:7} /* the cursor + status cards pass UNDER the Waitlist tag (Yule) */
.ha-now-br{right:3%;bottom:15%;justify-items:end;rotate:2deg;scale:.85;transform-origin:100% 100%} /* bottom 15%: the cover crops the 10:7 drawing to 16:10 */
.ha-now-br .st-card{justify-self:end}
.bw-stage .ha-now-br .st-card[data-at]{transform-origin:100% 50%}
/* ===== QUOTE CARD (Creator Hub, under “Meet The Boss Girl Creator Hub”): one big line that takes away the tech fear ===== */
.quote-card{position:relative;align-self:stretch;margin:0;background:var(--blush-soft);color:var(--brand-ink);border-radius:var(--r-lg);
padding:2.6rem 1.4rem 2rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.1rem}
.qc-mark{position:absolute;top:-.95rem;left:50%;translate:-50% 0;width:2.6rem;height:2.6rem;border-radius:50%;
background:var(--blush-pop);color:var(--brand-ink-dark);font-family:var(--f-display);font-weight:800;font-size:var(--t-feat);
line-height:2.9rem}
.quote-card blockquote p{font-family:var(--f-display);font-weight:600;font-size:var(--t-feat);line-height:1.15;text-wrap:balance}
.quote-card .hand{background:var(--blush-pop);color:var(--brand-ink-dark);padding:.1rem .55rem;border-radius:8px;
font-size:calc(var(--t-hand) * .8);display:inline-block;rotate:-3deg}
/* ===== “See exactly what’s inside”: one plain line per card instead of pills (Yule: the bubbles were too busy) ===== */
.in-desc{margin:.45rem .6rem 0;font-size:var(--t-small);line-height:1.5;color:var(--ink-2)}
.in-extra .in-desc{margin:.8rem 0 0}
/* ===== Receipt last line: the Hub name in ONE plum-black pill on its own row, then the small line + price (Yule: the name broke over 2 lines) ===== */
.r-pay{display:grid;grid-template-columns:1fr auto;grid-template-areas:"name name" "sub price";align-items:center;column-gap:1rem;row-gap:.7rem}
.r-pay .r-name{grid-area:name;justify-self:start;white-space:nowrap;background:var(--brand-ink);color:var(--brand-paper);
border-radius:99px;padding:.4rem .85rem;font-family:var(--f-display);font-weight:600;font-size:var(--t-xs);letter-spacing:0;text-transform:none}
.r-pay small{grid-area:sub;margin:0;text-wrap:balance}
.r-pay b{grid-area:price}
/* ===== BACK TO TOP (long pages only, added by main.js): soft pink circle + hairline bottom-right, plum-black up arrow (Yule: plum-black too loud, white too plain);
fades out while scrolling, back once scrolling stops,
same size as the back button; slides in after scrolling down a bit, gone at the top ===== */
.to-top{position:fixed;z-index:20;bottom:calc(1rem + env(safe-area-inset-bottom));right:max(var(--gutter),calc((100vw - var(--col)) / 2 + var(--gutter)));
width:44px;height:44px;border-radius:50%;display:grid;place-items:center;padding:0;cursor:pointer;
background:var(--blush-soft);color:var(--brand-ink);border:1px solid var(--brand-hairline);
opacity:0;transform:translateY(12px) scale(.9);pointer-events:none;transition:opacity .3s cubic-bezier(.2,.7,.3,1),transform .3s cubic-bezier(.2,.7,.3,1)}
.to-top.is-on{opacity:1;transform:none;pointer-events:auto}
.to-top svg{width:20px;height:20px}
@media (prefers-reduced-motion:reduce){.to-top{transition:none}}
/* DARK TICKET WITH PINK (Creator Hub hero, Yule 2026-10-27): the price and the "price goes up" pill in brand pink.
Add class="ticket is-dark has-pink". */
.ticket.is-dark.has-pink .ticket-price b{color:var(--blush-pop)}
.ticket.is-dark.has-pink .ticket-perk{background:var(--blush-pop);color:var(--brand-ink-dark)}
.ticket-note:has(+ .ticket.has-pink) :is(.hand,.curly){color:var(--blush-pop)}
/* "Also inside" hand note + arrow above the right corner of the templates & resources card (Yule 2026-10-27) */
.also-note{display:flex;justify-content:flex-end;align-items:flex-start;gap:.1rem;margin:var(--card-gap) 1.4rem -2rem 0;rotate:-4deg;position:relative;z-index:1}
.also-note :is(.hand,.curly){color:var(--blush-pop)}
.also-note .hand{font-size:calc(var(--t-hand) * .82)}
.also-note .curly{margin-top:.6rem;rotate:14deg;translate:0 1.1rem} /* tip overlaps the card's top edge a little */
.also-note + .in-extra{margin-top:0}
/* ==== MONEY HUB HERO ANIMATION (Yule 2026-10-27): Claude on a phone reads a statement screenshot, then the phone
shrinks into the corner and the REAL dashboard (2 screenshots stacked, dash.jpg) fills itself in. Positions on the
dashboard = % of the image; the camera follows the .mh-k markers. Same [data-anim] player as the Creator Hub hero. ==== */
.mh-anim{position:relative;width:100%;aspect-ratio:10/9.6;margin:.6rem 0 1.2rem;container-type:inline-size}
/* the phone (plum-black frame, white screen, island); later shrinks to the bottom-left corner */
.mh-phone{position:absolute;left:25.5cqw;bottom:0;z-index:2;width:49cqw;aspect-ratio:9/17;padding:2.2cqw;border-radius:8cqw;background:var(--brand-ink);
box-shadow:var(--shadow-lift);rotate:-2deg;transform-origin:0 100%;container-type:inline-size}
.mh-anim:has(.mh-k0.on) .mh-phone{translate:-22cqw -4cqw;scale:.3;rotate:-4deg;opacity:0}
.mh-screen{position:relative;display:flex;flex-direction:column;gap:3cqw;height:100%;padding:15cqw 4.5cqw 4.5cqw;border-radius:13cqw;overflow:hidden;
background:var(--brand-paper);font-family:var(--f-body);font-size:6.6cqw;line-height:1.35;color:var(--brand-ink);text-align:left}
.mh-screen::before{content:"";position:absolute;left:50%;top:3.6cqw;width:30cqw;height:8.4cqw;margin-left:-15cqw;border-radius:99px;background:var(--brand-ink)}
.mh-screen .cc-log{gap:3cqw}
.mh-screen .cc-hi{gap:3.4cqw}
.mh-screen .cc-hi .cc-spark{width:11cqw;height:11cqw;padding:4cqw;border-radius:6cqw}
.mh-screen .cc-hi b{font-size:10cqw}
.mh-me{align-self:flex-end;display:flex;flex-direction:column;align-items:flex-end;gap:1.8cqw;max-width:88%}
.mh-screen .cc-me{max-width:none;padding:2.4cqw 4cqw;border-radius:6cqw 6cqw 2cqw 6cqw}
.mh-screen .cc-ai{gap:2.2cqw;padding:3.6cqw 4cqw;border-radius:6cqw 6cqw 6cqw 2cqw}
.mh-screen .cc-busy .cc-spark{width:5.6cqw;height:5.6cqw}
.mh-screen .cc-tool{gap:2.2cqw}
.mh-screen .cc-list{gap:1cqw}
.mh-screen .cc-list > span{font-size:1em}
.mh-done{display:inline-flex;align-items:center;font-weight:500;font-size:.92em}
.mh-done .ic{color:var(--nt-bar)}
/* the statement screenshot: a little bank-app list; small in the composer, bigger in your sent message */
/* the screenshot you upload: a phone screenshot of a bank app's spending feed (portrait, rounded corners); small in
the composer, bigger above your sent message (like real Claude shows a photo) */
.mh-shot{display:flex;flex-direction:column;gap:.55em;width:16em;aspect-ratio:9/15;padding:.7em .9em;border-radius:1.2em;overflow:hidden;background:var(--brand-card);
border:1px solid var(--brand-hairline);font-size:.5em;line-height:1.2;white-space:nowrap;color:var(--brand-ink)}
.mh-sb{display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:.8em}
.mh-sb i{width:2.2em;height:.9em;border-radius:.3em;border:1px solid var(--brand-ink-3)}
.mh-sh{margin-top:.6em;color:var(--brand-ink-3);font-size:.85em}
.mh-big{margin-top:-.3em;font-family:var(--f-display);font-weight:800;font-size:2.1em;letter-spacing:-.03em;line-height:1}
.mh-day{margin-top:.5em;font-family:var(--f-mono);font-size:.7em;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-ink-3)}
.mh-tx{display:flex;align-items:center;gap:.6em}
.mh-tx > .ic{box-sizing:content-box;flex:none;width:.9em;height:.9em;margin:0;padding:.55em;border-radius:50%;background:var(--blush-soft);-webkit-mask:none;mask:none;position:relative}
.mh-tx > .ic::before{content:"";position:absolute;inset:.55em;background:var(--brand-ink);-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.mh-tx > span:first-of-type{flex:1;display:flex;flex-direction:column;gap:.15em;font-weight:500}
.mh-tx small{font-size:.8em;font-weight:400;color:var(--brand-ink-3)}
.mh-tx > span:last-child{flex:none;font-weight:600}
.mh-me .mh-shot{font-size:.44em;box-shadow:var(--shadow-lift)}
.mh-compose{position:relative}
.mh-attach{position:absolute;left:3cqw;bottom:calc(100% + 2cqw)}
.mh-attach .mh-shot{font-size:.21em;box-shadow:var(--shadow-lift)}
.mh-screen .cc-input{min-height:15cqw;gap:2.4cqw;padding:2cqw;border-radius:7.5cqw;box-shadow:none}
.mh-screen .cc-send{flex:none;width:11cqw;height:11cqw;border-radius:99px}
.mh-screen .cc-text{min-width:0;overflow:hidden;font-size:.94em}
.mh-plus{position:relative;flex:none;width:11cqw;height:11cqw;border-radius:99px;border:1px solid var(--brand-hairline)}
.mh-plus::before,.mh-plus::after{content:"";position:absolute;left:50%;top:50%;width:4.6cqw;height:.7cqw;margin:-.35cqw 0 0 -2.3cqw;border-radius:99px;background:var(--brand-ink)}
.mh-plus::after{rotate:90deg}
/* the touch dot (data-cur): only shows while it taps */
.mh-touch{position:absolute;left:0;top:0;z-index:5;width:7cqw;aspect-ratio:1;margin:-3.5cqw 0 0 -3.5cqw;border-radius:50%;background:var(--brand-ink);opacity:0;pointer-events:none}
.mh-touch.is-press{opacity:.22;scale:1.15}
.mh-anim .is-press:not(.mh-touch){scale:.9}
/* Claude status cards (Money Hub + Creator Hub heroes; Watch it work uses the same look on .bw-now): one at a time
(.st-now stacks them), spinning spark in a pink square, the words type themselves. Position per hero. */
.st-now{position:absolute;z-index:3;display:grid;pointer-events:none}
.mh-now{left:3cqw;bottom:17cqw;rotate:-2deg}
.ha-now{left:-2%;top:-4.5%;z-index:6;rotate:-2deg}
.st-card{grid-area:1/1;justify-self:start;display:inline-flex;align-items:center;gap:.55rem;padding:.4rem .9rem .4rem .4rem;border-radius:14px;background:var(--brand-card);
border:1px solid var(--brand-hairline);box-shadow:var(--shadow-lift);font-family:var(--f-body);font-weight:500;font-size:var(--t-xs);line-height:1.2;color:var(--brand-ink);white-space:nowrap}
.st-ic{display:grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:9px;background:var(--blush-soft)}
.st-ic .cc-spark{width:1rem;height:1rem}
.bw-stage .st-card[data-at]{translate:0 0;scale:.7;transform-origin:0 50%}
.bw-stage .st-card.on{scale:1}
.bw-stage .st-card.on.off{opacity:0;scale:.85}
.st-card > [data-type]{min-width:1ch}
.mh-ok{top:auto;bottom:11cqw;gap:2.4cqw;padding:2.2cqw 4.4cqw 2.2cqw 2.2cqw}
.mh-ok b{font-size:var(--t-xs);white-space:nowrap}
.mh-ok .ha-paidnote-tick{width:7cqw}
.bw-stage .mh-ok[data-at]{translate:0 30%;scale:.8}
.bw-stage .mh-ok.on{translate:0 0;scale:1}
/* the Notion window: comes in behind the phone; the camera scrolls + zooms (translate in cqw of the window) */
.mh-win{left:0;right:0;top:2%;rotate:.8deg}
.bw-stage .mh-win[data-at]{translate:0 6%}
.bw-stage .mh-win.on{translate:0 0}
.mh-body{aspect-ratio:16/10;overflow:hidden}
/* the page is laid out 2.4× big and scaled DOWN for the wide views: Safari keeps a scaled-down layer sharp, while a
scaled-up one went blurry while the bars animated (Yule) */
.mh-cam{position:absolute;left:0;top:0;width:240%;transform-origin:0 0;container-type:inline-size;scale:.41667}
.mh-cam > img{display:block;width:100%;height:auto}
.mh-win:has(.mh-k1.on) .mh-cam{translate:-38.49cqw -63.04cqw;scale:.79167}
.mh-win:has(.mh-k2.on) .mh-cam{translate:-123.76cqw -178.15cqw;scale:1}
.mh-win:has(.mh-k3.on) .mh-cam{translate:0 -27cqw;scale:.41667}
.mh-k{display:none}
/* the donut: two white half-rings cover the real chart and turn away (right half, then left) = it draws itself */
.mh-ring{position:absolute;left:37.575%;top:42.186%;width:18%;aspect-ratio:1}
.mh-half{position:absolute;top:0;bottom:0;width:50%;overflow:hidden}
.mh-half.is-r{left:50%}
.mh-half > i{position:absolute;top:0;left:0;width:200%;aspect-ratio:1;box-sizing:border-box;border-radius:50%;border:2cqw solid var(--brand-card);border-bottom-color:transparent;border-left-color:transparent;rotate:45deg}
.mh-half.is-r > i{left:-100%}
.mh-half.is-l > i{rotate:225deg}
.bw-stage .mh-half > i[data-at]{opacity:1;translate:0 0}
.mh-seam{position:absolute;left:46.375%;width:.4%;height:1.77%;background:var(--brand-card)} /* hides the hairline where the two covers meet */
.bw-stage .mh-half.is-r > i.on{rotate:225deg}
.bw-stage .mh-half.is-l > i.on{rotate:405deg}
/* number patches in Notion's font: the count-up in the middle, "€0.00 0%" on the pots until Claude adds the expense */
.mh-patch{position:absolute;display:flex;align-items:center;gap:.75cqw;height:1.56%;padding-left:.3cqw;background:var(--brand-card);color:var(--nt-ink);font-family:var(--f-notion);font-size:.87cqw;line-height:1;white-space:nowrap}
.mh-num{left:40.9%;top:49.43%;width:11.3%;height:2.91%;display:grid;padding:0;font-size:3.1cqw;font-weight:700;letter-spacing:-.02em}
.mh-num > span{grid-area:1/1;justify-self:center}
.bw-stage .mh-num [data-at]{translate:0 0;transition:none}
.mh-bar{position:absolute;top:89.41%;width:3.5%;height:.42%;border-radius:99px;background:var(--nt-track)}
.mh-bar > i{display:block;width:var(--p);height:100%;border-radius:inherit;background:var(--nt-bar);transform-origin:0 50%;scale:0 1}
.bw-stage .mh-bar > i[data-at]{opacity:1;translate:0 0}
.bw-stage .mh-bar > i.on{scale:1}
@media (prefers-reduced-motion:no-preference){
.mh-phone{transition:translate .9s cubic-bezier(.45,0,.2,1),scale .9s cubic-bezier(.45,0,.2,1),rotate .9s ease,opacity .5s ease .4s}
.bw-stage .st-card[data-at]{transition:opacity .25s ease,scale .4s cubic-bezier(.34,1.56,.64,1)}
.bw-stage .mh-ok[data-at]{transition:opacity .3s ease,translate .6s cubic-bezier(.34,1.4,.64,1),scale .6s cubic-bezier(.34,1.4,.64,1)}
.st-now{animation:bw-float 3.2s ease-in-out infinite}
.mh-touch{transition:translate .6s cubic-bezier(.45,0,.2,1),opacity .15s ease,scale .15s ease}
.mh-cam{transition:translate 1.4s cubic-bezier(.45,0,.2,1),scale 1.4s cubic-bezier(.45,0,.2,1)}
.bw-stage .mh-half > i[data-at]{transition:rotate .7s cubic-bezier(.5,0,1,1)}
.bw-stage .mh-half.is-l > i[data-at]{transition:rotate .7s cubic-bezier(0,0,.5,1) .7s}
.bw-stage .mh-bar > i[data-at]{transition:scale 1s cubic-bezier(.22,1,.36,1)}
.mh-anim .cc-send,.mh-plus{transition:scale .15s ease}
}
@media (prefers-reduced-motion:reduce){.mh-touch{display:none}}
/* ===== LEGAL PAGES (legal/, privacy/): centred title like the freebie pages, then one white card per topic
(white + hairline, 26px corners), left-aligned reading text ===== */
.legal-list{display:flex;flex-direction:column;gap:var(--card-gap)}
.legal-card{background:var(--card);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:1.25rem 1rem;display:flex;flex-direction:column;gap:.6rem}
.legal-card h2{font-family:var(--f-display);font-size:var(--t-title);font-weight:600;line-height:1.15}
.legal-card p,.legal-card li{font-size:var(--t-body);line-height:1.5;color:var(--ink-2)}
.legal-card ul{margin:0;padding-left:1.2rem;display:flex;flex-direction:column;gap:.3rem}
.legal-card a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.legal-card address{font-style:normal;font-size:var(--t-body);line-height:1.5;color:var(--ink-2)}
.legal-date{text-align:center;font-size:var(--t-small);color:var(--ink-3)}