:root{
  --bg: #F5F5F2;
  --paper: #FBFBF8;
  --ink: #111111;
  --ink-2: #2a2a28;
  --mute: #8a8a86;
  --rule: #1f1f1d;
  --hair: rgba(17,17,17,.12);
  --hot: #FF3D81;
  --hot-ink: #1a0710;
  --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --serif: "Instrument Serif", "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink)}
body{
  font-family:var(--display);
  font-feature-settings:"ss01","ss02","cv11";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:var(--hot);color:#fff}
a{color:inherit}

.page{max-width:1320px;margin:0 auto;padding:0 40px}
@media (max-width: 720px){ .page{padding:0 22px} }

.strip{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 0 16px;border-bottom:1px solid var(--hair);
  font:500 11px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;
}
.strip .lhs{display:flex;align-items:center;gap:14px;color:var(--ink)}
.strip .dot{width:7px;height:7px;border-radius:50%;background:var(--hot);box-shadow:0 0 0 4px rgba(255,61,129,.18);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 4px rgba(255,61,129,.18)}50%{box-shadow:0 0 0 9px rgba(255,61,129,.04)}}
.strip .rhs{color:var(--mute)}
.strip .rhs a{text-decoration:none;border-bottom:1px solid var(--hair);padding-bottom:2px;transition:color .2s, border-color .2s}
.strip .rhs a:hover{color:var(--ink);border-color:var(--ink)}
.strip .sep{color:var(--mute)}

.hero{
  display:grid;grid-template-columns: 1.15fr .85fr;gap:56px;
  padding:74px 0 80px;align-items:start;
}
@media (max-width: 980px){ .hero{grid-template-columns:1fr;gap:36px} }

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);
}
.eyebrow .bar{width:22px;height:1px;background:var(--mute)}

.wordmark{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(72px, 13.2vw, 188px);
  line-height:.86;
  letter-spacing:-.045em;
  margin:22px 0 0;
  color:var(--ink);
}
.wordmark .me{
  font-family:var(--serif);font-style:italic;font-weight:400;
  letter-spacing:-.02em;color:var(--ink);
  display:inline-block;transform:translateY(.02em);
}
.wordmark .me::after{
  content:"";display:block;height:14px;margin-top:-6px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 14' preserveAspectRatio='none'><path d='M2 8 Q 18 -2 36 8 T 70 8 T 104 8 T 138 8 T 172 8 T 206 8' fill='none' stroke='%23FF3D81' stroke-width='3' stroke-linecap='round'/></svg>") center/100% 100% no-repeat;
  opacity:.95;
}
.wordmark .tld{
  font-family:var(--display);font-weight:400;color:var(--mute);
  font-size:.22em;letter-spacing:-.01em;display:inline-block;
  transform:translateY(-1em);margin-left:.15em;
}

.tagline{
  margin:28px 0 0;max-width:520px;
  font-size:20px;line-height:1.42;color:var(--ink-2);font-weight:400;
}
.tagline em{font-family:var(--serif);font-style:italic;color:var(--ink)}

