@font-face{font-family:"Bricolage";src:url(/assets/fonts/bricolage-grotesque-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Bricolage";src:url(/assets/fonts/bricolage-grotesque-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"DM Sans";src:url(/assets/fonts/dm-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"DM Sans";src:url(/assets/fonts/dm-sans-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"DM Sans";src:url(/assets/fonts/dm-sans-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --paper:#FBF7EF; --card:#FFFFFF; --ink:#1D1A16; --muted:#5F584E; --line:#E9E1D3; --dot:#E4DACA;
  --coral:#E0523A; --coral-dk:#C3402A; --btn:#C84A32; --btn-hover:#A93A25; --sun:#F5B51B; --sage:#6F8C5F; --sky:#3D7BF0;
  --r:18px; --shadow:0 1px 2px rgba(40,30,15,.06),0 10px 30px rgba(40,30,15,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);background-image:radial-gradient(var(--dot) 1.1px,transparent 1.2px);background-size:22px 22px;color:var(--ink);font:400 17px/1.6 "DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:3px}
::selection{background:rgba(245,181,27,.45);color:var(--ink)}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px}
.btn:focus-visible{outline-offset:3px;border-radius:12px}
input{caret-color:var(--btn);accent-color:var(--btn)}
h1,h2,h3{font-family:"Bricolage","DM Sans",sans-serif;line-height:1.08;margin:0;letter-spacing:-.015em}
h1{font-weight:800;font-size:clamp(38px,5.4vw,68px);letter-spacing:-.025em}
h2{font-weight:800;font-size:clamp(30px,3.6vw,44px)}
h3{font-weight:700;font-size:20px}
p{margin:0}
svg.sprite{position:absolute;width:0;height:0;overflow:hidden}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.eyebrow{font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--coral-dk)}

