/* LandIt prototype: shared design tokens and components.
   Colours and fonts are the approved set from the v2 mockup. */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@500;600&display=swap');
@font-face{font-family:"Geist Pixel";src:url("/fonts/GeistPixel-Square.woff2") format("woff2");font-weight:400 800;font-display:swap}

:root{
  --paper:#F6F3EC; --surface:#FFFDF8; --sunk:#EFEBE3; --line:#E2DCD2; --line-strong:#CFC8BC;
  --ink:#1C1A21; --muted:#5E5866;
  --violet:#5B3FD1; --violet-ink:#45309F; --violet-deep:#2E1F73; --violet-soft:#EDE8FD;
  --lime:#D4F25A; --lime-deep:#C6E64A;
  --good:#1C6B3F; --good-soft:#EEF7E0; --good-line:#C2DE8F;
  --warn-ink:#5C3A00; --warn:#8A5300; --warn-soft:#FBF3E2; --warn-line:#E7C98F;
  --bad-ink:#7A2E22; --bad-soft:#F1E4E1;
  --r-sm:8px; --r:14px; --r-lg:22px;
  --sans:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,monospace;
  --pixel:"Geist Pixel","Geist",sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--violet-ink)}a:hover{color:var(--violet-deep)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--violet);outline-offset:2px;border-radius:4px}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.px{font-family:var(--pixel);font-weight:400;letter-spacing:-.01em}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Headings */