.cta-row{
  margin-top:38px;display:flex;align-items:center;gap:22px;flex-wrap:wrap;
}
.buy{
  appearance:none;border:0;cursor:pointer;
  background:var(--ink);color:#fff;
  padding:20px 30px 20px 28px;
  border-radius:999px;
  font:600 17px/1 var(--display);letter-spacing:-.005em;
  display:inline-flex;align-items:center;gap:14px;
  transition:transform .18s ease, background .2s ease;
  text-decoration:none;
}
.buy:hover{transform:translateY(-1px);background:var(--hot);color:#fff}
.buy .arrow{
  width:26px;height:26px;border-radius:50%;background:#fff;color:var(--ink);
  display:grid;place-items:center;font-size:14px;transition:transform .25s ease;
}
.buy:hover .arrow{transform:translateX(3px) rotate(-8deg)}

.micro{font:500 11px/1.4 var(--mono);color:var(--mute);letter-spacing:.04em;text-transform:uppercase}

.sticker-wrap{position:relative;display:inline-block}
.sticker{
  position:relative;display:inline-flex;align-items:baseline;
  background:var(--hot);color:#fff;
  padding:18px 26px 20px;border-radius:14px;
  transform:rotate(-6deg);
  box-shadow: 0 14px 30px -16px rgba(255,61,129,.6), 0 1px 0 rgba(0,0,0,.05);
  font-family:var(--display);font-weight:700;
  transition:transform .35s cubic-bezier(.2,.9,.3,1.4);
  cursor:default;
}
.sticker:hover{transform:rotate(-2deg) scale(1.04)}
.sticker .cur{font-size:22px;font-weight:600;opacity:.9;margin-right:4px;transform:translateY(-.05em)}
.sticker .num{font-size:54px;line-height:.9;letter-spacing:-.04em}
.sticker .hole{
  position:absolute;left:-8px;top:50%;transform:translateY(-50%);
  width:14px;height:14px;border-radius:50%;background:var(--bg);
  box-shadow: inset 0 0 0 1px var(--hair);
}
.sticker::after{
  content:"fixed price · once";position:absolute;left:50%;bottom:-22px;transform:translateX(-50%);
  font:500 9.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);
  white-space:nowrap;
}

.heroart{
  position:relative;
  padding-top:8px;
}
.frame{
  position:relative;width:100%;aspect-ratio: 4/5;
  background:var(--paper);
  border:1px solid var(--hair);
  border-radius:22px;
  overflow:hidden;
  box-shadow: 0 30px 60px -40px rgba(0,0,0,.25);
}
.frame img{width:100%;height:100%;object-fit:cover;display:block}
.frame .cornermark{
  position:absolute;top:14px;left:16px;z-index:3;
  font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);
}
.frame .cornermark.rt{left:auto;right:16px}

.float-tag{
  position:absolute;
  background:#fff;border:1px solid var(--hair);
  padding:9px 14px 10px;border-radius:999px;
  font:500 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);
  box-shadow: 0 12px 28px -18px rgba(0,0,0,.45);
  display:inline-flex;align-items:center;gap:8px;
}
.float-tag .star{color:var(--hot);font-size:14px;line-height:0;transform:translateY(1px)}
.float-tag.a{top:-14px;right:24px;transform:rotate(6deg);animation:bob 5.5s ease-in-out infinite}
.float-tag.b{bottom:32px;left:-22px;transform:rotate(-7deg);animation:bob 4.6s ease-in-out -1.4s infinite}
.float-tag.c{bottom:-18px;right:54px;transform:rotate(3deg);animation:bob 6.2s ease-in-out -2.7s infinite}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -6px}}

.marquee{
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:22px 0;overflow:hidden;
  background:var(--ink);color:#fff;
}
.marquee .track{
  display:flex;gap:48px;width:max-content;
  animation: scroll 38s linear infinite;
  font:600 32px/1 var(--display);letter-spacing:-.02em;
  align-items:center;
}
.marquee .track span.phrase{display:inline-flex;align-items:center;gap:48px;white-space:nowrap}
.marquee .track i{
  font-family:var(--serif);font-style:italic;font-weight:400;color:var(--hot);
  font-size:.95em;
}
.marquee .track .mdot{width:8px;height:8px;border-radius:50%;background:#fff;display:inline-block}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.section{padding:96px 0}
.sect-head{
  display:grid;grid-template-columns: 200px 1fr;gap:48px;align-items:end;
  padding-bottom:36px;border-bottom:1px solid var(--hair);margin-bottom:48px;
}
@media (max-width:720px){ .sect-head{grid-template-columns:1fr;gap:14px} }
.sect-num{
  font:500 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);
}
.sect-title{
  margin:0;font-family:var(--display);font-weight:600;
  font-size:clamp(36px, 5.4vw, 64px);line-height:.98;letter-spacing:-.03em;
  max-width:18ch;
}
.sect-title em{font-family:var(--serif);font-style:italic;font-weight:400}

