/* Salt + Manor link page, coastal samples.
   Same link-tree structure as ../hub/. Three themes (Sea Glass, Golden Hour, Tide Line) set by a body class.
   Coastal touches stay quiet: palette, a wave-edged banner, a hairline wave, faint sand grain, Dana Point coordinates. */

@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/cormorant-400.ttf) format("truetype")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:400;font-display:swap;src:url(assets/fonts/cormorant-italic-400.ttf) format("truetype")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/dmsans-400.ttf) format("truetype")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/dmsans-500.ttf) format("truetype")}

:root{
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"DM Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --pad:24px;
  --ease:cubic-bezier(.2,.75,.2,1);
  color-scheme:light;
}

/* ---------- Themes ---------- */
.sea-glass{
  --bg:#f3f1ea; --paper:#fbfaf6; --card:#dfe8e2; --card-hover:#d4e0d9;
  --ink:#22353a; --ink-2:#4b5e62; --accent:#365d5a; --rule:#c6d2cb;
  --btn:#244340; --btn-ink:#f4efe5; --btn-arrow:#d8c6a3; --btn-arrow-ink:#22353a;
  --ribbon:#244340; --ribbon-ink:#d6e2dc; --wave:#7fa29c; --foam:rgba(255,255,255,.75);
  --cover-tint:linear-gradient(180deg,rgba(214,232,226,0) 45%,rgba(214,232,226,.28));
  --grain:.05;
  --desk:linear-gradient(180deg,#d9e6e2 0%,#e9eee9 42%,#ece5d7 100%);
}
/* Sea Glass, white + sand: Louie's pick with a white page and a sand-beige booking button */
.sea-glass-white{
  --bg:#ffffff; --paper:#ffffff; --card:#ffffff; --card-hover:#f7f3ec;
  --ink:#22353a; --ink-2:#4b5e62; --accent:#365d5a; --rule:#e5dccd;
  --btn:#e4d2b2; --btn-ink:#22353a; --btn-arrow:#244340; --btn-arrow-ink:#ffffff;
  --ribbon:#244340; --ribbon-ink:#d6e2dc; --wave:#7fa29c; --foam:rgba(255,255,255,.85);
  --cover-tint:linear-gradient(180deg,rgba(255,255,255,0) 55%,rgba(255,255,255,.18));
  --grain:0;
  --desk:linear-gradient(180deg,#e3ecea 0%,#f4f5f2 45%,#efe7da 100%);
}
.sea-glass-white .cta{border:1px solid #cdb68f;box-shadow:0 10px 24px rgba(120,96,58,.18)}
.sea-glass-white .cta:hover{box-shadow:0 14px 30px rgba(120,96,58,.26)}
.sea-glass-white .cta::after{background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 48%,transparent 66%)}
.sea-glass-white .feature{box-shadow:0 6px 18px rgba(34,53,58,.06)}
.golden-hour{
  --bg:#f8eee3; --paper:#fdf8f2; --card:#f3dcc8; --card-hover:#eed2bb;
  --ink:#3a2a22; --ink-2:#664f43; --accent:#7b4629; --rule:#e2c9b2;
  --btn:#2f221d; --btn-ink:#f8eadb; --btn-arrow:#e3b77c; --btn-arrow-ink:#2f221d;
  --ribbon:#2f221d; --ribbon-ink:#ecd6bf; --wave:#d29a6c; --foam:rgba(255,244,230,.8);
  --cover-tint:linear-gradient(180deg,rgba(255,196,140,.08) 0%,rgba(255,170,110,0) 40%,rgba(255,186,128,.34) 100%);
  --grain:.05;
  --desk:linear-gradient(180deg,rgba(242,170,118,.38),rgba(70,40,28,.62)),#5a3d2e;
}
.tide-line{
  color-scheme:dark;
  --bg:#1c2a2c; --paper:#233438; --card:#2b4146; --card-hover:#31494f;
  --ink:#f1ece2; --ink-2:#c2cbc6; --accent:#dcc196; --rule:rgba(241,236,226,.18);
  --btn:#efe6d6; --btn-ink:#1c2a2c; --btn-arrow:#1c2a2c; --btn-arrow-ink:#efe6d6;
  --ribbon:#111b1c; --ribbon-ink:#c2cbc6; --wave:#8fb1ab; --foam:rgba(241,236,226,.55);
  --cover-tint:linear-gradient(180deg,rgba(28,42,44,0) 40%,rgba(28,42,44,.45));
  --grain:.06;
  --desk:linear-gradient(180deg,rgba(20,32,33,.72),rgba(14,22,23,.9)),#1c2a2c;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-width:300px;background:var(--bg);color:var(--ink);font:400 16px/1.5 var(--sans);font-synthesis:none;-webkit-font-smoothing:antialiased;--focus:var(--accent)}
img{display:block;max-width:100%;height:auto}
a{color:inherit;-webkit-tap-highlight-color:transparent}
h1,p,ul{margin:0}
ul{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-80px;z-index:20;background:var(--paper);color:var(--ink);padding:12px 18px;font-weight:500;border-radius:999px}
.skip:focus{top:12px}

.ribbon{background:var(--ribbon);color:var(--ribbon-ink);font-size:11.5px;line-height:1.4;letter-spacing:.02em;text-align:center;padding:8px 16px}

.tree{position:relative;isolation:isolate;max-width:460px;margin:0 auto;background:var(--bg)}
/* Faint sand grain (decorative, behind everything) */
.tree::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:var(--grain);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .25 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- Profile ---------- */
.profile{text-align:center;padding:0 var(--pad)}
.cover{position:relative;display:block;margin:0 calc(var(--pad) * -1);height:176px;overflow:hidden;background:#cfd8d6}
.cover picture{display:block;height:100%}
.cover img{width:100%;height:100%;object-fit:cover;object-position:55% 45%}
.cover::after{content:"";position:absolute;inset:0;background:var(--cover-tint);pointer-events:none}
/* Shoreline: the banner ends in a soft wave with a thin foam line instead of a straight edge */
.shore{position:absolute;left:0;right:0;bottom:-1px;z-index:1;width:100%;height:22px;color:var(--bg)}
.shore .foam{fill:none;stroke:var(--foam);stroke-width:1.2}
.avatar{display:block;position:relative;z-index:2;width:80px;aspect-ratio:3/4;margin:-56px auto 0;border-radius:40px 40px 7px 7px;overflow:hidden;background:var(--card);box-shadow:0 0 0 4px var(--bg),0 0 0 5px var(--rule),0 10px 24px rgba(20,30,32,.18)}
.avatar img{width:100%;height:100%;object-fit:cover}
.wordmark{margin-top:12px;font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.05;letter-spacing:.08em;text-transform:uppercase}
.wordmark .plus{font-size:.78em;letter-spacing:0;margin:0 .05em;position:relative;top:-.05em}
.byline{margin-top:6px;font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.tagline{margin-top:5px;font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.3;color:var(--ink-2)}
.socials{display:flex;justify-content:center;gap:10px;margin-top:10px}
.socials a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--rule);color:var(--ink);transition:background .25s,border-color .25s}
.socials a:hover{background:var(--card);border-color:var(--accent)}

/* Hairline wave divider */
.wave{display:block;width:120px;height:12px;margin:14px auto 0;background:var(--wave);-webkit-mask:url(wave.svg) 0 0/48px 12px repeat-x;mask:url(wave.svg) 0 0/48px 12px repeat-x}

/* ---------- Links ---------- */
.links{display:grid;gap:12px;padding:14px var(--pad) 0}
.cta{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;padding:0 9px 0 24px;border-radius:999px;background:var(--btn);color:var(--btn-ink);text-decoration:none;font-size:16px;font-weight:500;letter-spacing:.01em;box-shadow:0 10px 26px rgba(20,30,32,.2);transition:box-shadow .3s,transform .2s}
.cta-arrow{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--btn-arrow);color:var(--btn-arrow-ink);transition:transform .35s var(--ease)}
.cta::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.22) 48%,transparent 66%);transform:translateX(-110%)}
.cta:hover{box-shadow:0 14px 32px rgba(20,30,32,.28)}
.cta:hover .cta-arrow,.cta:focus-visible .cta-arrow{transform:translateX(3px)}
.cta:active{transform:translateY(1px)}