.h-hero{font-family:var(--pixel);font-weight:400;font-size:clamp(44px,6.4vw,84px);line-height:.98;letter-spacing:-.015em;margin:0}
.h-sec{font-family:var(--pixel);font-weight:400;font-size:clamp(30px,4vw,48px);line-height:1.04;letter-spacing:-.01em;margin:0}
.h-app{font-family:var(--pixel);font-weight:400;font-size:clamp(32px,4.2vw,52px);line-height:1.02;margin:0}
.lede{font-size:clamp(17px,1.6vw,20px);color:var(--muted);max-width:580px;margin:0}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:var(--r-sm);font-weight:600;font-size:15px;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .15s ease,background .15s ease;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-lg{min-height:54px;padding:0 26px;font-size:16px}
.btn-primary{background:var(--violet);color:#fff}.btn-primary:hover{background:var(--violet-ink);color:#fff}
.btn-primary[disabled]{background:#B9AEE6;cursor:not-allowed}
.btn-quiet{background:transparent;color:var(--ink);border-color:var(--line-strong)}.btn-quiet:hover{background:var(--sunk);color:var(--ink)}
.btn-lime{background:var(--lime);color:var(--ink)}.btn-lime:hover{background:var(--lime-deep);color:var(--ink)}
.btn-ink{background:var(--ink);color:var(--paper)}.btn-ink:hover{background:#000;color:#fff}
.btn-danger{background:transparent;color:var(--bad-ink);border-color:#D8B4AC}.btn-danger:hover{background:#F6E9E6}
.btn-danger[disabled]{opacity:.5;cursor:not-allowed}
.btn-block{width:100%}

/* Chips */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;border-radius:999px;padding:4px 10px;background:var(--sunk);color:var(--ink);line-height:1.3}
.chip-violet{background:var(--violet-soft);color:var(--violet-ink)}
.chip-lime{background:var(--lime);color:var(--ink)}
.chip-warn{background:var(--warn-soft);color:var(--warn-ink);border:1px solid var(--warn-line)}
.chip-good{background:var(--good-soft);color:#1E4D12}
.chip-bad{background:var(--bad-soft);color:var(--bad-ink)}
.tag-must{font-size:12px;color:var(--muted);border:1px solid var(--line-strong);border-radius:4px;padding:0 6px;font-weight:500}

/* Header */
.site-head{position:sticky;top:0;z-index:20;background:rgba(246,243,236,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.site-head .wrap{min-height:68px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.logo{font-family:var(--pixel);font-size:26px;color:var(--ink);text-decoration:none;line-height:1}
.logo span{color:var(--violet)}
.logo small{font-family:var(--sans);font-size:13px;color:var(--muted);font-weight:500;margin-left:6px}
.tabs{display:flex;gap:4px;background:var(--sunk);padding:4px;border-radius:999px}
.tabs a{text-decoration:none;color:var(--ink);font-weight:600;font-size:14px;padding:8px 14px;border-radius:999px;min-height:36px;display:flex;align-items:center}
.tabs a:hover{background:var(--surface)}
.tabs a[aria-current="page"]{background:var(--ink);color:var(--paper)}
.head-actions{margin-left:auto;display:flex;gap:8px;align-items:center}
.appnav{display:flex;gap:22px;font-size:15px;flex-wrap:wrap;margin-left:auto}
.appnav a{color:var(--ink);text-decoration:none;font-weight:500;padding:6px 0;border-bottom:2px solid transparent}
.appnav a[aria-current="page"]{border-bottom-color:var(--violet)}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-weight:600;font-size:13px;text-decoration:none;overflow:hidden;flex:none}
.avatar img{width:100%;height:100%;object-fit:cover}
.badge{font-family:var(--mono);font-size:12px;background:var(--violet);color:#fff;border-radius:10px;padding:1px 7px;margin-left:2px}
@media (max-width:720px){
  .site-head .wrap{gap:12px;padding-top:10px;padding-bottom:10px}
  .tabs{order:3;width:100%;justify-content:center}
  .tabs a{flex:1;justify-content:center}
  .head-actions .btn-quiet{display:none}
  .appnav{order:3;width:100%;margin-left:0;gap:16px;font-size:14px}
}

/* Bento */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;overflow:hidden;min-width:0;transition:transform .2s ease,box-shadow .2s ease}
a.card{text-decoration:none;color:var(--ink);display:flex;flex-direction:column}
a.card .go{margin-top:auto;padding-top:18px}
.card.card-violet,a.card.card-violet{color:#fff}
.card.card-ink,a.card.card-ink{color:var(--paper)}
.card.card-lime,a.card.card-lime,.card.card-soft,a.card.card-soft{color:var(--ink)}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(28,26,33,.08)}
.card h3{font-size:22px;line-height:1.2;font-weight:600;letter-spacing:-.015em;margin:0 0 8px}
.card p{margin:0;color:var(--muted)}
.card-violet{background:var(--violet);border-color:var(--violet);color:#fff}
.card-violet p,.card-ink p{color:#E4DEFA}
.card-ink{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.card-ink p{color:#C9C3CF}
.card-lime{background:var(--lime);border-color:var(--lime-deep)}
.card-lime p{color:#3B3A1F}
.card-soft{background:var(--violet-soft);border-color:#D9D0FF}
.card-sunk{background:var(--sunk)}
.s2{grid-column:span 2}.s3{grid-column:span 3}.s4{grid-column:span 4}.s6{grid-column:span 6}
.r2{grid-row:span 2}
.card .kicker{font-family:var(--mono);font-size:13px;font-weight:600;opacity:.75;margin-bottom:14px;display:block}
.card .big{font-family:var(--pixel);font-size:clamp(48px,6vw,80px);line-height:.9;display:block;margin-bottom:12px}
.card .go{display:inline-flex;align-items:center;gap:6px;font-weight:600;margin-top:18px}
@media (max-width:980px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}.s2,.s3{grid-column:span 1}.s4,.s6{grid-column:span 2}.r2{grid-row:auto}}
@media (max-width:620px){.bento{grid-template-columns:1fr}.s2,.s3,.s4,.s6{grid-column:span 1}.card{padding:22px}}

/* Little in-card illustrations */
.mini{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:14px;margin-top:20px}
.mini-row{display:flex;align-items:center;gap:10px;font-size:14px;padding:4px 0}
.tick{width:20px;height:20px;flex:none;border-radius:6px;background:var(--lime);display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--ink)}
.gap{width:20px;height:20px;flex:none;border-radius:6px;border:1.5px dashed var(--warn)}
.stagebar{display:flex;gap:6px;margin-top:20px}
.stagebar span{flex:1;height:10px;border-radius:5px;background:rgba(255,255,255,.25)}
.stagebar span.on{background:var(--lime)}
.wiggle{display:inline-block;transition:transform .3s ease}
.card:hover .wiggle{transform:rotate(-8deg) scale(1.08)}

/* Sections */
.sec{padding:88px 0}
.sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px;margin-bottom:32px}
.sec-head p{max-width:460px;margin:0;color:var(--muted)}
.hero{padding:72px 0 56px}
.hero-grid{display:flex;flex-wrap:wrap;gap:48px;align-items:center}
.hero-grid>*{flex:1 1 440px;min-width:0}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.note{font-size:14px;color:var(--muted);margin-top:16px}

/* Steps */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.steps li{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px}
.steps .n{font-family:var(--pixel);font-size:40px;line-height:1;color:var(--violet);display:block;margin-bottom:14px}
.steps h3{font-size:19px;margin:0 0 6px;font-weight:600}
.steps p{margin:0;color:var(--muted)}

/* FAQ */
.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--line);padding:18px 0}
.faq summary{cursor:pointer;font-weight:600;font-size:18px;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);font-size:22px;color:var(--violet);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:10px 0 0;color:var(--muted);max-width:680px}

/* Big closing CTA */
.closer{background:var(--violet);color:#fff;border-radius:28px;padding:clamp(32px,6vw,72px);display:flex;flex-wrap:wrap;gap:28px;align-items:center;justify-content:space-between;position:relative;overflow:hidden}
.closer h2{color:#fff;max-width:640px}
.closer p{color:#E4DEFA;margin:12px 0 0;max-width:520px}
.closer .dots{position:absolute;right:-30px;top:-30px;width:200px;height:200px;background-image:radial-gradient(rgba(212,242,90,.9) 2px,transparent 2.5px);background-size:18px 18px;opacity:.5;pointer-events:none}

/* Footer */
.site-foot{border-top:1px solid var(--line);margin-top:24px}
.site-foot .wrap{padding-top:36px;padding-bottom:48px;display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;font-size:14px}
.site-foot a{color:var(--muted);text-decoration:none}.site-foot a:hover{color:var(--ink)}
.site-foot .logo{font-size:20px;margin-right:auto}
.site-foot .phone{color:var(--ink);font-weight:600}

/* Panels and lists used in the app screens */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);min-width:0}
.split{display:flex;flex-wrap:wrap;gap:20px;align-items:start}
.split .side{flex:1 1 340px;max-width:420px}
.split .main{flex:999 1 520px}
.rowbtn{width:100%;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--line);padding:16px 18px;cursor:pointer;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.rowbtn:hover{background:#F2EEE6}
.rowbtn[aria-pressed="true"]{background:var(--violet-soft);box-shadow:inset 3px 0 0 var(--violet)}
.add{font-size:13px;font-weight:600;min-height:36px;padding:0 12px;border-radius:6px;border:1px solid var(--violet);background:var(--surface);color:var(--violet-ink);cursor:pointer}
.add:hover{background:var(--violet-soft)}
.callout{padding:12px 14px;border-radius:var(--r-sm);font-size:15px}
.callout-warn{border:1px solid var(--warn-line);background:var(--warn-soft);color:var(--warn-ink)}
.callout-good{border:1px solid var(--good-line);background:var(--good-soft);color:#1E4D12}
.label{font-size:14px;font-weight:600;color:var(--muted);margin:0 0 10px}
.req{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.req li{display:flex;gap:10px;align-items:center;flex-wrap:wrap;min-height:32px}

/* Forms */
.field{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600}
.input{font-size:16px;min-height:48px;padding:0 12px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--surface);font-weight:400;width:100%}
textarea.input{padding:10px 12px;min-height:96px;resize:vertical}
.check{display:flex;gap:10px;align-items:center;font-size:15px;font-weight:400}
.check input{width:20px;height:20px;accent-color:var(--violet)}
.choice{width:100%;text-align:left;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:20px;cursor:pointer;display:flex;gap:16px;align-items:center;transition:border-color .15s,transform .15s}
.choice:hover{border-color:var(--violet);transform:translateY(-2px)}
.drop{border:1.5px dashed var(--line-strong);border-radius:var(--r);padding:24px;text-align:center;background:var(--surface);cursor:pointer;display:block}
.drop:hover{border-color:var(--violet)}

/* Motion: matching visual + live list */
.tickin{opacity:0;transform:translateX(-4px);animation:in .35s ease-out forwards}
.fadein{opacity:0;animation:in .4s ease-out forwards}
@keyframes in{to{opacity:1;transform:none}}
@keyframes fresh{0%{background:var(--violet-soft)}100%{background:transparent}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.live{width:8px;height:8px;border-radius:50%;background:var(--good);display:inline-block;animation:pulse 2s ease-in-out infinite}
.fresh{animation:fresh 2.4s ease-out 1}
.floaty{animation:floaty 5s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .tickin,.fadein{opacity:1;transform:none}
}

/* Prototype banner */
.proto{background:var(--ink);color:var(--paper);font-size:13px;text-align:center;padding:6px 12px}
.proto a{color:var(--lime)}

/* ── Live app additions ─────────────────────────────────────── */
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 12px;border-radius:6px;z-index:100}
.skip:focus{left:8px}
.headlink{color:var(--ink);text-decoration:none;font-weight:600;font-size:14px}
.headlink[aria-current="page"]{color:var(--violet-ink)}
.head-cta{min-height:40px}
.linkbtn{background:none;border:0;padding:0;color:var(--violet-ink);font-weight:600;cursor:pointer;font-size:14px}
.linkbtn:hover{text-decoration:underline}
.menu{position:relative}
.menu summary{list-style:none;cursor:pointer;border-radius:50%}
.menu summary::-webkit-details-marker{display:none}
.menu-pop{position:absolute;right:0;top:calc(100% + 8px);background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 34px rgba(28,26,33,.12);min-width:190px;padding:6px;z-index:40;display:flex;flex-direction:column}
.menu-item{display:block;text-align:left;padding:10px 12px;border-radius:8px;color:var(--ink);text-decoration:none;background:none;border:0;cursor:pointer;font-weight:500;font-size:15px}
.menu-item:hover{background:var(--sunk);color:var(--ink)}
.bellwrap{position:relative}
.bell{position:relative;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.bell:hover{background:var(--sunk)}
.bell-n{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;border-radius:10px;background:var(--violet);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;padding:0 5px;font-family:var(--mono)}
.bellpanel{position:absolute;right:0;top:calc(100% + 8px);width:min(360px,calc(100vw - 32px));background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px rgba(28,26,33,.14);z-index:40;overflow:hidden}
.bellhead{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line)}
.belllist{list-style:none;margin:0;padding:0;max-height:380px;overflow:auto}
.bellitem{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);font-size:14px}
.bellitem:hover{background:#F2EEE6;color:var(--ink)}
.bellitem.unread{background:var(--violet-soft)}
.toasts{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:200;width:min(460px,calc(100vw - 32px))}
.toast{background:var(--ink);color:var(--paper);padding:12px 16px;border-radius:10px;font-size:15px;box-shadow:0 12px 30px rgba(0,0,0,.2);animation:in .25s ease-out;transition:opacity .3s}
.toast-error{background:#7A2E22;color:#fff}
.toast-good{background:#1E4D12;color:#fff}
.toast.out{opacity:0}
.spin{display:inline-block;width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:rot .7s linear infinite;margin-right:6px;vertical-align:-2px}
@keyframes rot{to{transform:rotate(360deg)}}
.dlg{border:0;border-radius:18px;padding:28px;width:min(520px,calc(100vw - 32px));max-height:calc(100vh - 40px);background:var(--surface);color:var(--ink);box-shadow:0 30px 80px rgba(28,26,33,.3)}
.dlg-wide{width:min(720px,calc(100vw - 32px))}
.dlg::backdrop{background:rgba(28,26,33,.45)}
.dlg h2{font-size:22px;font-weight:600;margin:0 0 6px;padding-right:36px}
.dlg-x{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:50%;border:0;background:var(--sunk);cursor:pointer;font-size:14px}
.stack{display:flex;flex-direction:column;gap:14px}
.row2{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.empty{padding:28px;text-align:center;color:var(--muted)}
.empty strong{display:block;color:var(--ink);font-size:18px;margin-bottom:6px}
.skel{background:linear-gradient(90deg,var(--sunk),#F6F2EA,var(--sunk));background-size:200% 100%;animation:skel 1.2s infinite;border-radius:8px;min-height:18px}
@keyframes skel{to{background-position:-200% 0}}
.pill-tabs{display:flex;gap:8px;flex-wrap:wrap}
.pill-tabs button,.pill-tabs a{border:1px solid var(--line-strong);background:var(--surface);border-radius:999px;padding:8px 14px;font-weight:600;font-size:14px;cursor:pointer;color:var(--ink);text-decoration:none;min-height:40px;display:inline-flex;align-items:center}
.pill-tabs [aria-pressed="true"],.pill-tabs [aria-current="page"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.jobrow{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;padding:18px 4px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.jobrow:hover{background:#F2EEE6;color:var(--ink)}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;font-size:15px}
.kv dt{color:var(--muted)}.kv dd{margin:0}
.thread{display:flex;flex-direction:column;gap:8px;max-height:340px;overflow:auto;padding:4px 2px 10px}
.msg{max-width:80%;padding:10px 14px;border-radius:14px;font-size:15px;white-space:pre-wrap;word-wrap:break-word}
.msg-them{background:var(--sunk);align-self:flex-start}
.msg-me{background:var(--violet);color:#fff;align-self:flex-end}
.msg small{display:block;opacity:.7;font-size:11px;margin-top:2px}
.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:1px}
@media (max-width:720px){.site-head{position:static}}