.facts{
  display:grid;grid-template-columns: repeat(4, 1fr);gap:0;
  border-top:1px solid var(--hair);
}
@media (max-width:980px){ .facts{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .facts{grid-template-columns:1fr} }
.fact{
  padding:28px 28px 32px;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);
  display:flex;flex-direction:column;gap:14px;min-height:230px;
  transition:background .25s ease;
}
.fact:hover{background:var(--paper)}
.fact:nth-child(4n){border-right:0}
.fact .k{font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.fact .v{
  font-family:var(--display);font-weight:600;
  font-size:54px;line-height:.95;letter-spacing:-.035em;color:var(--ink);
  margin-top:auto;
}
.fact .v em{font-family:var(--serif);font-style:italic;font-weight:400}
.fact .v .pop{color:var(--hot)}
.fact .note{font-size:14px;line-height:1.4;color:var(--ink-2);max-width:24ch}

.uses{
  display:grid;grid-template-columns:repeat(6,1fr);gap:18px;
}
@media (max-width:980px){ .uses{grid-template-columns:repeat(2,1fr)} }
.use{
  grid-column: span 2;
  background:var(--paper);border:1px solid var(--hair);border-radius:18px;
  padding:24px;display:flex;flex-direction:column;gap:14px;
  min-height:300px;position:relative;overflow:hidden;
  transition:transform .25s ease, border-color .2s ease;
}
.use:hover{transform:translateY(-3px);border-color:var(--ink)}
.use.tall{grid-column:span 3;min-height:340px}
.use.wide{grid-column:span 4}
@media (max-width:980px){ .use, .use.tall, .use.wide{grid-column:span 2} }

.use .tag{
  font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);
  display:flex;align-items:center;gap:10px;
}
.use .tag .n{
  width:22px;height:22px;border-radius:50%;background:var(--ink);color:#fff;
  display:grid;place-items:center;font-size:10px;font-weight:600;letter-spacing:0;
}
.use h3{
  margin:0;font-family:var(--display);font-weight:600;
  font-size:30px;line-height:1.02;letter-spacing:-.025em;
}
.use h3 em{font-family:var(--serif);font-style:italic;font-weight:400}
.use p{margin:0;color:var(--ink-2);font-size:14.5px;line-height:1.5;max-width:30ch}
.use .spacer{flex:1}
.use .mini{
  align-self:flex-start;font:500 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);background:#fff;border:1px solid var(--hair);padding:7px 11px;border-radius:999px;
}
.use .mini .h{color:var(--hot);margin-right:6px}

.use .thumb{
  position:relative;height:130px;border-radius:12px;overflow:hidden;
  border:1px solid var(--hair);background:#fff;
}
.use .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.use.tall .thumb{height:220px}
.use.tall.portrait .thumb{height:280px}

.closer{
  text-align:center;padding:120px 0 80px;
  border-top:1px solid var(--hair);
}
.closer .big{
  font-family:var(--display);font-weight:700;
  font-size:clamp(56px, 9vw, 132px);line-height:.9;letter-spacing:-.04em;
  margin:0;
}
.closer .big em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--hot)}
.closer .sub{margin:22px auto 36px;max-width:46ch;color:var(--ink-2);font-size:18px;line-height:1.45}
.closer .row{display:inline-flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:center}

.foot{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:28px 0 36px;border-top:1px solid var(--hair);
  font:500 11px/1.5 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--mute);
  flex-wrap:wrap;
}
.foot a{color:var(--mute);text-decoration:none;border-bottom:1px solid var(--hair);padding-bottom:2px}
.foot a:hover{color:var(--ink);border-color:var(--ink)}

.corner-heart{
  position:fixed;left:14px;bottom:14px;z-index:5;
  font-family:var(--serif);font-style:italic;font-size:13px;color:var(--mute);
  display:flex;align-items:center;gap:8px;pointer-events:none;
}
.corner-heart .h{color:var(--hot);font-size:14px;animation:beat 1.8s ease-in-out infinite}
@keyframes beat{0%,100%{transform:scale(1)}30%{transform:scale(1.3)}60%{transform:scale(.95)}}

.nowrap{white-space:nowrap}