/* Shape & Season section: the app's own look (plum accent, Bodoni Moda + Instrument Sans), light and dark. */
:root{
  --bg:#F3F2F5;--panel:#FBFAFC;--ink:#1D1A22;--muted:#6C6675;--line:#DEDAE3;
  --accent:#6B2D5C;--accent-ink:#FFFFFF;--accent-soft:#EFE3EC;
  --good:#2F7A4F;--warn:#9A6A12;--bad:#A1373A;
  --stage-a:#E7E4EA;--stage-b:#CFCAD6;
  --display:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif;
  --body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#141218;--panel:#1C1A21;--ink:#ECE8F0;--muted:#A39DAD;--line:#2F2B36;
  --accent:#D59AC6;--accent-ink:#1A1019;--accent-soft:#33222F;
  --good:#7FCB9C;--warn:#E3B860;--bad:#EE8F8F;
  --stage-a:#2A2730;--stage-b:#17151B;color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#141218;--panel:#1C1A21;--ink:#ECE8F0;--muted:#A39DAD;--line:#2F2B36;
  --accent:#D59AC6;--accent-ink:#1A1019;--accent-soft:#33222F;
  --good:#7FCB9C;--warn:#E3B860;--bad:#EE8F8F;
  --stage-a:#2A2730;--stage-b:#17151B;color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--accent)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
img{max-width:100%}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.narrow{max-width:740px}

nav.top{border-bottom:1px solid var(--line);background:var(--panel)}
.top-in{display:flex;align-items:center;gap:14px;height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:500 1.2rem var(--display)}
.brand img{width:30px;height:30px;border-radius:8px}
.top-links{margin-left:auto;display:flex;gap:18px;align-items:center;font-size:.93rem}
.top-links a{color:var(--muted);text-decoration:none}
.top-links a:hover{color:var(--ink)}
.top-links a.cta{color:var(--accent-ink);background:var(--accent);padding:8px 16px;border-radius:999px;font-weight:600}
@media(max-width:560px){.top-links .hide-s{display:none}}

.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:48px;align-items:center;padding:64px 20px 40px}
.icon-hero{width:84px;height:84px;border-radius:20px;display:block;margin:0 0 24px;box-shadow:0 12px 32px rgba(60,20,50,.22)}
.eyebrow{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 10px;font-weight:600}
h1{font:500 clamp(2.5rem,6vw,4rem)/1.04 var(--display);letter-spacing:-.015em;margin:0 0 18px}
h1 i,h2 i{color:var(--accent)}
.lede{color:var(--muted);font-size:1.13rem;margin:0 0 26px;max-width:32em}
.actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.btn{display:inline-flex;align-items:center;gap:8px;min-height:50px;padding:12px 26px;border-radius:999px;background:var(--accent);color:var(--accent-ink);text-decoration:none;font:600 1rem var(--body);border:0;cursor:pointer}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn svg{width:18px;height:18px}
.fine{color:var(--muted);font-size:.9rem;margin-top:16px}
.hero-shot{margin:0;border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:0 24px 60px rgba(40,20,40,.16);background:var(--panel)}
.hero-shot img{display:block;width:100%;height:auto}

section{padding:56px 0}
section.wrap{padding:56px 20px}
h2{font:500 clamp(1.8rem,4.4vw,2.6rem)/1.12 var(--display);margin:0 0 14px;letter-spacing:-.01em}
h3{font:600 1.08rem var(--body);margin:0 0 6px}
p{margin:0 0 14px}
.sec-lede{color:var(--muted);max-width:40em}

.two{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:28px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:26px}
.card p{color:var(--muted);margin:0}
.card .eyebrow{margin-bottom:6px}
.shapes,.seasons{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;padding:0;list-style:none}
.shapes li,.seasons li{padding:6px 12px;border:1px solid var(--line);border-radius:999px;font-size:.88rem;background:var(--bg)}
.seasons li{display:inline-flex;align-items:center;gap:7px}
.seasons li span{width:10px;height:10px;border-radius:50%;display:inline-block}

.feat{display:grid;grid-template-columns:1fr 1.3fr;gap:44px;align-items:center;padding:36px 0}
.feat.rev>div{order:2}
.feat figure{margin:0;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--panel)}
.feat figure img{display:block;width:100%;height:auto}
.rate{display:flex;flex-wrap:wrap;gap:14px;margin:14px 0 0;padding:0;list-style:none;font-size:.92rem;color:var(--muted)}
.rate li{display:inline-flex;align-items:center;gap:7px}
.rate i{width:9px;height:9px;border-radius:50%;display:inline-block}

.phones{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.phones figure{margin:0;width:min(280px,80vw)}
.phones img{display:block;width:100%;height:auto;border-radius:28px;border:6px solid var(--ink);background:var(--panel)}
.phones figcaption{text-align:center;color:var(--muted);font-size:.9rem;margin-top:10px}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:26px}
.grid .card{padding:22px}

.beta{background:var(--accent-soft);border:1px solid var(--line);border-radius:18px;padding:26px 28px}
.beta p{margin:0}

details{border-bottom:1px solid var(--line);padding:14px 0}
details:first-of-type{border-top:1px solid var(--line)}
summary{cursor:pointer;font-weight:600;min-height:28px}
details p{margin:10px 0 0;color:var(--muted)}

.closing{text-align:center;padding:64px 0 76px}
.closing .actions{justify-content:center}

main.page{padding:48px 20px 72px}
main.page h1{font-size:clamp(2.1rem,6vw,2.9rem);margin:0 0 8px}
main.page h2{font-size:1.5rem;margin:38px 0 10px}
main.page li{margin-bottom:6px}
.muted{color:var(--muted)}
.note{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px 24px;margin:24px 0}
form label{display:block;font-weight:600;margin:14px 0 6px}
input,textarea{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:12px;color:var(--ink);padding:12px 14px;font:inherit}
form .btn{margin-top:16px}

.svsline{color:var(--muted)}

@media(max-width:860px){
  .hero{grid-template-columns:1fr;gap:32px;padding-top:44px}
  .feat{grid-template-columns:1fr;gap:20px;padding:24px 0}
  .feat.rev>div{order:0}
  .two{grid-template-columns:1fr}
}