@font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/Inter-latin-var.woff2) format("woff2");unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500;font-display:swap;src:url(fonts/CormorantGaramond-Italic-latin-500.woff2) format("woff2");unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* SEDALU · landing creators · v3 audit (Inter + Cormorant Garamond Italic) */
:root{
--seda:#FBF8F9;--nevoa:#F1ECF3;--grafite:#1F2230;--luz:#F4B9C6;--argila:#9C8BD8;--lav2:#C9BDF0;
--accent:#6A57B5;      /* 5.46:1 on seda */
--text2:#5A6074;       /* 5.92:1 on seda */
--border:#858AA0;      /* 3.42:1 on white (inputs) */
--hair:#E7E1EC;--err:#B4475A;--on-dark2:#B8BDCC;
--ease-out:cubic-bezier(.16,1,.3,1);--ease-io:cubic-bezier(.65,0,.35,1);
--d1:180ms;--d2:320ms;--d3:700ms;--d4:1100ms;
--pad:clamp(80px,11vw,160px);--r:24px}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto;scroll-padding-top:80px}
body{font-family:Inter,system-ui,sans-serif;background:var(--seda);color:var(--grafite);-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:hidden}
a{color:var(--accent)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.final :focus-visible{outline-color:var(--lav2)}
.skip{position:absolute;left:16px;top:-80px;z-index:100;background:var(--grafite);color:#fff;padding:12px 18px;border-radius:12px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}
.draft{position:relative;z-index:60;background:var(--accent);color:#fff;text-align:center;font-size:12px;padding:6px 12px;line-height:1.4}
.w{max-width:1120px;margin:0 auto;padding:0 clamp(20px,4vw,40px);position:relative;z-index:1}
.nav{display:flex;justify-content:space-between;align-items:center;gap:12px}
.top .nav{padding:24px clamp(20px,4vw,40px)}
.logo{font-weight:650;font-size:22px;letter-spacing:-.03em;color:var(--grafite);text-decoration:none}
.tag{font-size:13px;font-weight:500;color:var(--text2);background:var(--nevoa);padding:8px 14px;border-radius:99px;text-decoration:none}
.sticky{position:fixed;left:0;right:0;top:0;height:64px;z-index:50;display:flex;align-items:center;background:rgba(251,248,249,.78);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid rgba(31,34,48,.06);transform:translateY(-100%);visibility:hidden}
.sticky .nav{width:100%}.sticky.on{transform:none;visibility:visible}
.k{font-size:13px;letter-spacing:.14em;font-weight:600;color:var(--accent);text-transform:uppercase;margin-bottom:16px}
h1{font-size:clamp(40px,5.6vw,72px);line-height:1.02;letter-spacing:-.045em;font-weight:600;max-width:12ch;text-wrap:balance}
h1 em{display:inline-block;font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-weight:500;font-size:clamp(48px,8vw,104px);letter-spacing:-.02em;line-height:.9;color:var(--accent)}
h2{font-size:clamp(30px,4vw,52px);letter-spacing:-.04em;line-height:1.06;font-weight:600;max-width:20ch;text-wrap:balance}
h3{font-size:20px;letter-spacing:-.02em;margin-bottom:8px}
p.l{margin-top:24px;font-size:clamp(17px,1.6vw,20px);line-height:1.6;color:var(--text2);max-width:34em}
.sub{margin-top:18px;color:var(--text2);font-size:18px;line-height:1.6;max-width:40em}
small{display:block;margin-top:14px;color:var(--text2);font-size:13px;line-height:1.55}
main section{padding:var(--pad) 0}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,72px);align-items:center;padding-top:clamp(32px,6vw,72px)!important}
.heroart{position:relative}
.ph{border-radius:32px;aspect-ratio:4/5;background-size:cover;background-position:center}
.ph.tall{aspect-ratio:3/4}
/* iridescent brand orb (single instance) */
.orb{position:absolute;width:clamp(150px,22vw,290px);aspect-ratio:1;right:-6%;bottom:-8%;border-radius:50%;pointer-events:none;will-change:transform;
background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.95) 0 6%,rgba(255,255,255,0) 22%),
 radial-gradient(circle at 70% 78%,rgba(156,139,216,.55),rgba(156,139,216,0) 55%),
 conic-gradient(from 210deg at 50% 50%,#F8DCE3,#F4B9C6,#E6D6F5,#C9BDF0,#DDEBF7,#FBE9EF,#F8DCE3);
box-shadow:inset -18px -22px 44px rgba(106,87,181,.28),inset 14px 16px 34px rgba(255,255,255,.75),0 40px 90px rgba(244,185,198,.45)}
.orb i{position:absolute;left:20%;top:13%;width:30%;height:18%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,255,255,0));transform:rotate(-24deg)}
.orb:after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1.5px solid rgba(255,255,255,.7);mix-blend-mode:overlay}
/* buttons */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 28px;border-radius:16px;border:0;background:var(--grafite);color:#fff;font:600 16px/1 Inter,system-ui,sans-serif;text-decoration:none;cursor:pointer;margin-top:32px;box-shadow:0 12px 30px rgba(31,34,48,.18),0 0 0 0 rgba(244,185,198,0)}
.btn.sm{min-height:44px;margin:0;padding:0 18px;font-size:14px;border-radius:12px}
.btn:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-120%);pointer-events:none}
/* bento: how it works */
.bento{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:auto auto;gap:16px;margin-top:48px}
.bento .c:first-child{grid-row:span 2;background:var(--grafite);color:var(--seda);border:0;display:flex;flex-direction:column;justify-content:flex-end;min-height:340px}
.bento .c:first-child p{color:var(--on-dark2)}.bento .c:first-child b{color:var(--lav2);font-size:clamp(56px,7vw,96px);line-height:1}
.c{background:#fff;border:1px solid var(--hair);border-radius:var(--r);padding:clamp(24px,3vw,36px)}
.c b{display:block;font-size:13px;color:var(--accent);letter-spacing:.1em;margin-bottom:12px}
.c p{color:var(--text2);line-height:1.55;font-size:15.5px}
.how .c b{font-size:30px;letter-spacing:-.02em}
.bento .c[aria-selected]{cursor:pointer}
.bento .c[aria-selected=true]:not(:first-child){border-color:var(--argila);box-shadow:0 18px 50px rgba(106,87,181,.14)}
/* conditions */
.split2{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,6vw,88px);align-items:center}
ul.ck{list-style:none;margin-top:28px}ul.ck li{padding:14px 0;border-top:1px solid var(--hair);line-height:1.45;display:flex;gap:12px}
ul.ck li:before{content:"✓";color:var(--accent);font-weight:700}ul.no li:before{content:"—";color:var(--text2)}
.crit{display:grid;grid-template-columns:1.15fr .85fr;gap:16px;margin-top:48px}
.crit .yes{background:var(--nevoa);border-color:transparent}.crit .nope{background:transparent}
/* process timeline */
.tl{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:48px;counter-reset:s;border-top:1px solid var(--grafite)}
.tl .c{background:none;border:0;border-radius:0;padding:28px 28px 0 0}.tl .c b{font-size:15px;color:var(--accent)}
/* faq */
.faq{margin-top:40px;max-width:800px}
details{border-bottom:1px solid var(--hair)}details:first-child{border-top:1px solid var(--hair)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:22px 4px;font-weight:600;font-size:18px;min-height:56px}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--nevoa);color:var(--accent);font-size:20px;font-weight:500}
details[open] summary:after{content:"−"}
details p{padding:0 4px 24px;color:var(--text2);line-height:1.6;max-width:62ch}
details .ans{overflow:hidden}
/* final dark section */
main section.final{grid-template-rows:auto auto 1fr;background:var(--grafite);color:var(--seda);border-radius:32px;padding:clamp(48px,8vw,112px) clamp(22px,6vw,88px);margin:clamp(24px,4vw,48px) 0 clamp(56px,8vw,96px);display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(32px,5vw,72px);align-items:start;align-content:start}
@media(max-width:860px){main section.final{row-gap:0}.final>form{margin-top:32px}}
.final .k{color:var(--lav2)}.final h2{color:var(--seda)}.final .sub{color:var(--on-dark2)}
.final>.k,.final>h2,.final>.sub{grid-column:1}.final>form{grid-column:2;grid-row:1/span 3}
.fbox{background:#fff;color:var(--grafite);border-radius:28px;padding:clamp(24px,3.4vw,40px);box-shadow:0 30px 80px rgba(0,0,0,.25)}
.fbox label.f{display:block;margin-top:18px;font-size:14px;font-weight:600}.fbox label.f:first-child{margin-top:0}
.fbox input:not([type=checkbox]),.fbox select{display:block;width:100%;height:56px;margin-top:8px;padding:0 18px;border-radius:16px;border:1.5px solid var(--border);font:400 16px Inter,system-ui,sans-serif;background:#fff;color:var(--grafite)}
.fbox input::placeholder{color:#767B8F}
.fbox input:focus-visible,.fbox select:focus-visible{outline:4px solid rgba(106,87,181,.35);outline-offset:0;border-color:var(--accent)}
.fbox [aria-invalid=true]{border-color:var(--err)!important}
.err{display:block;min-height:0;color:var(--err);font-size:13.5px;font-weight:500;margin-top:6px}.err:empty{display:none}
.cons{display:flex;gap:12px;align-items:flex-start;margin-top:22px;font-size:14px;color:var(--text2);line-height:1.5;cursor:pointer}
.cons input{flex:none;width:24px;height:24px;margin-top:0;accent-color:var(--accent);cursor:pointer}
.fbox .btn{width:100%;margin-top:24px}
.fbox small{color:var(--text2)}
#msg{display:none;margin-top:14px;font-size:15px;font-weight:500}
#msg[style*="9C8BD8"],#msg[style*="9c8bd8"]{color:var(--accent)!important}
.fbox.done #msg{display:flex!important;gap:12px;align-items:center;padding:16px;border-radius:16px;background:var(--nevoa)}
.fbox.done #msg:before{content:"";flex:none;width:28px;height:28px;border-radius:50%;background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}
footer{border-top:1px solid var(--hair);padding:28px clamp(20px,4vw,40px) 48px;color:var(--text2);font-size:13px;line-height:1.6}
.mbar{display:none}
/* ribbon */
.ribbon{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.45}
@media(max-width:860px){
 .hero,.split2,.crit,main section.final{grid-template-columns:1fr}.final>form{grid-column:1;grid-row:auto}
 .bento{grid-template-columns:1fr}.bento .c:first-child{grid-row:auto;min-height:0}
 .tl{grid-template-columns:1fr}.tl .c{padding:24px 0 8px;border-bottom:1px solid var(--hair)}
 .heroart{max-width:440px}.orb{right:-4%;bottom:-6%}.ph.tall{aspect-ratio:4/3}
 .top .tag{font-size:12px}
 .mbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:55;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(251,248,249,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid rgba(31,34,48,.08);transform:translateY(110%);visibility:hidden}
 .mbar.on{transform:none;visibility:visible}.mbar .btn{width:100%;margin:0}
 .sticky .btn.sm{display:none}
 footer{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
 .ribbon{display:none}
}
/* ---------- motion (only when allowed) ---------- */
@media (prefers-reduced-motion:no-preference){
 .sticky,.mbar{transition:transform var(--d2) var(--ease-out),visibility 0s linear var(--d2)}
 .sticky.on,.mbar.on{transition:transform var(--d2) var(--ease-out),visibility 0s}
 .btn{transition:transform var(--d1) var(--ease-out),box-shadow var(--d2) var(--ease-out),background var(--d1)}
 .btn:hover{box-shadow:0 16px 40px rgba(31,34,48,.22),0 0 32px 4px rgba(244,185,198,.45)}
 .btn:hover:after{transform:translateX(120%);transition:transform var(--d3) var(--ease-io)}
 .btn:active{transform:scale(.98)}
 .orb{animation:breathe 6.5s var(--ease-io) infinite}
 @keyframes breathe{0%,100%{scale:1;filter:hue-rotate(0deg)}50%{scale:1.035;filter:hue-rotate(-12deg)}}
 .js .split .wd{display:inline-block;opacity:0;transform:translateY(.45em);filter:blur(6px);transition:opacity 300ms var(--ease-out),transform 400ms var(--ease-out),filter 300ms var(--ease-out);transition-delay:calc(min(var(--i),10)*20ms)}
 .js .split.in .wd{opacity:1;transform:none;filter:none}
 .js .rv{opacity:0;transform:translateY(24px);transition:opacity 350ms var(--ease-out),transform 550ms var(--ease-out)}
 .js .rv.in{opacity:1;transform:none}
 .bento .c{transition:border-color var(--d2) var(--ease-out),box-shadow var(--d2) var(--ease-out),transform var(--d2) var(--ease-out)}
 .bento .c[aria-selected=true]:not(:first-child){transform:translateY(-4px)}
 summary:after{transition:transform var(--d2) var(--ease-out)}details[open] summary:after{transform:rotate(180deg)}
 details .ans{transition:height var(--d2) var(--ease-out)}
 .fbox input,.fbox select{transition:border-color var(--d1),box-shadow var(--d1)}
 .fbox.done #msg{animation:pop var(--d3) var(--ease-out)}.fbox.done #msg:before{animation:pop var(--d4) var(--ease-out)}
 @keyframes pop{from{opacity:0;transform:translateY(8px) scale(.96)}}
}