.feature{display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:center;padding:12px 16px 12px 12px;border-radius:18px;background:var(--card);border:1px solid var(--rule);text-decoration:none;transition:background .25s,border-color .25s}
.feature:hover{background:var(--card-hover);border-color:var(--accent)}
.feature-img{display:block;width:64px;aspect-ratio:3/4;border-radius:32px 32px 5px 5px;overflow:hidden;background:var(--rule)}
.feature-img img{width:100%;height:100%;object-fit:cover}
.feature-text{display:flex;flex-direction:column;align-items:flex-start;min-width:0;text-align:left}
.feature-title{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;font-family:var(--serif);font-size:25px;line-height:1.1}
.soon{display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);border:1px solid currentColor;border-radius:999px;padding:5px 8px 4px;line-height:1}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.feature-sub{margin-top:3px;font-size:14px;line-height:1.4;color:var(--ink-2)}
.feature-action{display:inline-flex;align-items:center;gap:5px;margin-top:5px;font-size:13px;font-weight:500;color:var(--accent);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

.menu{border:1px solid var(--rule);border-radius:18px;background:var(--paper);overflow:hidden}
.menu li+li{border-top:1px solid var(--rule)}
.row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;min-height:64px;padding:10px 18px;text-decoration:none;text-align:left;transition:background .25s}
.row:hover{background:var(--bg)}
.row-main{display:flex;flex-direction:column;min-width:0}
.row-title{display:flex;align-items:center;flex-wrap:wrap;gap:3px 10px;font-family:var(--serif);font-size:23px;line-height:1.15}
.row-sub{font-size:13.5px;color:var(--ink-2);overflow-wrap:anywhere}
.row-icon{display:inline-flex;color:var(--ink);transition:transform .35s var(--ease)}
.row:hover .row-icon,.row:focus-visible .row-icon{transform:translateX(3px)}
.row[target]:hover .row-icon,.row[target]:focus-visible .row-icon{transform:translate(2px,-2px)}
.menu .row:focus-visible{outline-offset:-3px;border-radius:16px}
.tag{display:inline-block;font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;line-height:1;padding:5px 8px 4px;border-radius:999px;border:1px solid currentColor;color:var(--accent)}

