/* Site Studio landing. Dark studio, one phone frame. Not the company homepage. */
:root{
  --ground:#14130e;
  --paper:#f4efe6; --paper-2:#ebe4d8;
  --ink:#f4efe6; --ink-2:#d9d1c4; --muted:#a39888;
  --ink-paper:#16150f;
  --rule:#3a352c; --rule-2:#c6bfb2;
  --thread:#0f766e;
  --thread-deep:#134e4a;
  --thread-soft:rgba(15,118,110,.18);
  --bronze:#c4a574;
  --display:Georgia,"Iowan Old Style","Palatino Linotype","Times New Roman",serif;
  --ui:"Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --gut:clamp(20px,5vw,72px);
  --max:1100px;
  --ease:cubic-bezier(.22,.71,.16,1);
  --hdr-veil:rgba(20,19,14,.94);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--ground)}
body{margin:0;background:var(--ground);color:var(--ink-2);font-family:var(--ui);font-size:16px;line-height:1.55}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--thread);outline-offset:3px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:200;background:var(--ink);color:var(--ink-paper);padding:10px 16px}

h1,h2,h3{margin:0;font-family:var(--display);font-weight:400;color:var(--ink);letter-spacing:-.012em;line-height:1.08}
h1{font-size:clamp(34px,5vw,60px)}
h2{font-size:clamp(26px,3vw,40px);margin-top:8px}
h3{font-size:18px}
p{margin:0}
.lede{font-size:clamp(16px,1.3vw,19px);line-height:1.5;color:var(--ink-2);max-width:48ch}
.label{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze)}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}

