/* The homepage (scripts/build-home-page.js), styled to the owner's wireframe
   (https://claude.ai/artifact/7dpYHqGzDYnQwg9z2eZbDM; owner, 2026-10-06: the
   wireframe outweighs the brand rules on this page, so its blue-greys,
   Work Sans eyebrows and gold link text are deliberate here). One column of
   1180px; every section a band with the wireframe's padding and a hairline
   above. The kept sections (phone, excuse list, group chat, What comes back,
   One card) wear the same heads and type scale. Cards come from
   invitations.css only for the NEW sticker and the labels (site.css). */

.wf{
  --w-mid:#B9C2D6;--w-soft:#7E8CA6;--w-line:#1c2740;--w-panel:#131F33;--w-edge:#2a3a56;
  max-width:1180px;margin:0 auto;font-family:'Work Sans',sans-serif;font-weight:300;color:var(--ink);
}
.wf-wrap{max-width:1180px;margin:0 auto;padding:0 40px 0 56px}

/* ── Header ── */
body.hm .wf-hdr{border-bottom:1px solid #1c2740}
body.hm .wf-hdr .topbar{padding:18px 0}
body.hm .wf-hdr .wordmark img{width:150px;height:auto;display:block}
@media (min-width:1120px){
  body.hm .wf-hdr .navlinks{gap:24px;margin-left:auto;margin-right:24px}
  body.hm .wf-hdr .navlinks a{font:400 14px 'Work Sans',sans-serif;letter-spacing:0;text-transform:none;color:#B9C2D6;padding:6px 0}
  body.hm .wf-hdr .navlinks a.cur{color:var(--ink);font-weight:600}
  body.hm .wf-hdr .navlinks a:hover{color:var(--ink)}
}
body.hm .wf-hdr .navlinks a.nav-lux,body.hm .wf-hdr .menu-panel a.nav-lux{color:var(--gold);font-weight:600}
body.hm .wf-hdr .hm-headbtn{display:none}
@media (min-width:1120px){ body.hm .wf-hdr .hm-headbtn{display:inline-flex} }

/* ── Type ── */
.wf-eyebrow{font:600 11px 'Work Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--acid);margin:0}
.wf-h1{font-family:'Unbounded',sans-serif;font-weight:800;font-size:46px;line-height:1.1;letter-spacing:-.01em;margin:14px 0 18px;color:var(--ink)}
.wf-p{color:var(--pink)}
.wf-h2{font-family:'Unbounded',sans-serif;font-weight:800;font-size:28px;line-height:1.2;margin:10px 0 10px;color:var(--ink)}
.wf-h2-narrow{max-width:22ch}
.wf-h2-mid{max-width:26ch}
.wf-h2-sm{font-size:22px}
.wf-sub{font-size:17px;line-height:1.55;color:var(--w-mid);max-width:52ch;margin:0 0 24px;font-weight:400}
.wf-note{font-size:12px;line-height:1.5;color:var(--w-soft);margin:12px 0 0;font-weight:400}
.wf-body{font-size:15px;line-height:1.6;color:var(--w-mid);font-weight:400;max-width:62ch;margin:14px 0 0}
.wf-body b{color:var(--ink);font-weight:600}
.wf-body-top{margin-top:0}

/* ── Buttons ── */
.wf-btns{display:flex;flex-wrap:wrap;gap:8px}
.wf-btns-center{justify-content:center}
.wf-btn{display:inline-flex;align-items:center;justify-content:center;font:600 14px 'Work Sans',sans-serif;background:var(--pink);color:#fff;border:1.5px solid var(--pink);border-radius:10px;padding:12px 20px;text-decoration:none;white-space:nowrap;cursor:pointer}
.wf-btn:hover{background:var(--pink-dp);border-color:var(--pink-dp)}
.wf-btn:focus-visible{outline:2px solid var(--acid);outline-offset:3px}
.wf-ghost{background:transparent;border-color:#2a3a56;color:var(--ink)}
.wf-ghost:hover{background:rgba(255,255,255,.04);border-color:#3a4e72}
.wf-wait,.wf-wait:hover{background:rgba(255,77,157,.4);border-color:transparent;color:rgba(255,255,255,.7);cursor:default}

/* ── Sections: the wireframe's band ── */
.wf .wf-sec{padding:50px 40px 44px 56px;border-top:1px solid var(--w-line)}

/* ── Hero ── */
.wf .wf-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:30px;padding:56px 40px 36px 56px;align-items:center}
.wf-stack{position:relative;height:430px}
.wf-sc{position:absolute;display:block;width:210px;aspect-ratio:2/3;border-radius:10px;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.55);transition:transform .25s ease}
.wf-sc img{display:block;width:100%;height:100%;object-fit:cover}
.wf-sc-1{left:6px;top:60px;transform:rotate(-9deg)}
.wf-sc-2{left:170px;top:0;z-index:2;transform:rotate(1deg)}
.wf-sc-3{left:330px;top:70px;transform:rotate(9deg)}
.wf-sc:hover,.wf-sc:focus-visible{transform:translateY(-6px) rotate(0);z-index:3}
.wf-sc:focus-visible{outline:2px solid var(--acid);outline-offset:4px}
.wf-chip{position:absolute;right:0;bottom:6px;z-index:5;background:var(--pink);color:#fff;border-radius:999px;padding:10px 18px;font:700 13px 'Work Sans',sans-serif;box-shadow:0 8px 24px rgba(255,77,157,.4)}
.wf-trust{list-style:none;margin:0;display:flex;flex-wrap:wrap;gap:10px 28px;padding:16px 40px 22px 56px;border-top:1px solid var(--w-line);font:500 13px 'Work Sans',sans-serif;color:var(--w-mid)}
.wf-trust li::before{content:"✓ ";color:var(--acid);font-weight:700}

/* ── Two doors ── */
.wf-doors{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:22px}
.wf-door{position:relative;display:block;border-radius:20px;padding:26px;background:var(--w-panel);min-height:270px;color:var(--ink);text-decoration:none}
.wf-door-excuse{border:1.5px solid var(--pink);background:radial-gradient(circle at 85% 20%,rgba(255,77,157,.25),transparent 55%),var(--w-panel)}
.wf-door-occasion{border:1.5px solid var(--gold);background:radial-gradient(circle at 85% 20%,rgba(217,172,87,.22),transparent 55%),var(--w-panel)}
.wf-door h3{font-family:'Unbounded',sans-serif;font-weight:800;font-size:24px;line-height:1.2;margin:6px 0;color:var(--ink)}
.wf-dtag{display:block;margin:0 0 12px;font-size:15px;line-height:1.5;color:var(--w-mid);max-width:30ch;font-weight:400}
.wf-minis{display:flex;gap:10px;margin:14px 0}
.wf-mini{position:relative;width:84px;aspect-ratio:2/3;border-radius:6px;overflow:hidden;box-shadow:0 6px 16px rgba(0,0,0,.4)}
.wf-mini img{display:block;width:100%;height:100%;object-fit:cover}
.wf-mini .tlux-on,.wf-mini .ftouch-on{bottom:4px;left:4px;transform:scale(.62);transform-origin:bottom left}
.wf-go{font-weight:600;font-size:14px;color:var(--pink)}
.wf-door-occasion .wf-go{color:var(--gold)}
.wf-door:hover .wf-go,.wf-door:focus-visible .wf-go{text-decoration:underline;text-underline-offset:3px}
.wf-door:focus-visible{outline:2px solid var(--acid);outline-offset:3px}
.wf-edition{margin:16px 0 0;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;padding:14px;border:1px solid rgba(217,172,87,.45);border-radius:14px;background:rgba(217,172,87,.07);font:500 14px 'Work Sans',sans-serif;color:var(--ink);text-align:center}

/* ── TinselLux band ── */
.wf .wf-lux{background:linear-gradient(180deg,rgba(217,172,87,.08),transparent 70%)}
.wf-luxgrid{display:grid;grid-template-columns:1fr 1.15fr;gap:36px;align-items:center;margin-top:10px}
.wf-luxgrid-one{grid-template-columns:1fr}
.wf-points{list-style:none;padding:0;margin:0 0 22px}
.wf-points li{position:relative;padding:7px 0 7px 24px;font-size:15px;line-height:1.55;color:var(--w-mid);font-weight:400}
.wf-points li::before{content:"✦";position:absolute;left:0;top:7px;color:var(--gold)}
/* The switcher (owner, 2026-10-06): the wireframe's panel on the LEFT,
   large: the label and the materials across the top, the card at 440px,
   its short line to the right. The points and the button on the right. */
.wf-luxgrid{grid-template-columns:minmax(0,760px) minmax(0,1fr);gap:36px;align-items:center}
.wf-switch{background:var(--w-panel);border:1px solid rgba(217,172,87,.4);border-radius:18px;padding:22px}
.wf-switch .wf-eyebrow{margin-bottom:10px}
.wf-tabs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:18px}
.wf-tab{font:600 12.5px 'Work Sans',sans-serif;color:var(--w-mid);border:1.5px solid #2a3a56;background:transparent;border-radius:999px;padding:8px 14px;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.wf-tab:hover{color:var(--ink);border-color:#3a4e72}
.wf-tab[aria-selected="true"]{border-color:var(--gold);color:var(--ink);background:rgba(217,172,87,.12)}
.wf-tab:focus-visible{outline:2px solid var(--acid);outline-offset:2px}
.wf-swhint{margin-left:4px;font:500 12px 'Work Sans',sans-serif;color:var(--gold);display:inline-flex;align-items:center;gap:6px}
.wf-swbody{display:flex;gap:24px;align-items:center}
.wf-swcards{flex:0 0 auto;width:min(440px,100%)}
.wf-ver{display:block}
.wf-ver[hidden]{display:none}
.wf-swcard{position:relative;display:block;width:100%;aspect-ratio:2/3;border-radius:12px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.6)}
.wf-swcard img{display:block;width:100%;height:100%;object-fit:cover}
.wf-swnotes{flex:1;min-width:0}
.wf-swnote{margin:0;font-size:14px;line-height:1.55;color:var(--w-mid);font-weight:400}
.wf-swnote b{display:block;color:var(--ink);font-weight:700;font-size:15px;margin-bottom:6px}
/* "See TinselLux": the label's pill, at button size. */
.wf-luxbtn{font-size:15px;padding:12px 22px 12px 16px;gap:9px;text-decoration:none}
.wf-luxbtn .tlux-star{width:14px;height:14px}
.wf-luxbtn:hover{box-shadow:0 0 0 1px rgba(232,196,104,.35),0 6px 18px rgba(0,0,0,.45)}
.wf-luxbtn:focus-visible{outline:2px solid var(--acid);outline-offset:3px}
/* The twinkle: the unpicked materials breathe a gold edge in turn, and the
   hint's star glints, until the visitor picks one (home.js adds .used). */
@keyframes wf-breathe{0%,70%,100%{border-color:#2a3a56;box-shadow:none}35%{border-color:rgba(217,172,87,.85);box-shadow:0 0 12px rgba(217,172,87,.35)}}
@keyframes wf-glint{0%,100%{opacity:.45;transform:scale(.85) rotate(0)}50%{opacity:1;transform:scale(1.15) rotate(20deg)}}
.wf-switch:not(.used) .wf-tab[aria-selected="false"]{animation:wf-breathe 2.8s ease-in-out infinite}
.wf-switch:not(.used) .wf-tab:nth-child(2){animation-delay:.4s}
.wf-switch:not(.used) .wf-tab:nth-child(3){animation-delay:.8s}
.wf-switch:not(.used) .wf-tab:nth-child(4){animation-delay:1.2s}
.wf-twinkle{display:inline-block;animation:wf-glint 1.8s ease-in-out infinite}
.wf-switch.used .wf-twinkle{animation:none;opacity:.7}
@media (prefers-reduced-motion:reduce){ .wf-switch .wf-tab,.wf-twinkle{animation:none!important} }

/* ── Fresh from the studio ── */
.wf-rowhead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.wf-rowhead .wf-h2{margin-bottom:0}
.wf-all{font:600 14px 'Work Sans',sans-serif;color:var(--pink);text-decoration:none;white-space:nowrap}
.wf-all:hover{text-decoration:underline;text-underline-offset:3px}
.wf-strip{list-style:none;display:flex;gap:12px;margin:16px 0 0;padding:8px 2px 6px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#2a3a56 transparent}
.wf-strip li{position:relative;flex:0 0 112px}
.wf-strip a{display:block;color:var(--ink);text-decoration:none}
.wf-sart{position:relative;display:block;aspect-ratio:2/3;border-radius:7px;overflow:hidden;box-shadow:0 6px 16px rgba(0,0,0,.4)}
.wf-sart img{display:block;width:100%;height:100%;object-fit:cover}
.wf-sart .tlux-on,.wf-sart .ftouch-on{bottom:4px;left:4px;transform:scale(.72);transform-origin:bottom left}
.wf-stitle{display:block;margin-top:7px;font:600 12px/1.3 'Work Sans',sans-serif;color:var(--ink)}
.wf-strip .iv-new{top:-5px;right:-5px;font-size:10px;padding:3px 6px}

/* ── Send it (KEEP): heading left, the phone right ── */
.wf-sendgrid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:center}
/* The phone's steps, beside it: a vertical list of three cells, the lit one
   following the phone's scene (site.js). */
.wf-sendtext .hp-steps{flex-direction:column;gap:10px;width:auto;max-width:360px;margin:22px 0 0;padding:0}
.wf-sendtext .hp-step{padding:16px 18px;border-radius:16px;border:1px solid var(--w-line);background:var(--w-panel);text-align:left}
.wf-sendtext .hp-step.on{border-color:var(--pink);background:var(--pink-bg)}
.wf-sendtext .hp-step .hp-k{font:700 15px 'Work Sans',sans-serif}
.wf-sendtext .hp-step .hp-v{font-size:13.5px;line-height:1.5;color:var(--w-mid);margin-top:4px}

/* ── Price ── */
.wf .wf-bars{margin-top:16px;border-top:0}
.wf .wf-bars .barrow{display:flex;align-items:center;gap:12px;padding:6px 0;margin:2px 0;border:0}
.wf .wf-bars .nm{width:150px;flex-shrink:0;font:600 13px 'Work Sans',sans-serif;color:var(--ink)}
.wf .wf-bars .track{position:relative;flex:1;height:14px}
.wf .wf-bars .fill{border-radius:7px;background:#2a3a56;border:0}
.wf .wf-bars .fill.hi{background:rgba(42,58,86,.45);border:0}
.wf .wf-bars .amt{width:118px;flex-shrink:0;text-align:right;font:400 13px 'Work Sans',sans-serif;color:var(--w-mid)}
.wf .wf-bars .amt .u{font-size:11px;color:var(--w-soft)}
.wf .wf-bars .ours{padding:6px 0}
.wf .wf-bars .ours .nm{color:var(--pink);font-size:13px}
.wf .wf-bars .ours .fill{background:var(--pink);min-width:6px}
.wf .wf-bars .ours .amt{color:var(--pink);font-weight:700;font-size:13px}
.wf-partiful{margin:10px 0 0;font:500 14px 'Work Sans',sans-serif;color:var(--ink)}

/* ── Excuse list (KEEP) ── */
.wf .ticker{margin-top:12px}
.wf .ex .x{font-size:clamp(20px,2.1vw,26px)}
.wf .turn{margin-top:22px;gap:16px}
.wf .turn .big{font-size:clamp(22px,2.6vw,28px)}
.wf .turn .eng{font-size:13px}

/* ── Group chat (KEEP) ── */
.wf .split{margin-top:18px;gap:22px}
.wf .gcbox,.wf .tkbox{background:var(--w-panel);border:1px solid var(--w-line);border-radius:16px}
.wf .gcbox{min-height:0}

/* ── What comes back (KEEP), as the two-mode cells ── */
.wf-gets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:20px}
.wf-get{background:var(--w-panel);border:1px solid var(--w-line);border-radius:16px;padding:18px 20px}
.wf-get h3{margin:0 0 6px;font:700 15px 'Work Sans',sans-serif;color:var(--ink)}
.wf-get p{margin:0;font-size:13.5px;line-height:1.55;color:var(--w-mid);font-weight:400}

/* ── One card (KEEP) ── */
.wf-ex{display:grid;grid-template-columns:240px minmax(0,1fr);gap:36px;align-items:start;margin-top:20px}
.wf-excard{position:relative;display:block;border-radius:10px;overflow:hidden;box-shadow:0 14px 34px rgba(0,0,0,.5);position:sticky;top:84px}
.wf-excard img{display:block;width:100%;height:auto}
.wf-dl{margin:18px 0 0;border-top:1px solid var(--w-line)}
.wf-dl div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:6px 24px;padding:12px 0;border-bottom:1px solid var(--w-line);align-items:baseline}
.wf-dl dt{font:600 11px 'Work Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--acid)}
.wf-dl dd{margin:0;font-size:14px;line-height:1.55;color:var(--w-mid);font-weight:400}

/* ── The design system: two modes ── */
.wf-two{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:20px}
.wf-cell{display:flex;gap:18px;align-items:center;background:var(--w-panel);border:1px solid var(--w-line);border-radius:16px;padding:20px}
.wf-cellcard{position:relative;display:block;flex:0 0 120px;aspect-ratio:2/3;border-radius:8px;overflow:hidden;box-shadow:0 8px 20px rgba(0,0,0,.45)}
.wf-cellcard img{display:block;width:100%;height:100%;object-fit:cover}
.wf-cellcard .tlux-on,.wf-cellcard .ftouch-on{transform:scale(.8);transform-origin:bottom left}
.wf-cell h4{margin:0 0 6px;font:700 15px 'Work Sans',sans-serif;color:var(--ink)}
.wf-cell p{margin:0;font-size:13.5px;line-height:1.55;color:var(--w-mid);font-weight:400}

/* ── Questions ── */
.wf-faq{margin:12px 0 0;background:var(--w-panel);border:1px solid var(--w-line);border-radius:12px;padding:6px 20px}
.wf-faq div{padding:14px 0;border-bottom:1px solid var(--w-line)}
.wf-faq div:last-child{border-bottom:0}
.wf-faq dt{font:600 15px 'Work Sans',sans-serif;color:var(--ink);margin:0 0 4px}
.wf-faq dd{margin:0;font-size:14px;line-height:1.6;color:var(--w-mid);font-weight:400}

/* ── Final call to action ── */
.wf .wf-final{text-align:center}
.wf-final .wf-sub{margin:0 auto 20px}

/* ── Footer, on the same column ── */
body.hm .hs-foot .wrap{max-width:1180px;padding:0 40px 0 56px}

/* ── Phone and tablet: the wireframe is desktop only (min-width 1000px);
   the same parts, stacked. ── */
@media (max-width:999px){
  .wf .wf-hero{grid-template-columns:1fr;padding:40px 24px 28px}
  .wf-stack{height:auto;aspect-ratio:536/430;max-width:540px;width:100%}
  .wf-sc{width:39%}
  .wf-sc-1{left:1%;top:14%}
  .wf-sc-2{left:31%}
  .wf-sc-3{left:61.5%;top:16%}
  .wf-trust{padding:14px 24px 18px}
  .wf .wf-sec{padding:40px 24px 36px}
  .wf-wrap,body.hm .hs-foot .wrap{padding:0 24px}
  .wf-luxgrid,.wf-two,.wf-sendgrid{grid-template-columns:1fr}
  .wf-swcards{width:min(440px,100%);margin:0 auto}
  .wf-sendtext .hp-steps{flex-direction:row;max-width:none}
  .wf-sendtext .hp-step{flex:1;padding:12px}
  .wf-gets{grid-template-columns:1fr 1fr}
  .wf-ex{grid-template-columns:1fr}
  .wf-excard{position:relative;top:auto;max-width:260px}
}
@media (max-width:700px){
  .wf-h1{font-size:34px}
  .wf-h2{font-size:24px}
  .wf-h2-sm{font-size:20px}
  .wf-doors{grid-template-columns:1fr}
  .wf-door{min-height:0}
  .wf-gets{grid-template-columns:1fr}
  .wf-swbody{flex-direction:column;align-items:stretch}
  .wf-swcards{width:100%}
  .wf .wf-bars .nm{width:104px}
  .wf .wf-bars .amt{width:92px}
  .wf-dl div{grid-template-columns:1fr}
  .wf-cell{align-items:flex-start}
  .wf-cellcard{flex-basis:96px}
  .wf-rowhead{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){ .wf-sc{transition:none} }
/* The big switcher needs the full width: below 1150px the points go under it. */
@media (max-width:1150px){
  .wf-luxgrid{grid-template-columns:1fr}
  .wf-switch{max-width:760px}
}