:root {
  --ink: #20282c;
  --plum: #55233f;
  --plum-dark: #2b1725;
  --lavender: #c9b6c8;
  --white: #fff;
  --line: rgba(32, 40, 44, 0.18);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--white); color: var(--ink); font-family: Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input { border-radius: 0; font: inherit; }
svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
.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; }

.wordmark { --cut-color: var(--white); display: inline-flex; align-items: baseline; gap: .015em; color: var(--ink); font-size: 1.55rem; font-weight: 800; letter-spacing: .045em; line-height: 1; }
.logo-o { position: relative; display: inline-block; flex: 0 0 auto; margin: 0 .025em; font-size: .91em; line-height: 1; letter-spacing: 0; }
.logo-o::before { content: "O"; }
.logo-o::after { content: ""; position: absolute; width: .29em; height: .115em; right: -.035em; top: .015em; background: var(--cut-color); transform: rotate(-48deg); }

.site-header { position: relative; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; max-width: 1440px; margin: 0 auto; padding: 1.5rem 4.5vw; border-bottom: 1px solid var(--line); }
.brand-link { display: block; justify-self: start; line-height: 0; }
.brand-link img { display: block; width: 8rem; height: auto; }
.site-header nav { display: flex; gap: 2.25rem; font-size: .78rem; font-weight: 700; letter-spacing: .05em; }
.site-header nav a { position: relative; padding: .5rem 0; }
.site-header nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--plum); transition: right .25s ease; }
.site-header nav a:hover::after, .site-header nav a:focus-visible::after { right: 0; }
.header-cta { justify-self: end; padding: .85rem 1.25rem; border: 1px solid var(--ink); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; transition: .2s ease; }
.header-cta:hover, .header-cta:focus-visible { background: var(--ink); color: var(--white); }