.hdr{position:sticky;top:0;z-index:60;background:var(--hdr-veil);border-bottom:1px solid var(--rule)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.mark{display:flex;align-items:baseline;gap:9px;color:var(--ink)}
.mark b{font-family:var(--display);font-size:20px;font-weight:500}
.mark small{font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.menu-btn{display:none;border:1px solid var(--rule);color:var(--ink);padding:8px 12px;min-height:44px;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.nav{display:flex;align-items:center;gap:clamp(8px,1.6vw,20px);font-size:13px}
.nav a{color:var(--ink-2);display:inline-flex;align-items:center;min-height:44px;padding-inline:4px}
.nav a:hover{color:var(--ink)}

.btn{display:inline-flex;align-items:center;justify-content:center;height:46px;padding-inline:22px;border:1px solid var(--thread);background:var(--thread);color:#fff;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.btn:hover{background:var(--thread-deep)}
.btn--ghost{border-color:var(--rule);background:transparent;color:var(--ink)}

.hero{padding:clamp(28px,5vh,56px) 0 clamp(36px,6vh,72px)}
.stage{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:clamp(28px,4vw,56px);align-items:center}
.hero h1 .l2{display:block;font-style:italic;color:var(--bronze);margin-top:8px}
.hero .lede{margin-top:18px}
.price{margin-top:18px;color:var(--ink)}
.price b{font-family:var(--display);font-size:28px;font-weight:400}
.price span{display:block;margin-top:4px;color:var(--muted);font-size:14px}
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:18px}
.tier{border:1px solid currentColor;border-radius:10px;padding:12px 14px;color:var(--ink)}
.tier__name{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.tier__price b{font-family:var(--display);font-size:28px;font-weight:400}
.tier__monthly,.tier__founding{margin-top:4px;color:var(--muted);font-size:14px}
.tier__cta{display:inline-flex;align-items:center;min-height:44px;margin-top:10px;padding-inline:16px;border:1px solid var(--thread);background:var(--thread);color:#fff;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;text-decoration:none}
.tier__cta:hover{background:var(--thread-deep)}
.hero__cta{margin-top:16px;display:flex;flex-wrap:wrap;gap:10px}

.lead{margin-top:22px;display:grid;gap:12px;max-width:34rem}
.lead label{display:grid;gap:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.lead input,.lead select,.lead textarea{font-family:var(--ui);font-size:16px;color:var(--ink-paper);background:var(--paper);border:1px solid var(--rule-2);padding:12px 14px;width:100%;min-height:44px}
.lead textarea{resize:vertical;min-height:88px}
.lead .btn{width:100%}
.lead__wait{display:none;font-size:13px;color:var(--bronze)}
.lead.is-wait .lead__wait{display:block}
.lead.is-wait .btn{opacity:.6;pointer-events:none}
.lead__err{color:#f0b4a8;font-size:14px}
.lead__alt{font-size:13.5px;color:var(--muted)}
.lead__alt a{color:var(--bronze);text-decoration:underline;text-underline-offset:3px}

.phone{justify-self:center}
.phone__bezel{width:240px;background:#f8fafc;color:#0f172a;border-radius:28px;padding:28px 16px 20px;border:8px solid #1c1917;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.phone__bezel b{font-family:Georgia,serif;font-size:22px}
.phone__muted{color:#334155;font-size:13px;margin-top:4px}
.phone__bezel ul{list-style:none;padding:10px 0 0;margin:8px 0 0;border-top:1px solid #cbd5e1;display:grid;gap:6px;font-size:13px}
.phone__bezel li{display:flex;justify-content:space-between;gap:8px}
.phone__call{display:inline-block;margin-top:12px;background:#0f766e;color:#f8fafc;padding:8px 12px;border-radius:8px;font-size:13px;font-weight:600}
.phone__piece{opacity:0;transform:translateY(12px)}
.phone.is-in .phone__piece{animation:piece .55s var(--ease) forwards;animation-delay:var(--d,0s)}
.phone.is-still .phone__piece{opacity:1;transform:none}
@keyframes piece{to{opacity:1;transform:none}}

.page{padding:0 0 clamp(48px,6vh,80px)}
.band{padding:clamp(36px,6vh,72px) 0;border-top:1px solid var(--rule)}
.band .lede{margin-top:12px}
[id]{scroll-margin-top:80px}
.ba{list-style:none;padding:0;margin:28px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ba__item{display:grid;gap:10px;align-content:start}
.ba__pair{display:grid;gap:8px}
.pane{border:1px solid var(--rule);padding:12px;min-height:148px}
.pane__tag{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze)}
.pane--before{background:#221f1a}
.plain{margin-top:10px;background:#f3f3f3;color:#222;padding:10px;font-family:Arial,Helvetica,sans-serif;font-size:14px;line-height:1.35}
.plain__name{font-weight:700}
.plain__nav{margin-top:8px;color:#1a0dab;text-decoration:underline}
.pane--after{display:flex;flex-direction:column;gap:6px;background:var(--paper);color:var(--ink-paper);text-decoration:none;border-color:var(--thread)}
.pane--after .pane__tag{color:var(--thread-deep)}
.after__name{font-family:var(--display);font-size:22px;line-height:1.15;color:var(--ink-paper)}
.after__line{font-size:14px;color:#3f3a32}
.after__go{margin-top:auto;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--thread-deep)}
.pane--after:hover{background:#fff}
.steps{display:grid;gap:16px;margin:22px 0;max-width:40rem}
.steps li{display:grid;grid-template-columns:auto 1fr;gap:12px}
.steps b{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--bronze)}
.page .lede a{color:var(--bronze);text-decoration:underline;text-underline-offset:3px}

.ftr{border-top:1px solid var(--rule);padding:28px var(--gut);font-size:13px;color:var(--muted)}
.ftr a{color:var(--bronze);text-decoration:underline;text-underline-offset:3px}

.preview-shell{min-height:70vh;display:flex;flex-direction:column}
.preview-shell iframe{flex:1;width:100%;border:0;min-height:70vh;background:#fff}
.dock{position:sticky;bottom:0;z-index:40;background:var(--paper);color:var(--ink-paper);border-top:1px solid var(--rule-2);padding:16px var(--gut) 20px;display:grid;gap:14px}
.dock h2{font-size:18px;color:var(--ink-paper)}
.dock__row{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:end}
.dock label{display:grid;gap:4px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#57534e}
.dock input{font-size:14px;border:1px solid var(--rule-2);background:var(--paper-2);padding:8px 10px;min-height:40px;min-width:8rem;color:var(--ink-paper)}
.banner{background:var(--thread-soft);border:1px solid var(--thread);padding:12px 14px;color:var(--ink);font-size:14px}
.banner a{color:var(--bronze);text-decoration:underline}
.flags{max-width:var(--max);margin:12px auto;padding-inline:var(--gut);font-size:13px}

@media (max-width:900px){
  .stage{grid-template-columns:1fr}
  .ba{grid-template-columns:1fr}
  .menu-btn{display:inline-flex}
  .nav{display:none;position:absolute;left:0;right:0;top:64px;background:var(--ground);border-bottom:1px solid var(--rule);flex-direction:column;align-items:flex-start;padding:12px var(--gut) 16px;gap:10px}
  .nav.is-open{display:flex}
}
@media (prefers-reduced-motion:reduce){
  .phone__piece{opacity:1;transform:none;animation:none}
}