:root { --ink:#102219; --muted:#65786c; --line:#dbe4dc; --paper:#f7f9f5; --green:#175d39; --green2:#2a7b50; --lime:#b7e675; --mono:"DM Mono",monospace; --sans:"Manrope",system-ui,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); }
.live-design-background { position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; background:#a9b9a4; }
.live-design-background iframe { width:100%; height:100%; border:0; display:block; pointer-events:none; filter:saturate(.82) contrast(.92); transform:scale(1.015); }
.live-design-background:after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(247,249,245,.72) 0%,rgba(247,249,245,.52) 43%,rgba(247,249,245,.18) 100%),linear-gradient(180deg,rgba(255,255,255,.04),rgba(245,248,243,.12)); }
button,input { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
.home-header { height:76px; display:flex; align-items:center; justify-content:space-between; padding:0 max(24px,calc((100vw - 1240px)/2)); border-bottom:1px solid var(--line); background:rgba(250,252,248,.92); backdrop-filter:blur(14px); position:sticky; top:0; z-index:20; }
.home-brand { display:flex; align-items:center; gap:11px; color:var(--ink); text-decoration:none; font-weight:800; letter-spacing:.13em; font-size:12px; }
.home-brand img { width:38px; height:38px; }
.home-brand small { color:#68a784; font-size:8px; }
.home-header nav { display:flex; align-items:center; gap:20px; font-size:11px; }
.home-header nav a { color:#4b6456; text-decoration:none; font-weight:700; }
.home-header nav form { margin:0; }
.home-header nav button,.nav-login { border:1px solid #ccd8ce; border-radius:8px; background:white; padding:9px 13px; color:#355345; font-weight:700; }
.signed-in { color:#718177; font-size:10px; }
main { position:relative; overflow:hidden; }
.flash-stack { position:fixed; z-index:30; top:88px; left:50%; transform:translateX(-50%); width:min(560px,calc(100% - 30px)); display:grid; gap:6px; }
.flash { border:1px solid #bdd5c3; border-radius:9px; padding:11px 14px; background:#eff8ef; box-shadow:0 12px 30px rgba(20,54,32,.12); color:#2e6242; font-size:11px; }
.flash.error { border-color:#e3c4bd; background:#fff2ef; color:#934a3e; }
.hero { min-height:calc(100vh - 76px); display:grid; grid-template-columns:1fr; align-items:center; max-width:1240px; margin:auto; padding:76px 24px 68px; }
.hero-copy { position:relative; z-index:1; }
.eyebrow,.card-kicker { font:500 8px var(--mono); letter-spacing:.18em; color:#6d8979; }
.hero h1 { margin:15px 0 22px; font-size:clamp(32px,5.7vw,78px); line-height:.92; letter-spacing:-.065em; white-space:nowrap; }
.hero h1 em { color:var(--green); font-style:normal; }
.hero-copy>p { max-width:575px; margin:0; color:var(--muted); font-size:16px; line-height:1.75; }
.hero-actions { display:flex; gap:11px; margin-top:31px; }
.primary,.secondary { display:inline-flex; justify-content:center; align-items:center; border-radius:9px; padding:13px 18px; border:1px solid var(--green); text-decoration:none; font-size:11px; font-weight:800; cursor:pointer; }
.primary { background:var(--green); color:white; box-shadow:0 8px 22px rgba(23,93,57,.2); }
.secondary { background:white; color:var(--green); }
.feature-strip { display:grid; grid-template-columns:repeat(3,1fr); max-width:1240px; margin:0 auto 100px; border:1px solid var(--line); border-radius:16px; background:white; box-shadow:0 15px 45px rgba(31,58,40,.07); }
.feature-strip article { display:flex; gap:18px; padding:27px 30px; border-left:1px solid var(--line); }.feature-strip article:first-child { border-left:0; }
.feature-strip article>b { color:#65a07d; font:500 10px var(--mono); }.feature-strip h3 { margin:0 0 5px; font-size:13px; }.feature-strip p { margin:0; color:#718177; font-size:10px; line-height:1.5; }.feature-strip code { font:500 9px var(--mono); }
.workspace,.designs,.auth-section { max-width:1240px; margin:0 auto 95px; padding:0 24px; }
.workspace,.designs { position:relative; z-index:1; }
.workspace { display:grid; grid-template-columns:.75fr 1.25fr; gap:80px; align-items:start; }
.section-heading h2,.auth-intro h2 { margin:10px 0 13px; font-size:40px; letter-spacing:-.045em; line-height:1.05; }.section-heading p,.auth-intro p { color:var(--muted); font-size:12px; line-height:1.75; }
.create-form { display:grid; grid-template-columns:1fr 1fr; gap:15px; padding:28px; border:1px solid var(--line); border-radius:17px; background:white; box-shadow:0 18px 50px rgba(28,58,38,.08); }
.create-form .wide { grid-column:1/-1; }
label>span { display:block; margin:0 0 6px 2px; color:#617167; font:500 8px var(--mono); letter-spacing:.07em; text-transform:uppercase; }
input { width:100%; height:43px; border:1px solid #d5ded6; border-radius:8px; padding:0 12px; outline:0; background:#fcfdfb; font-size:11px; }
input:focus { border-color:#55906e; box-shadow:0 0 0 3px rgba(42,123,80,.09); }
label small { display:block; margin:6px 2px 0; color:#8a968e; font-size:8px; line-height:1.45; }
.slug-field,.unit-field { display:flex; align-items:center; border:1px solid #d5ded6; border-radius:8px; background:#fcfdfb; overflow:hidden; }.slug-field:focus-within,.unit-field:focus-within { border-color:#55906e; box-shadow:0 0 0 3px rgba(42,123,80,.09); }.slug-field i,.unit-field i { padding:0 0 0 12px; color:#789085; font:500 11px var(--mono); font-style:normal; }.unit-field i { padding:0 11px 0 0; }.slug-field input,.unit-field input { border:0; box-shadow:none; background:transparent; }.submit { grid-column:1/-1; margin-top:4px; }.submit span { margin-left:auto; font-size:18px; }
.section-heading.compact { max-width:570px; }.design-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:28px; }
.design-card { overflow:hidden; border:1px solid var(--line); border-radius:15px; background:white; box-shadow:0 12px 35px rgba(29,54,38,.07); }.design-preview { height:145px; position:relative; overflow:hidden; background:repeating-linear-gradient(0deg,transparent 0 20px,rgba(255,255,255,.13) 21px),repeating-linear-gradient(90deg,transparent 0 20px,rgba(255,255,255,.13) 21px),#79936f; }.design-preview:before { content:""; position:absolute; left:25%; top:29%; width:50%; height:45%; background:#364a40; border:5px solid #26392f; transform:rotate(-8deg); box-shadow:9px 11px rgba(31,56,39,.14); }.design-preview i { position:absolute; left:0; right:0; bottom:18px; height:28px; background:#424945; transform:rotate(3deg); }.design-preview span { position:absolute; z-index:3; top:12px; left:12px; padding:5px 7px; border-radius:5px; background:rgba(248,251,247,.9); font:500 7px var(--mono); }.design-card-body { padding:17px; }.design-card-body>small { color:#619074; font:500 8px var(--mono); }.design-card h3 { margin:7px 0 4px; font-size:15px; }.design-card p { margin:0; color:#8a968e; font-size:8px; }.card-actions { display:flex; gap:7px; margin-top:15px; }.card-actions a,.card-actions button { flex:1; border:1px solid #d6e0d8; border-radius:7px; background:#f8faf7; color:#356048; padding:8px; text-align:center; text-decoration:none; font-size:9px; font-weight:700; }.card-actions a { background:var(--green); border-color:var(--green); color:white; }.design-settings { display:none; gap:8px; margin-top:13px; padding-top:13px; border-top:1px solid var(--line); }.design-settings.visible { display:grid; }.design-settings input { height:35px; }.design-settings button { border:0; border-radius:7px; padding:9px; background:#e9f1e9; color:#315d43; font-size:9px; font-weight:800; }
.empty-designs { margin-top:26px; padding:50px; border:1px dashed #cbd9cd; border-radius:15px; text-align:center; color:#718177; }.empty-designs span { font-size:30px; }.empty-designs h3 { color:var(--ink); margin:10px 0 5px; }
.auth-section { display:grid; grid-template-columns:1.1fr .8fr .8fr; gap:20px; align-items:stretch; }.auth-intro { padding:36px 45px 30px 0; }.auth-intro a { color:var(--green); font-size:11px; font-weight:800; text-decoration:none; }.auth-card { display:flex; flex-direction:column; padding:28px; border:1px solid var(--line); border-radius:16px; background:white; box-shadow:0 16px 45px rgba(27,55,36,.07); }.auth-card.featured { border-color:#a9c9b2; }.auth-card h3 { margin:8px 0 22px; font-size:22px; }.auth-card label { margin-bottom:13px; }.auth-card button { width:100%; margin-top:auto; }.auth-card>small { margin-top:10px; color:#8a968e; text-align:center; font-size:8px; }
footer { min-height:105px; display:flex; align-items:center; gap:24px; padding:0 max(24px,calc((100vw - 1240px)/2)); border-top:1px solid var(--line); color:#7c8b82; font-size:9px; }footer>span { color:#355343; font-weight:800; letter-spacing:.12em; }footer p { flex:1; }footer a { color:#4f785f; text-decoration:none; font:500 9px var(--mono); }
@media(max-width:900px){.hero{grid-template-columns:1fr;padding-top:55px}.feature-strip{margin-left:20px;margin-right:20px}.workspace{grid-template-columns:1fr;gap:25px}.auth-section{grid-template-columns:1fr 1fr}.auth-intro{grid-column:1/-1}.design-grid{grid-template-columns:1fr 1fr}.home-header nav>a:first-child,.signed-in{display:none}}
@media(max-width:620px){.home-header{height:64px;padding:0 15px}.home-brand img{width:34px}.home-header nav{gap:8px}.hero{display:block;min-height:auto;padding:58px 20px}.hero h1{font-size:clamp(31px,8.5vw,49px)}.feature-strip{grid-template-columns:1fr}.feature-strip article{border-left:0;border-top:1px solid var(--line)}.feature-strip article:first-child{border-top:0}.create-form{grid-template-columns:1fr;padding:20px}.create-form label{grid-column:1/-1}.auth-section,.design-grid{grid-template-columns:1fr}.auth-intro{padding-right:0}.workspace,.designs,.auth-section{padding:0 18px}.section-heading h2,.auth-intro h2{font-size:34px}}

/* Feature strip stays hidden; auth is removed from page flow and opened as a modal. */
.feature-strip,
.auth-section { display:none; }
.auth-open { overflow:hidden; }
.auth-section.visible { position:fixed; inset:0; z-index:60; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); place-items:center; gap:0; width:100vw; height:100vh; max-width:none; margin:0; padding:24px; overflow:auto; background:rgba(10,28,18,.72); backdrop-filter:blur(10px); }
.auth-section.visible .auth-intro,
.auth-section.visible .auth-card { display:none; }
.auth-section[data-mode="signup"] #signup,
.auth-section[data-mode="login"] #login { display:flex; grid-area:1/1; align-self:center; justify-self:center; width:min(410px,100%); min-height:390px; position:relative; z-index:1; box-shadow:0 28px 80px rgba(5,20,11,.35); }
.auth-close { position:fixed; z-index:2; top:22px; right:25px; width:42px; height:42px; border:1px solid rgba(255,255,255,.35); border-radius:50%; background:rgba(255,255,255,.14); color:white; font-size:25px; line-height:1; cursor:pointer; }
.auth-close:hover { background:rgba(255,255,255,.24); }

/* The public page remains cinematic; signed-in users get a compact white dashboard. */
.marketing-page .hero-copy>p { color:#000; font-weight:400; text-shadow:none; }
.dashboard-page { background:#fff; }
.dashboard-page .home-header { height:64px; background:#fff; backdrop-filter:none; }
.dashboard-page main { min-height:calc(100vh - 64px); overflow:visible; background:#fff; }
.dashboard-page .flash-stack { top:76px; }
.dashboard-heading { position:relative; z-index:1; display:flex; align-items:end; justify-content:space-between; gap:24px; max-width:1240px; margin:0 auto; padding:34px 0 22px; }
.dashboard-heading h1 { margin:7px 0 3px; font-size:34px; line-height:1; letter-spacing:-.045em; }
.dashboard-heading p { margin:0; color:var(--muted); font-size:11px; }
.dashboard-heading .primary { flex:none; padding:11px 15px; }
.dashboard-page .workspace,.dashboard-page .designs { max-width:1240px; padding:0; }
.dashboard-page .workspace { position:relative; z-index:1; display:block; margin:0 auto 24px; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; }
.dashboard-page .workspace summary { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:13px 16px; cursor:pointer; list-style:none; background:#f8faf7; }
.dashboard-page .workspace summary::-webkit-details-marker { display:none; }
.dashboard-page .workspace summary span { display:flex; align-items:baseline; gap:10px; }
.dashboard-page .workspace summary b { font-size:12px; }
.dashboard-page .workspace summary small { color:#7d8c83; font-size:9px; }
.dashboard-page .workspace summary i { color:var(--green); font-size:18px; font-style:normal; transition:transform .2s ease; }
.dashboard-page .workspace[open] summary i { transform:rotate(45deg); }
.dashboard-page .workspace:not([open]) .create-form { display:none; }
.dashboard-page .create-form { grid-template-columns:minmax(180px,1.35fr) minmax(150px,1fr) 92px 92px minmax(165px,1.1fr) auto; gap:10px; align-items:end; padding:14px 16px 16px; border:0; border-top:1px solid var(--line); border-radius:0; box-shadow:none; }
.dashboard-page .create-form input { height:39px; }
.dashboard-page .create-form .submit { grid-column:auto; height:39px; margin:0; padding:0 14px; white-space:nowrap; }
.dashboard-page .create-form .submit span { margin-left:10px; }
.dashboard-page .designs { position:relative; z-index:1; margin:0 auto 40px; }
.dashboard-page .section-heading.compact { max-width:none; display:flex; align-items:baseline; gap:12px; }
.dashboard-page .section-heading.compact h2 { margin:0; font-size:21px; letter-spacing:-.03em; }
.dashboard-page .design-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:13px; }
.dashboard-page .design-card { overflow:visible; border-radius:11px; box-shadow:0 5px 18px rgba(29,54,38,.055); }
.dashboard-page .design-card-body { padding:14px; }
.design-card-heading { display:flex; align-items:start; justify-content:space-between; gap:12px; }
.design-card-heading>div { min-width:0; }
.design-card-heading small { color:#619074; font:500 8px var(--mono); }
.design-card-heading h3 { overflow:hidden; margin:5px 0 4px; font-size:14px; text-overflow:ellipsis; white-space:nowrap; }
.design-card-heading>span { flex:none; margin-top:1px; padding:5px 7px; border-radius:6px; background:#eef4ed; color:#526b5c; font:500 8px var(--mono); }
.dashboard-page .card-actions { margin-top:11px; }
.dashboard-page .card-actions>* { flex:1; min-width:0; }
.dashboard-page .card-actions a,.dashboard-page .card-actions button { width:100%; min-height:32px; padding:7px 8px; cursor:pointer; }
.dashboard-page .card-actions .delete-design { display:flex; margin:0; }
.dashboard-page .card-actions .delete-design button { border-color:#ecd5d0; background:#fff8f6; color:#9b4d43; }
.dashboard-page .design-settings { grid-template-columns:1fr 1fr; }
.dashboard-page .design-settings button { grid-column:1/-1; cursor:pointer; }
.dashboard-page .empty-designs { margin-top:13px; padding:32px; }

@media(max-width:1100px){
  .dashboard-heading { padding-left:24px; padding-right:24px; }
  .dashboard-page .workspace,.dashboard-page .designs { margin-left:24px; margin-right:24px; }
  .dashboard-page .create-form { grid-template-columns:1.3fr 1fr 92px 92px; }
  .dashboard-page .project-password { grid-column:span 3; }
  .dashboard-page .design-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:700px){
  .dashboard-heading { align-items:center; padding:26px 18px 18px; }
  .dashboard-heading h1 { font-size:29px; }
  .dashboard-heading p { display:none; }
  .dashboard-page .workspace,.dashboard-page .designs { margin-left:18px; margin-right:18px; }
  .dashboard-page .workspace summary small { display:none; }
  .dashboard-page .create-form { grid-template-columns:1fr 1fr; }
  .dashboard-page .create-form label,.dashboard-page .project-password { grid-column:1/-1; }
  .dashboard-page .create-form .parcel-size { grid-column:auto; }
  .dashboard-page .create-form .submit { grid-column:1/-1; }
  .dashboard-page .design-grid { grid-template-columns:1fr; }
}