/* buttons: one shape and one height on the whole page, width follows the text */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:50px;padding:0 24px;border-radius:12px;font:700 16px/1 "DM Sans",sans-serif;text-decoration:none;border:2px solid transparent;transition:background .15s,border-color .15s,transform .15s;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--btn);color:#fff}
.btn-primary:hover{background:var(--btn-hover)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-sm{padding:0 20px}

/* header */
.top{position:sticky;top:0;z-index:20;background:rgba(251,247,239,.92);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.brand-img{height:52px;width:auto;display:block}
.brand-name{font:800 24px/1 "Bricolage",sans-serif;letter-spacing:-.02em}
.nav{display:flex;align-items:center;gap:28px}
.nav a{text-decoration:none;font-weight:500;font-size:16px}
.nav a:not(.btn):hover{color:var(--coral-dk)}
.menu-btn{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:#fff;padding:0;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.menu-btn span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px}

/* hero */
.hero{padding:56px 0 28px}
.hero-in{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.hero h1{margin:14px 0 20px}
.hl{background:linear-gradient(transparent 62%,rgba(245,181,27,.55) 62%);padding:0 .06em}
.lead{font-size:19px;color:var(--muted);max-width:560px}
.ticks{list-style:none;padding:0;margin:24px 0 30px;display:flex;flex-wrap:wrap;gap:10px 22px;font-weight:500}
.ticks li{display:flex;align-items:center;gap:8px}
.ticks svg{width:22px;height:22px;padding:3px;border-radius:50%;background:var(--coral);color:#fff;stroke-width:3}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
.micro{margin-top:14px;font-size:14px;color:var(--muted)}
.hero-media{position:relative;margin:0;padding:22px 26px 28px}
.video-card{border-radius:24px;overflow:hidden;box-shadow:0 2px 4px rgba(40,30,15,.08),0 24px 60px rgba(40,30,15,.18);aspect-ratio:1/1;background:#e9e4dc}
.video-card video{width:100%;height:100%;object-fit:cover}
.chip{position:absolute;display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:10px 16px;font-weight:600;font-size:15px;box-shadow:var(--shadow);white-space:nowrap}
.chip b{font-family:"Bricolage",sans-serif;font-size:18px;color:var(--coral-dk)}
.chip svg{color:var(--sage)}
.chip-b{left:0;top:9%}
.chip-c{right:0;bottom:6px}
.nw{white-space:nowrap}

/* sections */
.sec{padding:28px 0}
.sec-head{max-width:720px;margin-bottom:32px}
.sec-head p{margin-top:12px;font-size:18px;color:var(--muted)}

.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.step{padding:26px}
.step-ico,.rule-ico{flex:none;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:14px;background:#FDEBE6;color:var(--coral-dk)}
.step-ico svg,.rule-ico svg{width:24px;height:24px}
.step h3{margin:18px 0 8px;display:flex;align-items:center;gap:10px}
.num{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;font:700 14px/1 "DM Sans",sans-serif}
.step p{color:var(--muted)}

.example{display:grid;grid-template-columns:1.2fr .8fr;gap:20px;margin-top:20px;align-items:stretch}
.ask{padding:30px;display:flex;flex-direction:column}
.ask-label{font-weight:700;font-size:13px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.ask-text{margin:12px 0 0;padding:18px 20px;background:#F4EFE6;border-radius:16px 16px 16px 4px;font-size:18px;line-height:1.5}
.checks{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:24px}
.checks span{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:#EEF3EA;color:#3E5634;font-weight:600;font-size:14px}
.checks svg{width:16px;height:16px;stroke-width:2.6}
.ask-out{margin-top:28px;padding-top:24px;border-top:1px dashed var(--line)}
.ask-out ul,.plan ul,.pro ul{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:10px}
.ask-out li,.plan li,.pro li{display:flex;gap:10px;align-items:flex-start}
.ask-out svg,.plan svg,.pro li svg{margin-top:3px;color:var(--sage);stroke-width:2.6}
.shot{margin:0;overflow:hidden;display:flex;flex-direction:column}
.shot img{width:100%;height:auto}
.shot figcaption,.pro-media figcaption{padding:12px 18px;font-size:14px;color:var(--muted);border-top:1px solid var(--line)}

.themes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.theme{overflow:hidden;display:flex;flex-direction:column}
.theme img{width:100%;aspect-ratio:4/5;object-fit:cover}
.theme-body{padding:20px 22px 24px}
.theme-body p{margin-top:6px;color:var(--muted)}
.note-line{display:flex;align-items:flex-start;gap:10px;margin-top:22px;color:var(--muted)}
.note-line svg{margin-top:3px}
.note-line svg{color:var(--ink)}

.rules{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.rule{display:flex;gap:16px;align-items:flex-start;padding:22px;background:rgba(255,255,255,.7);border:1px solid var(--line);border-radius:var(--r)}
.rule h3{font-size:18px;margin:2px 0 6px}
.rule p{color:var(--muted);font-size:16px}

.pro{display:grid;grid-template-columns:.9fr 1.1fr;gap:36px;align-items:center;margin-top:24px;padding:36px}
.pro h3{font-size:clamp(24px,2.6vw,32px);font-weight:800;margin:10px 0 6px}
.pro ul{margin-top:18px;gap:14px}
.pro-media{margin:0;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.pro-media img{width:100%;height:auto}
.pro-media figcaption{display:grid;grid-template-columns:47.6fr 4.8fr 47.6fr;text-align:center;padding:10px 0}

.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.plan{padding:30px;display:flex;flex-direction:column}
.plan .price{margin:14px 0 2px;display:flex;align-items:baseline;gap:4px}
.plan .price b{font:800 48px/1 "Bricolage",sans-serif;letter-spacing:-.02em}
.plan .price span{color:var(--muted);font-weight:500}
.plan-sub{font-weight:700}
.plan ul{margin:20px 0 28px}
.plan .btn{margin-top:auto;width:100%}
.plan-pro{border:2px solid var(--coral);box-shadow:0 2px 4px rgba(224,82,58,.1),0 18px 44px rgba(224,82,58,.16)}
.fine{margin-top:20px;font-size:15px;color:var(--muted);max-width:68ch}

.faq{display:grid;gap:12px;max-width:860px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:0 22px}
.faq summary{cursor:pointer;list-style:none;padding:18px 32px 18px 0;font-weight:700;font-size:18px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:4px;top:50%;width:10px;height:10px;border-right:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details p{padding:0 0 20px;color:var(--muted)}

.final{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:24px;padding:44px 48px;overflow:hidden}
.final p{margin:14px 0 26px;font-size:18px;color:var(--muted);max-width:460px}
.fan{position:relative;height:300px}
.fan img{position:absolute;top:10px;width:200px;aspect-ratio:4/5;object-fit:cover;border-radius:12px;box-shadow:0 12px 30px rgba(40,30,15,.2);border:4px solid #fff}
.fan img:nth-child(1){left:calc(50% - 250px);transform:rotate(-8deg)}
.fan img:nth-child(2){left:calc(50% - 100px);top:0;transform:rotate(1deg);z-index:2}
.fan img:nth-child(3){left:calc(50% + 50px);transform:rotate(9deg);z-index:1}

.foot{border-top:1px solid var(--line);margin-top:40px;padding:36px 0 44px;background:rgba(251,247,239,.9)}
.foot-in{display:grid;grid-template-columns:1fr auto;gap:18px 40px}
.foot p{margin-top:12px;color:var(--muted);font-size:15px}
.foot nav{display:flex;gap:24px;align-items:center;font-weight:500;margin-top:-10px}
.foot nav a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px;padding:0 2px}
.foot nav a:hover{color:var(--coral-dk)}
.foot-small{grid-column:1/-1;font-size:13px !important}

/* legal pages */
.legal{padding:48px 0 24px}
.legal .wrap{max-width:820px}
.legal article{padding:40px 44px}
.legal h1{font-size:clamp(32px,4vw,44px)}
.legal .updated{margin-top:10px;color:var(--muted)}
.legal h2{font-size:22px;margin:32px 0 10px}
.legal p,.legal li{color:#3d3832}
.legal p+p{margin-top:10px}
.legal ul{padding-left:20px;margin:8px 0}
.legal li{margin:4px 0}

@media (max-width:980px){
  .hero-in{grid-template-columns:1fr;gap:28px}
  .hero-media{max-width:560px;margin:0 auto;width:100%}
  .rules{grid-template-columns:1fr 1fr}
  .steps,.themes,.plans{gap:14px}
  .step,.plan{padding:22px}
  .example,.pro,.final{grid-template-columns:1fr}
}
@media (max-width:760px){
  .steps,.plans{grid-template-columns:1fr}
  .step{display:grid;grid-template-columns:48px 1fr;column-gap:14px;align-items:start}
  .step h3{margin:0 0 6px;font-size:18px}
  .step p{grid-column:2}
  .themes{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin:0 -24px;padding:0 24px 10px;scrollbar-width:none}
  .themes::-webkit-scrollbar{display:none}
  .themes article{flex:0 0 min(78%,340px);scroll-snap-align:center}
}
@media (max-width:860px){
  .menu-btn{display:flex}
  .nav{position:fixed;inset:72px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;background:var(--paper);border-bottom:1px solid var(--line);padding:8px 16px 18px;box-shadow:0 18px 30px rgba(40,30,15,.12);display:none}
  .nav.open{display:flex}
  .nav a:not(.btn){padding:14px 4px;border-bottom:1px solid var(--line);font-size:17px}
  .nav-cta{margin-top:14px}
}
@media (max-width:640px){
  body{font-size:16px}
  .wrap{padding:0 16px}
  .top-in{height:64px}
  .brand-img{height:42px}
  .nav{inset:64px 0 auto 0}
  .hero{padding:32px 0 22px}
  .lead{font-size:17px}
  .ticks{margin:20px 0 24px;gap:10px;flex-direction:column}
  .cta-row .btn{flex:1 1 100%}
  .hero-media{padding:0;display:flex;flex-wrap:wrap;gap:8px}
  .video-card{width:100%;margin-bottom:6px}
  .chip{position:static;font-size:14px;padding:8px 12px;box-shadow:none}
  .sec{padding:22px 0}
  .sec-head{margin-bottom:22px}
  .sec-head p{font-size:16px}
  .rules{grid-template-columns:1fr}
  .themes{margin:0 -16px;padding:0 16px 10px}
  .themes article{flex-basis:78%}
  .ask{padding:22px}
  .ask-text{font-size:16px}
  .pro{padding:22px;gap:22px}
  .rules{gap:12px}
  .rule{padding:16px}
  .final{padding:28px 22px}
  .fan{height:180px}
  .fan img{width:116px;border-width:3px}
  .fan img:nth-child(1){left:calc(50% - 140px)}
  .fan img:nth-child(2){left:calc(50% - 58px)}
  .fan img:nth-child(3){left:calc(50% + 24px)}
  .foot-in{grid-template-columns:1fr}
  .legal article{padding:26px 20px}
}

/* sign-in and account pages (served by the sign-in service) */
.flow article h2{font-size:22px;margin:28px 0 10px}
.auth-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:24px}
.auth-box{border:1px solid var(--line);border-radius:14px;padding:22px;background:#FFFDF9;display:flex;flex-direction:column}
.auth-box h2{margin:0 0 8px !important;font-size:20px !important}
.auth-box p{color:var(--muted)}
.auth-box form{margin-top:auto}
.auth-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.field{display:block;margin:14px 0}
.field span{display:block;font-weight:700;font-size:14px;margin-bottom:6px}
.field input{width:100%;height:48px;border:1.5px solid var(--line);border-radius:12px;padding:0 14px;font:500 16px "DM Sans",sans-serif;background:#fff;color:var(--ink)}
.field input:focus{outline:none;border-color:var(--coral)}
.steps-list{margin:10px 0 0;padding-left:22px}
.steps-list li{margin:8px 0}
code{font:500 14px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;background:#F4EFE6;border-radius:6px;padding:2px 6px;word-break:break-all}
code.copy{display:inline-block;padding:8px 12px;font-size:15px;user-select:all}
@media (max-width:640px){.auth-grid{grid-template-columns:1fr}.auth-actions .btn{flex:1 1 100%}code.copy{font-size:13px}}
@media (max-width:380px){h1{font-size:33px}.hero .nw{white-space:normal}}
.table-wrap{overflow-x:auto;margin:10px 0 6px}
.doc-table{width:100%;border-collapse:collapse;font-size:15px}
.doc-table th,.doc-table td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--line)}
.doc-table th{font-weight:700;color:var(--ink);background:#F7F2E9}
.doc-table td:first-child{font-weight:700;color:var(--ink);min-width:150px}
.doc-table td:last-child{white-space:nowrap}
.legal ol{padding-left:22px;margin:8px 0}
@media (max-width:640px){
  .doc-table thead{display:none}
  .doc-table,.doc-table tbody,.doc-table tr,.doc-table td{display:block;width:100%}
  .doc-table tr{border-bottom:1px solid var(--line);padding:12px 0}
  .doc-table td{border:0;padding:2px 0}
  .doc-table td:first-child{min-width:0}
  .doc-table td:last-child{display:inline-block;width:auto;margin-top:6px;padding:3px 10px;border-radius:999px;background:#F4EFE6;font-size:13px;font-weight:700}
  .doc-table td:last-child::before{content:"Plan: "}
}