.foot{text-align:center;padding:24px var(--pad) calc(26px + env(safe-area-inset-bottom))}
.foot .wave{margin:0 auto 18px;width:72px}
.foot-mark{font-family:var(--serif);font-size:17px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.coords{margin-top:4px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.foot-review{margin-top:12px;font-size:12px;line-height:1.6;color:var(--ink-2)}
.foot-review a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;color:var(--ink);text-decoration:underline;text-underline-offset:4px}

/* ---------- Wider screens: card over a coastal backdrop ---------- */
@media (min-width:600px){
  body{background:var(--desk);background-attachment:fixed}
  /* Katie's ocean-view hero, softly blurred behind the card */
  body::before{content:"";position:fixed;inset:-40px;z-index:-1;background:url(assets/coast-backdrop-800.jpg) center 45%/cover no-repeat;background-image:image-set(url(assets/coast-backdrop-800.webp) type("image/webp"),url(assets/coast-backdrop-800.jpg) type("image/jpeg"));filter:blur(10px)}
  .sea-glass::before,.sea-glass-white::before{opacity:.5}
  .golden-hour::before{opacity:.6;filter:blur(10px) sepia(.25) saturate(1.1)}
  .tide-line::before{opacity:.3;filter:blur(12px) saturate(.8)}
  .ribbon{background:color-mix(in srgb,var(--ribbon) 88%,transparent)}
  .tree{margin:36px auto 48px;border-radius:28px;overflow:hidden;box-shadow:0 30px 80px rgba(10,14,15,.35)}
  .sea-glass .tree,.sea-glass-white .tree{box-shadow:0 30px 80px rgba(40,70,68,.22)}
  .cover{height:204px}
  .avatar{width:88px;margin-top:-60px;border-radius:44px 44px 7px 7px}
  .wordmark{font-size:32px}
  .links{gap:14px}
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion:no-preference){
  .cover img{animation:settle 1.6s var(--ease) both}
  .shore path{animation:tide 2.2s .2s var(--ease) both}
  /* "backwards" (not "both") so the finished entrance doesn't pin transform and block hover lifts */
  .avatar,.wordmark,.byline,.tagline,.socials,.links>*,.foot{animation:rise .8s var(--ease) backwards}
  .avatar{animation-delay:.1s}
  .wordmark{animation-delay:.16s}
  .byline,.tagline{animation-delay:.22s}
  .socials{animation-delay:.28s}
  .links>:nth-child(1){animation-delay:.34s}
  .links>:nth-child(2){animation-delay:.42s}
  .links>:nth-child(3){animation-delay:.5s}
  .foot{animation-delay:.58s}
  /* the hairline wave drifts a little, twice, then rests */
  .profile .wave{animation:rise .8s .28s var(--ease) both,drift 7s 1s ease-in-out 2 alternate}
  .foot .wave{animation:drift 7s 1s ease-in-out 2 alternate}
  .cta::after{animation:shine 1.5s 1.3s var(--ease) 1 both}
  .cta:hover::after,.cta:focus-visible::after{animation:shine-again 1.1s var(--ease) both}
  .dot{animation:pulse 2.4s 1.4s ease-out 3}
}
@keyframes settle{from{transform:scale(1.06)}to{transform:none}}
@keyframes tide{from{transform:translateY(8px)}to{transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes drift{from{-webkit-mask-position:0 0;mask-position:0 0}to{-webkit-mask-position:48px 0;mask-position:48px 0}}
@keyframes shine{from{transform:translateX(-110%)}to{transform:translateX(110%)}}
@keyframes shine-again{from{transform:translateX(-110%)}to{transform:translateX(110%)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 55%,transparent)}70%,100%{box-shadow:0 0 0 7px transparent}}

@media (forced-colors:active){
  .cta,.feature,.menu,.tag,.soon,.socials a{border:1px solid CanvasText}
  .wave,.shore{display:none}
}

/* ---------- "Coming soon" teaser cards (not links) ---------- */
.is-soon{pointer-events:none}
.guide.is-soon{grid-template-columns:56px 1fr}
.guide.is-soon .soon{margin-top:4px;justify-self:start;width:max-content}
/* ---------- Small "coming soon" pages (book.html, shop.html) ---------- */
.soon-page .card{text-align:center;padding:36px var(--pad) 40px}
.soon-page .kicker{font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.soon-page .foot-mark{margin-bottom:18px}
.soon-page h1{margin:12px 0 0;font-family:var(--serif);font-weight:400;font-size:34px;line-height:1.1;text-wrap:balance}
.soon-page .wave{margin-top:30px}
.soon-page p.lede{margin:12px auto 0;max-width:30ch;color:var(--ink-2);text-wrap:balance}
.soon-page .actions{display:grid;gap:12px;margin-top:26px}
.soon-page .cta{justify-content:center;padding:0 24px}
.back{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;color:var(--ink);text-decoration:underline;text-underline-offset:5px}

/* ---------- Guide card on the link page ---------- */
.guide{display:grid;grid-template-columns:56px 1fr auto;gap:14px;align-items:center;padding:12px 18px 12px 14px;border-radius:18px;background:#f6efe3;border:1px solid var(--rule);text-decoration:none;text-align:left;transition:background .25s,border-color .25s}
.guide:hover{background:#f1e7d7;border-color:var(--accent)}
.guide-cover{display:block;width:50px;aspect-ratio:240/311;transform:rotate(-4deg);border-radius:2px 4px 4px 2px;overflow:hidden;box-shadow:0 6px 14px rgba(60,40,20,.22)}
.guide-cover img{width:100%;height:100%;object-fit:cover}
.guide-text{display:flex;flex-direction:column;min-width:0}
.guide-kicker{font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.guide-title{display:flex;align-items:center;flex-wrap:wrap;gap:3px 10px;margin-top:2px;font-family:var(--serif);font-size:23px;line-height:1.15}
.guide:hover .row-icon,.guide:focus-visible .row-icon{transform:translateX(3px)}

/* ---------- E-book page ---------- */
.guide-page .book{display:block;width:128px;margin:14px auto 6px;transform:rotate(-3deg);box-shadow:0 18px 40px rgba(60,40,20,.25);border-radius:3px 6px 6px 3px;overflow:hidden}
.guide-page .book img{width:100%;height:auto}
.benefits{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px;text-align:left}
.benefits li{display:grid;grid-template-columns:30px 1fr;gap:8px;align-items:start;padding:10px 14px;border:1px solid var(--rule);border-radius:14px;background:#fff;font-size:14.5px;line-height:1.45;color:var(--ink-2)}
.benefits .b-n{font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.2;color:var(--accent)}
.benefits strong{display:block;font-family:var(--serif);font-weight:400;font-size:20px;line-height:1.15;color:var(--ink)}
.guide-page .meta{margin:14px 0 0;font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.guide-page .actions .cta{width:100%;justify-content:center;padding:0 24px;font:inherit;font-size:16px;font-weight:500;cursor:pointer}

/* ---------- Waitlist form ---------- */
.form-page .wl{display:grid;gap:16px;margin-top:26px;text-align:left}
.field label,.choices legend{display:block;font-size:13.5px;font-weight:500;margin-bottom:6px;color:var(--ink);padding:0}
.field input{width:100%;min-height:50px;padding:12px 14px;font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1px solid #8d8070;border-radius:12px}
.choices{border:0;margin:0;padding:0;display:grid;gap:6px;min-width:0}
.choices label{display:flex;align-items:center;gap:10px;min-height:46px;padding:0 14px;border:1px solid var(--rule);border-radius:12px;font-size:15px;cursor:pointer}
.choices input{width:18px;height:18px;margin:0;accent-color:var(--accent)}
.choices label:has(input:checked){border-color:var(--accent);background:#f3f8f6}
.opt{font-weight:400;color:var(--ink-2)}
.consent{margin:0;font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.wl .cta{width:100%;justify-content:center;padding:0 24px;font:inherit;font-size:16px;font-weight:500;cursor:pointer}
.wl .cta:disabled{opacity:.6;cursor:not-allowed}
.status{margin:0;padding:12px 14px;border-radius:12px;background:#f6efe3;border:1px solid var(--rule);font-size:14px;line-height:1.45;color:var(--ink)}
.status:empty{display:none}
.form-page .back{display:flex;width:max-content;margin:14px auto 0}
@media (prefers-reduced-motion:no-preference){.links>:nth-child(4){animation-delay:.58s}}

/* ---------- Hover + press motion ---------- */
.cta,.feature,.guide,.menu,.socials a,.benefits li{transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .25s,border-color .25s}
.socials a svg,.row-title{transition:transform .35s var(--ease)}
.feature-img img{transition:transform .9s var(--ease)}
.guide-cover,.guide-page .book{position:relative;transition:transform .55s var(--ease),box-shadow .55s var(--ease)}
.guide-cover::after,.guide-page .book::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.6) 50%,transparent 65%);transform:translateX(-130%)}
.back{transition:text-underline-offset .25s}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .cta:hover{transform:translateY(-2px)}
  .feature:hover,.guide:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(34,53,58,.10)}
  .feature:hover .feature-img img{transform:scale(1.08)}
  .guide:hover .guide-cover{transform:rotate(0deg) translateY(-3px) scale(1.1);box-shadow:0 12px 24px rgba(60,40,20,.3)}
  .guide:hover .guide-cover::after,.guide-page .book:hover::after{transition:transform .9s var(--ease);transform:translateX(130%)}
  .menu:hover{box-shadow:0 12px 28px rgba(34,53,58,.07)}
  .row:hover .row-title{transform:translateX(4px)}
  .socials a:hover{transform:translateY(-2px);border-color:var(--accent)}
  .socials a:hover svg{transform:scale(1.1)}
  .benefits li:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 10px 22px rgba(34,53,58,.08)}
  .guide-page .book:hover{transform:rotate(0deg) translateY(-6px) scale(1.04) rotateY(-16deg);box-shadow:20px 26px 50px rgba(60,40,20,.3)}
  .back:hover{text-underline-offset:8px}
}
@media (prefers-reduced-motion:no-preference){
  /* touch screens: a quick press instead of hover */
  .cta:active,.feature:active,.guide:active,.socials a:active,.benefits li:active{transform:scale(.98)}
  .row:active{background:var(--card-hover)}
  /* the books: a one-time glint so phones see them move too */
  .guide-cover::after{animation:glint 1.3s 1.6s var(--ease) 1 backwards}
  .guide-page .book{animation:book-in 1.1s .15s var(--ease) backwards}
  .guide-page .book::after{animation:glint 1.4s 1.1s var(--ease) 1 backwards}
}
@media (prefers-reduced-motion:reduce){.row:hover .row-icon,.row:focus-visible .row-icon,.guide:hover .row-icon,.guide:focus-visible .row-icon,.cta:hover .cta-arrow,.cta:focus-visible .cta-arrow,.ghost:hover svg{transform:none}}
@keyframes glint{from{transform:translateX(-130%)}to{transform:translateX(130%)}}
/* ---------- "Website colors" variant: Katie's hairbykatieshumway.com palette + type ---------- */
.website-match{
  --serif:Georgia,Cambria,"Times New Roman",Times,serif;
  --sans:Manrope,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --bg:#f7f4ef; --paper:#fffdf7; --card:#fffdf7; --card-hover:#f5f1ea;
  --ink:#2c2621; --ink-2:#665c54; --accent:#75603f; --rule:rgba(48,42,37,.12);
  --btn:#302a25; --btn-ink:#ffffff; --btn-arrow:#b08a47; --btn-arrow-ink:#fffdf7;
  --ribbon:#24211d; --ribbon-ink:#d1b994; --wave:#b08a47; --foam:rgba(255,253,247,.85);
  --cover-tint:linear-gradient(180deg,rgba(247,244,239,0) 55%,rgba(247,244,239,.2));
  --grain:0;
  --desk:linear-gradient(90deg,#fffdf7,#f2ebdc);
}
.website-match::before{opacity:.42}
.website-match .tree{box-shadow:0 30px 80px rgba(48,42,37,.2)}
.website-match .feature,.website-match .guide,.website-match .menu{box-shadow:0 15px 35px rgba(48,42,37,.07)}
.website-match .guide{background:#eee6d8}
.website-match .guide:hover{background:#e9dfcd;border-color:#b08a47}
.website-match .feature:hover,.website-match .socials a:hover{border-color:#b08a47}
.website-match .cta{box-shadow:0 12px 26px rgba(48,42,37,.2)}
.website-match .status{background:#f5f1ea}
.website-match .choices label:has(input:checked){border-color:#b08a47;background:#f5f1ea}
.website-match .benefits li{background:#fffdf7}
.website-match .avatar{box-shadow:0 0 0 4px var(--bg),0 0 0 5px #d1b994,0 10px 24px rgba(48,42,37,.18)}
/* Her type: Georgia headings with tight tracking, small bold uppercase labels and buttons */
.website-match .wordmark{font-size:25px;letter-spacing:.1em}
.website-match .tagline{font-size:16px}
.website-match .byline,.website-match .soon-page .kicker,.website-match .guide-kicker,.website-match .guide-page .meta{font-size:10.5px;font-weight:700;letter-spacing:.22em}
.website-match .tag,.website-match .soon{font-weight:700;letter-spacing:.16em}
.website-match .feature-title{font-size:21px;letter-spacing:-.01em}
.website-match .row-title,.website-match .guide-title{font-size:19px;letter-spacing:-.01em}
.website-match .soon-page h1{font-size:29px;letter-spacing:-.03em}
.website-match .benefits strong{font-size:17px}
.website-match .foot-mark{font-size:14px;letter-spacing:.2em}
.website-match .cta{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.website-match .feature-action{font-weight:700}
@keyframes book-in{from{opacity:0;transform:rotate(-9deg) translateY(22px) scale(.95)}to{opacity:1;transform:rotate(-3deg)}}
.guide-page .card{perspective:900px}

/* ---------- Host a class popup (custom form posting to GoHighLevel) ---------- */
html.sheet-lock{overflow:hidden}
.sheet [hidden]{display:none!important}
.sheet{width:min(520px,calc(100% - 32px));max-width:none;max-height:min(92dvh,960px);margin:auto;padding:0;border:0;border-radius:26px;background:var(--paper);color:var(--ink);box-shadow:0 30px 80px rgba(48,42,37,.3);overflow:auto;overscroll-behavior:contain}
.sheet::backdrop{background:rgba(44,38,33,.5);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.sheet-in{position:relative;padding:30px 24px 26px}
.sheet-x{position:absolute;top:14px;right:14px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--rule);border-radius:50%;background:var(--paper);color:var(--ink);cursor:pointer;transition:border-color .25s,transform .25s}
.sheet-x:hover{border-color:#b08a47;transform:rotate(90deg)}
.sheet-head{text-align:center;padding:0 40px}
.sheet .kicker{margin:0;font-size:10.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.sheet h2{margin:10px 0 0;font-family:var(--serif);font-weight:400;font-size:31px;line-height:1.1;letter-spacing:-.03em}
.sheet h2:focus{outline:none}
.sheet .lede{margin:10px auto 0;max-width:34ch;color:var(--ink-2);font-size:15px;line-height:1.5;text-wrap:balance}
.sheet .wave{margin-top:18px}
.hc{display:grid;gap:15px;margin-top:22px}
.hc-pair{display:grid;gap:15px}
@media (min-width:440px){.hc-pair{grid-template-columns:1fr 1fr}}
.field textarea{display:block;width:100%;min-height:92px;padding:12px 14px;font:inherit;font-size:16px;line-height:1.45;color:var(--ink);background:#fff;border:1px solid #8d8070;border-radius:12px;resize:vertical}
.hc .field input:focus,.hc .field textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.hc .field input::placeholder,.hc .field textarea::placeholder{color:#8a7f73}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pills label{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid rgba(48,42,37,.18);border-radius:999px;background:#fff;font-size:14.5px;cursor:pointer;transition:border-color .2s,background .2s}
.pills input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.pills label:has(input:checked){border-color:#b08a47;background:#f5f1ea;font-weight:600}
.pills label:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.hc .cta{width:100%;margin-top:2px;border:0;font-family:inherit;cursor:pointer}
.hc .cta:disabled{opacity:.7;cursor:progress}
.hc .status a{color:inherit;font-weight:600}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.hc-done{padding:8px 0 2px;text-align:center}
.hc-done:focus{outline:none}
.hc-check{display:grid;place-items:center;width:58px;height:58px;margin:4px auto 0;border-radius:50%;background:#f5f1ea;color:#b08a47}
.hc-done h3{margin:14px 0 0;font-family:var(--serif);font-weight:400;font-size:28px;letter-spacing:-.02em}
.hc-done p{margin:8px auto 0;max-width:30ch;color:var(--ink-2)}
.hc-done .back{margin:14px auto 0;border:0;background:none;font:inherit;cursor:pointer}
@media (min-width:600px){
  .sheet-in{padding:26px 28px 24px}
  .hc{gap:12px;margin-top:16px}
  .hc-pair{gap:12px}
  .hc .field input{min-height:46px;padding:10px 14px}
  .hc .field textarea{min-height:76px}
  .hc .pills label{min-height:40px}
  .hc .cta{min-height:56px}
}
@media (max-width:599px){
  .sheet{width:100%;max-height:92dvh;margin:auto 0 0;border-radius:24px 24px 0 0}
  .sheet-in{padding:26px 18px calc(22px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:no-preference){
  .sheet[open]{animation:sheet-in .45s var(--ease) both}
  .sheet[open]::backdrop{animation:sheet-fade .3s ease both}
}
@media (prefers-reduced-motion:no-preference) and (max-width:599px){.sheet[open]{animation-name:sheet-up}}
@keyframes sheet-in{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@keyframes sheet-up{from{transform:translateY(100%)}to{transform:none}}
@keyframes sheet-fade{from{opacity:0}}