.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(420px, .98fr); min-height: 760px; max-width: 1440px; margin: 0 auto; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero-copy { display: flex; flex-direction: column; justify-content: center; padding: 6rem 4.5vw; }
.eyebrow { display: flex; align-items: center; gap: .75rem; margin: 0 0 2.25rem; color: var(--plum); font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow span { width: 1.75rem; height: 1px; background: currentColor; }
.hero h1, .standard-intro h2, .faq-section h2, .waitlist-section h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(4.2rem, 7vw, 7rem); font-weight: 400; letter-spacing: -.055em; line-height: .88; text-transform: uppercase; }
.hero h1 .headline-accent, .standard-intro h2 .headline-accent { color: var(--plum); font-style: normal; font-weight: 400; }
.hero-lede { max-width: 36rem; margin: 2.25rem 0 0; color: #4f5557; font-family: Georgia, "Times New Roman", serif; font-size: 1.22rem; line-height: 1.65; }
.hero-actions { display: flex; align-items: center; gap: 1.8rem; margin-top: 2.35rem; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 1.2rem; padding: 1rem 1.35rem; font-size: .76rem; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }
.button-primary { background: var(--plum); color: white; }
.button-primary svg { transition: transform .2s ease; }
.button-primary:hover svg, .button-primary:focus-visible svg { transform: translateX(4px); }
.text-link { padding: .5rem 0; border-bottom: 1px solid currentColor; font-size: .78rem; font-weight: 700; }
.microcopy { margin: 1.3rem 0 0; color: #7b7c79; font-size: .67rem; letter-spacing: .03em; }

.hero-product { position: relative; min-height: 640px; overflow: hidden; background: #d8cad6; }
.hero-product img { width: 100%; height: 100%; min-height: 640px; display: block; object-fit: cover; object-position: center; }
.orbit { position: absolute; border: 1px solid rgba(85,35,63,.18); border-radius: 50%; }
.orbit-one { width: 520px; height: 520px; right: -150px; top: 28px; }
.orbit-two { width: 330px; height: 330px; left: -80px; bottom: -70px; }
.product-shadow { position: absolute; z-index: 1; width: 510px; height: 78px; left: 50%; bottom: 70px; transform: translateX(-50%); background: rgba(42,23,37,.22); filter: blur(26px); border-radius: 50%; }
.carton { --cut-color: #fff; position: absolute; z-index: 3; width: min(72%, 490px); height: 310px; left: 8%; bottom: 110px; padding: 3.5rem 2.5rem; overflow: hidden; background: #fff; border: 1px solid rgba(85,35,63,.14); box-shadow: 0 28px 55px rgba(60,37,52,.18); }
.carton-top { position: absolute; left: -1px; right: -1px; top: -1px; height: 18px; background: linear-gradient(90deg, #af9caf, var(--plum)); clip-path: polygon(2% 0, 98% 0, 100% 100%, 0 100%); }
.pack-wordmark { position: relative; z-index: 2; font-size: 1.65rem; }
.pack-title { position: relative; z-index: 2; margin-top: 1.25rem; color: var(--plum); font-size: 2.6rem; font-weight: 600; letter-spacing: .14em; }
.pack-rule { position: relative; z-index: 2; width: 62%; height: 1px; margin-top: 1.25rem; background: rgba(32,40,44,.55); }
.pack-specs { position: relative; z-index: 2; display: flex; align-items: center; gap: 1.5rem; margin-top: 1.35rem; color: var(--plum); font-size: .72rem; font-weight: 700; letter-spacing: .13em; }
.pack-specs b { font-size: 1.35rem; letter-spacing: 0; }
.pack-specs span { width: 1px; height: 1.8rem; background: rgba(32,40,44,.45); }
.pack-o, .waitlist-o, .open-o { position: absolute; border: 34px solid currentColor; border-radius: 50%; }
.pack-o { width: 260px; height: 260px; right: -90px; bottom: -80px; color: rgba(159,132,159,.43); }
.pack-o::after, .waitlist-o::after, .open-o::after { content: ""; position: absolute; background: inherit; }
.pack-o::after { width: 88px; height: 42px; right: -48px; top: 8px; background: #fff; transform: rotate(-46deg); }
.stick-pack { --cut-color: #fff; position: absolute; z-index: 4; display: flex; flex-direction: column; align-items: center; width: 132px; height: 440px; right: 8%; bottom: 76px; padding-top: 4.8rem; overflow: hidden; background: #fff; box-shadow: 0 25px 45px rgba(60,37,52,.22); }
.stick-crimp { position: absolute; z-index: 5; left: 0; right: 0; height: 30px; background: repeating-linear-gradient(90deg, #55233f 0 2px, #70435e 2px 4px); }
.stick-crimp.top { top: 0; } .stick-crimp.bottom { bottom: 0; }
.stick-wordmark { position: relative; z-index: 3; font-size: 1rem; }
.stick-rule { position: relative; z-index: 3; width: 55px; height: 1px; margin: 1.2rem 0; background: rgba(32,40,44,.45); }
.stick-rule.short { width: 28px; margin: 1rem 0; }
.stick-title { position: relative; z-index: 3; color: var(--plum); font-size: .95rem; font-weight: 800; letter-spacing: .1em; }
.stick-pack b { position: relative; z-index: 3; color: var(--plum); font-size: 1rem; }
.stick-pack small { position: relative; z-index: 3; margin-top: .45rem; font-size: .5rem; letter-spacing: .11em; }
.stick-wave { position: absolute; z-index: 1; width: 220px; height: 130px; left: -35px; bottom: 22px; border-radius: 50%; transform: rotate(-18deg); }
.stick-wave.one { background: #c8b5c7; }
.stick-wave.two { left: 40px; bottom: -20px; background: var(--plum); }
.concept-label { position: absolute; z-index: 5; left: 2rem; bottom: 1.5rem; margin: 0; color: rgba(43,23,37,.72); font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; }

.proof-bar { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 1440px; margin: 0 auto; background: var(--white); border-bottom: 1px solid var(--line); }
.proof-bar > div { display: flex; align-items: center; gap: 1rem; min-height: 104px; padding: 1.5rem 2.2rem; border-right: 1px solid var(--line); }
.proof-bar > div:last-child { border-right: 0; }
.proof-bar strong { color: var(--plum); font-family: Georgia, "Times New Roman", serif; font-size: 2.25rem; font-weight: 400; }
.proof-bar span { max-width: 7rem; color: #656967; font-size: .7rem; font-weight: 700; letter-spacing: .05em; line-height: 1.4; text-transform: uppercase; }

.section-pad { max-width: 1440px; margin: 0 auto; padding: 8rem 7vw; }
.section-label { margin: 0 0 3.5rem; color: var(--plum); font-size: .63rem; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
.problem-section { background: var(--white); }
.problem-grid { display: grid; grid-template-columns: 1.1fr .8fr; gap: 9vw; align-items: start; }
.problem-grid h2 { max-width: 680px; margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.8rem, 4.8vw, 5rem); font-weight: 400; letter-spacing: -.045em; line-height: .98; }
.problem-copy { padding-top: .4rem; }
.problem-copy > p { margin: 0; color: #555b5c; font-family: Georgia, "Times New Roman", serif; font-size: 1.18rem; line-height: 1.75; }
.problem-copy .callout { margin-top: 2.5rem; padding: 1.5rem 0 0 1.6rem; color: var(--plum); border-top: 1px solid var(--lavender); border-left: 3px solid var(--plum); font-size: 1.05rem; }

.standard-section { display: grid; grid-template-columns: .92fr 1.08fr; gap: 8vw; background: var(--plum-dark); color: white; }
.section-label.light, .eyebrow.light { color: #d9cad7; }
.standard-intro h2 { font-size: clamp(3.2rem, 5vw, 5.5rem); }
.standard-intro h2 .headline-accent { color: #d3bed0; }
.standard-intro > p:last-child { max-width: 30rem; margin: 2.2rem 0 0; color: #cfc5cc; font-family: Georgia, "Times New Roman", serif; font-size: 1.1rem; line-height: 1.7; }
.standards-list { border-top: 1px solid rgba(255,255,255,.22); }
.standards-list article { padding: 1.8rem .4rem; border-bottom: 1px solid rgba(255,255,255,.22); }
.standards-list h3 { margin: 0 0 .65rem; font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; }
.standards-list p { margin: 0; color: #cfc5cc; font-family: Georgia, "Times New Roman", serif; font-size: 1rem; line-height: 1.6; }

.founder-section { padding-top: 6rem; padding-bottom: 6rem; background: #d8cad6; }
.founder-card { position: relative; max-width: 1080px; margin: 0 auto; padding: 6rem 7vw; overflow: hidden; background: var(--white); }
.founder-card blockquote { position: relative; z-index: 2; max-width: 850px; margin: 0; color: var(--plum); font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.4rem, 4.4vw, 4.4rem); letter-spacing: -.035em; line-height: 1.08; }
.founder-note { position: relative; z-index: 2; max-width: 610px; margin: 3rem 0 0; color: #5f6362; font-family: Georgia, "Times New Roman", serif; font-size: 1.1rem; line-height: 1.7; }
.signature { position: relative; z-index: 2; display: flex; align-items: baseline; gap: 1rem; margin: 2rem 0 0; color: var(--plum); font-family: Georgia, "Times New Roman", serif; font-size: 1.6rem; }
.signature span { color: #797b78; font-family: Arial, Helvetica, sans-serif; font-size: .6rem; font-style: normal; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.open-o { width: 360px; height: 360px; right: -130px; top: -120px; color: rgba(85,35,63,.07); border-width: 55px; }
.open-o::after { width: 120px; height: 55px; right: -63px; top: 11px; background: var(--white); transform: rotate(-46deg); }

.faq-section { display: grid; grid-template-columns: .7fr 1.3fr; gap: 8vw; background: var(--white); }
.faq-section h2 { font-size: clamp(3.3rem, 5.6vw, 6rem); text-transform: none; }
.faq-list { border-top: 1px solid var(--ink); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.8rem 0; cursor: pointer; font-family: Georgia, "Times New Roman", serif; font-size: 1.25rem; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { color: var(--plum); font-family: Arial, Helvetica, sans-serif; font-size: 1.3rem; transition: transform .2s ease; }
.faq-list details[open] summary span { transform: rotate(45deg); }
.faq-list details p { max-width: 690px; margin: -.5rem 3rem 1.8rem 0; color: #5d6262; font-family: Georgia, "Times New Roman", serif; font-size: 1rem; line-height: 1.7; }

.waitlist-section { position: relative; min-height: 610px; padding: 8rem 6vw; overflow: hidden; background: var(--plum); color: white; }
.waitlist-inner { position: relative; z-index: 2; max-width: 740px; margin: 0 auto; text-align: center; }
.waitlist-inner .eyebrow { justify-content: center; }
.waitlist-section h2 { font-size: clamp(3.6rem, 6.8vw, 6.8rem); }
.waitlist-inner > p:not(.eyebrow) { max-width: 530px; margin: 2rem auto 0; color: #dfd1dc; font-family: Georgia, "Times New Roman", serif; font-size: 1.08rem; line-height: 1.6; }
.waitlist-section form { display: flex; max-width: 610px; margin: 2.2rem auto 0; padding: .4rem; background: white; }
.waitlist-section input { flex: 1; min-width: 0; padding: 1rem; color: var(--ink); border: 0; outline: 0; }
.waitlist-section input:focus { box-shadow: inset 0 0 0 2px var(--lavender); }
.waitlist-section button { display: flex; align-items: center; gap: .85rem; padding: .9rem 1.2rem; color: white; background: var(--ink); border: 0; cursor: pointer; font-size: .7rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.waitlist-section small { display: block; margin-top: 1rem; color: #cbb8c7; font-size: .6rem; }
.waitlist-section small a { padding-bottom: .1rem; color: white; border-bottom: 1px solid currentColor; }
.form-success { display: flex; flex-direction: column; gap: .5rem; max-width: 610px; margin: 2.2rem auto 0; padding: 1.4rem; color: var(--ink); background: white; }
.form-success strong { color: var(--plum); font-family: Georgia, "Times New Roman", serif; font-size: 1.2rem; }
.form-success span { font-size: .75rem; }
.form-error { max-width: 610px; margin: 1rem auto 0; color: #fff; font-size: .75rem; }
.waitlist-section button:disabled { cursor: wait; opacity: .72; }
.waitlist-o { width: 620px; height: 620px; right: -210px; top: -170px; color: rgba(255,255,255,.055); border-width: 90px; }
.waitlist-o::after { width: 200px; height: 90px; right: -105px; top: 20px; background: var(--plum); transform: rotate(-46deg); }

footer { display: grid; grid-template-columns: 1fr auto; gap: 3rem; padding: 4rem 6vw 2.5rem; color: white; background: #21171e; }
.wordmark-light { --cut-color: #21171e; color: white; font-size: 1.65rem; }
.footer-wordmark { display: block; width: 8.5rem; height: auto; filter: brightness(0) invert(1); }
.footer-brand p { margin: .9rem 0 0; color: #b9aeb6; font-family: Georgia, "Times New Roman", serif; font-size: .95rem; }
.footer-meta { display: grid; grid-template-columns: repeat(3, auto); gap: 2rem; align-items: start; }
.footer-meta p { margin: .35rem 0 0; color: #b9aeb6; font-size: .58rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.footer-controls { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 1.25rem; }
.footer-controls a, .footer-controls button { padding: .2rem 0; color: #d8cdd4; background: transparent; border: 0; border-bottom: 1px solid currentColor; cursor: pointer; font-size: .62rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.footer-controls a:hover, .footer-controls button:hover { color: white; }
.footer-controls a:focus-visible, .footer-controls button:focus-visible { color: white; outline: 3px solid var(--lavender); outline-offset: 4px; }
.legal { grid-column: 1 / -1; margin: 2rem 0 0; padding-top: 1.5rem; color: #8f858c; border-top: 1px solid rgba(255,255,255,.12); font-size: .62rem; line-height: 1.5; }

@media (max-width: 1020px) {
  .site-header { grid-template-columns: 1fr auto; }
  .site-header nav { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; gap: 1.5rem; margin-top: 1rem; overflow-x: auto; }
  .site-header nav a { flex: 0 0 auto; }
  .header-cta { grid-column: 2; grid-row: 1; }
  .hero { grid-template-columns: 1fr; }
  .hero-copy { padding-top: 5rem; padding-bottom: 5rem; }
  .hero-product { min-height: 620px; }
  .hero-product img { min-height: 620px; }
  .proof-bar { grid-template-columns: repeat(2, 1fr); }
  .proof-bar > div:nth-child(2) { border-right: 0; }
  .proof-bar > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .standard-section, .faq-section { grid-template-columns: 1fr; }
  .standard-intro { max-width: 680px; }
  .footer-meta { grid-template-columns: 1fr; gap: .5rem; }
}

@media (max-width: 700px) {
  .site-header { padding: 1.2rem 5vw; }
  .brand-link img { width: 7rem; }
  .header-cta { padding: .7rem .8rem; font-size: .6rem; }
  .site-header nav { gap: 1.25rem; font-size: .65rem; }
  .wordmark { font-size: 1.25rem; }
  .hero { min-height: 0; }
  .hero-copy { padding: 4rem 6vw; }
  .hero h1 { font-size: 3.7rem; }
  .hero-lede { font-size: 1.04rem; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .text-link { align-self: flex-start; }
  .hero-product { min-height: 360px; }
  .hero-product img { min-height: 360px; object-position: 46% center; }
  .carton { width: 82%; height: 245px; left: 4%; bottom: 105px; padding: 2.8rem 1.5rem; }
  .pack-wordmark { font-size: 1.2rem; }
  .pack-title { margin-top: 1rem; font-size: 1.7rem; }
  .pack-rule { margin-top: 1rem; }
  .pack-specs { gap: .75rem; margin-top: 1rem; font-size: .55rem; }
  .pack-specs b { font-size: 1rem; }
  .pack-o { width: 190px; height: 190px; border-width: 27px; }
  .stick-pack { width: 92px; height: 350px; right: 3%; bottom: 68px; padding-top: 4rem; }
  .stick-wordmark { font-size: .7rem; }
  .stick-title { font-size: .68rem; }
  .stick-rule { margin: .85rem 0; }
  .concept-label { left: 1rem; bottom: 1rem; font-size: .48rem; }
  .proof-bar strong { font-size: 1.8rem; }
  .proof-bar > div { min-height: 90px; padding: 1.2rem; }
  .section-pad { padding: 5.5rem 6vw; }
  .problem-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .problem-grid h2 { font-size: 3rem; }
  .standard-section { gap: 4rem; }
  .founder-card { padding: 4rem 7vw; }
  .founder-card blockquote { font-size: 2.35rem; }
  .waitlist-section { min-height: 580px; padding: 6rem 6vw; }
  .waitlist-section h2 { font-size: 3.5rem; }
  .waitlist-section form { flex-direction: column; background: transparent; gap: .6rem; }
  .waitlist-section input, .waitlist-section button { width: 100%; min-height: 52px; }
  .waitlist-section button { justify-content: center; }
  footer { grid-template-columns: 1fr; }
  .footer-controls { flex-wrap: wrap; justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}