/* PressUp app UI (not generated sites). Tokens from the approved design canvas. */
:root{
  --paper:#F5F2EC;--surface:#FFFFFF;--ink:#1A1A17;--muted:#5E5A52;--subtle:#6B665D;
  --line:#E4DED3;--line-soft:#EFEAE1;--chip:#F2EEE6;
  --accent:#C2410C;--accent-hover:#9A3412;--accent-soft:#FBE6DA;--brand:#DC542B;
  --ok:#2F6B3A;--ok-soft:#E1EEE3;--warn-soft:#FBF3E4;--warn-ink:#6B4A12;
  --display:'Fraunces',Georgia,serif;--body:'Hanken Grotesk',system-ui,sans-serif;--logo:'Manrope','Hanken Grotesk',sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.5 var(--body)}
a{color:var(--accent)}a:hover{color:var(--accent-hover)}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Logo (approved: orange mark + "PressUp." wordmark) */
.logo{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none}
.logo:hover{color:var(--ink)}
.logo-mark{width:36px;height:36px;border-radius:10px;background:var(--brand);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.logo-mark.sm{width:32px;height:32px;border-radius:9px}
.logo-word{font:800 28px/1 var(--logo);letter-spacing:-.045em}
.logo-word span{color:var(--brand)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:12px;border:1px solid transparent;font-weight:600;font-size:16px;text-decoration:none;cursor:pointer}
.btn-dark{background:var(--ink);color:#fff}.btn-dark:hover{color:#fff;background:#33332e}
.btn-accent{background:var(--accent);color:#fff}.btn-accent:hover{color:#fff;background:var(--accent-hover)}
.btn-ghost{background:var(--surface);border-color:var(--line);color:var(--ink)}.btn-ghost:hover{color:var(--ink);border-color:#cfc7b8}
.btn-sm{min-height:40px;padding:0 16px;font-size:15px;border-radius:10px}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* Page shell: the header and page sections share one content width */
:root{--container:1200px;--gutter:32px}
@media (max-width:700px){:root{--gutter:20px}}
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;max-width:var(--container);margin-inline:auto;padding:24px var(--gutter)}
.topbar a.quiet{color:var(--muted);text-decoration:none;font-weight:500}
@media (max-width:700px){.topbar{padding-block:16px}}

/* Describe */
.describe{display:flex;flex-direction:column;align-items:center;padding:32px 20px 64px;text-align:center}
.pill{display:inline-flex;padding:6px 14px;border-radius:999px;background:var(--accent-soft);color:var(--accent-hover);font-size:14px;font-weight:600}
/* The headline: Fraunces at display size, heavier and softened; the second line in the accent color. */
.describe h1{margin:24px 0 0;font:560 clamp(44px,7vw,84px)/1 var(--display);letter-spacing:-.035em;font-optical-sizing:auto;font-variation-settings:"SOFT" 100,"WONK" 0;text-wrap:balance}
.describe h1 .h1-accent{color:var(--accent)}
.lede{margin:20px 0 0;max-width:660px;font-size:19px;line-height:1.55;color:var(--muted)}
.prompt{margin-top:36px;width:100%;max-width:880px;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:20px 20px 16px;box-shadow:0 1px 2px rgba(26,26,23,.04),0 12px 32px rgba(26,26,23,.06);display:flex;flex-direction:column;gap:12px}
.prompt label{font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.02em}
.prompt textarea{width:100%;border:0;resize:vertical;min-height:110px;font-size:20px;line-height:1.5;background:transparent;padding:0}
.prompt textarea:focus{outline:none}
.prompt:focus-within{border-color:#cfc7b8}
.prompt-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;border-top:1px solid var(--line-soft)}
.hint{font-size:14px;color:var(--subtle)}
.error{color:#9F1D1D;font-size:15px;font-weight:500}
.chip{min-height:40px;padding:0 14px;border-radius:999px;border:1px solid #D9D2C5;background:transparent;cursor:pointer;font-size:14px}
.chip:hover{background:var(--surface)}
/* Example businesses: small cards, each in the colors its site might have; a pick fills the description */
.examples{width:100%;max-width:880px;margin-top:22px}
.examples-label{margin:0 0 10px;color:var(--subtle);font-size:14px}
.example-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.example{position:relative;display:flex;align-items:center;gap:12px;width:100%;height:100%;padding:10px 12px 10px 10px;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 1px 2px rgba(26,26,23,.04);cursor:pointer;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.example:hover{transform:translateY(-2px);border-color:#CFC7B8;box-shadow:0 10px 22px rgba(26,26,23,.08)}
.example:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.example-art{position:relative;display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:11px;transition:transform .25s ease}
.example:hover .example-art{transform:rotate(-6deg) scale(1.05)}
.example-text{display:flex;flex-direction:column;min-width:0}
.example-text b{color:var(--ink);font-size:14px;font-weight:600;line-height:1.3}
.example-text small{color:var(--muted);font-size:12.5px;line-height:1.35}
.example-done{position:absolute;top:-6px;right:-6px;box-sizing:content-box;padding:3px;border:2px solid var(--surface);border-radius:50%;background:var(--accent);color:#fff;opacity:0;transform:scale(.4);transition:opacity .2s ease,transform .25s cubic-bezier(.3,1.6,.5,1)}
.example[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.example[aria-pressed="true"] .example-done{opacity:1;transform:none}
.example-clean .example-art{background:#DDF0EA;color:#1F7A66}
.example-barber .example-art{background:#23252B;color:#F0C36B}
.example-garden .example-art{background:#E8EED9;color:#56762B}
.example-photo .example-art{background:#F7E4DC;color:#A34E36}
/* After a pick, a short nudge on the button */
.btn.is-ready{animation:ready-nudge 1.4s ease 1}
@keyframes ready-nudge{0%,100%{box-shadow:0 0 0 0 rgba(194,65,12,0)}30%{box-shadow:0 0 0 6px rgba(194,65,12,.22)}}
@media (max-width:900px){.example-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.example{gap:9px;padding:8px}.example-art{width:36px;height:36px;border-radius:10px}.example-art>svg:first-child{width:18px;height:18px}.example-text b{font-size:13.5px}}
@media (prefers-reduced-motion:reduce){.example,.example-art,.example-done{transition:none}.example:hover,.example:hover .example-art{transform:none}.btn.is-ready{animation:none}}

/* Building */
.building{display:grid;grid-template-columns:minmax(0,1fr) 480px;gap:64px;padding:32px 64px 64px;max-width:1440px;margin:0 auto}
@media (max-width:1000px){.building{grid-template-columns:1fr;padding:24px 20px}}
.eyebrow{font-size:14px;font-weight:600;color:var(--accent-hover);letter-spacing:.04em;text-transform:uppercase}
.building h1{margin:12px 0 0;font:400 clamp(36px,5vw,56px)/1.05 var(--display);letter-spacing:-.02em}
.progress{margin-top:32px;height:6px;border-radius:999px;background:var(--line);overflow:hidden}
.progress span{display:block;height:100%;width:35%;background:var(--accent);border-radius:999px;transition:width .6s ease}
.checklist{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-direction:column;gap:18px;font-size:18px}
.checklist li{display:flex;align-items:center;gap:14px;color:var(--subtle)}
.checklist .dot{width:28px;height:28px;border-radius:999px;border:2px solid #D9D2C5;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}
.checklist .done{color:var(--ink)}
.checklist .done .dot{border:0;background:var(--ok-soft)}
.checklist .active{color:var(--ink);font-weight:600}
.checklist .active .dot{border-color:var(--accent)}
.checklist .active .dot::after{content:"";width:10px;height:10px;border-radius:999px;background:var(--accent);animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.checklist .active .dot::after{animation:none}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:28px;display:flex;flex-direction:column;gap:16px;align-self:start}
.card h2{margin:0;font-size:18px;font-weight:700}
.quote{margin:0;font-size:17px;line-height:1.6;color:var(--muted);white-space:pre-line}
.notice{display:flex;gap:12px;padding:14px 16px;border-radius:12px;background:var(--warn-soft);color:var(--warn-ink);font-size:15px}
.failed{margin-top:32px;padding:20px;border-radius:14px;background:#FCEDEA;color:#7A1F12;display:flex;flex-direction:column;gap:14px;align-items:flex-start}

/* Editor */
.editor{height:100vh;display:flex;flex-direction:column}
.editor-bar{height:64px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 20px 0 24px;background:var(--surface);border-bottom:1px solid var(--line)}
.editor-bar .group{display:flex;align-items:center;gap:14px}
.site-name{font-weight:700}
.badge{padding:3px 10px;border-radius:999px;background:var(--chip);color:var(--muted);font-size:13px;font-weight:600}
.select{height:38px;padding:0 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);font-size:14px}
.segmented{display:flex;padding:3px;border-radius:10px;background:var(--chip)}
.segmented button{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:14px;cursor:pointer}
.segmented button[aria-pressed="true"]{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(26,26,23,.08)}
.editor-body{flex:1;min-height:0;display:flex}
.chat{width:420px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.chat-log{flex:1;min-height:0;overflow:auto;padding:24px;display:flex;flex-direction:column;gap:18px}
#messages{display:flex;flex-direction:column;gap:18px}
#messages:empty{display:none}
.msg{display:flex;gap:12px;font-size:15px;line-height:1.55}
.msg p{margin:0}
.avatar{width:28px;height:28px;flex-shrink:0;border-radius:8px;background:var(--brand);display:inline-flex;align-items:center;justify-content:center}
.msg-failed p{color:#7A1F12}
.bubble-user{align-self:flex-end;max-width:300px;padding:12px 16px;border-radius:16px 16px 4px 16px;background:var(--ink);color:#fff;font-size:15px;line-height:1.5;white-space:pre-line;overflow-wrap:anywhere}
.undo{margin-top:8px;min-height:32px;padding:0 12px;border:0;border-radius:8px;background:var(--chip);font-size:14px;font-weight:600;cursor:pointer}
.undo:hover{background:#E8E2D6}
.typing{display:flex;gap:5px;align-items:center;height:24px}
.typing i{width:7px;height:7px;border-radius:999px;background:#B9B2A5;animation:blink 1.2s infinite}
.typing i:nth-child(3){animation-delay:.2s}.typing i:nth-child(4){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.3}40%{opacity:1}}
@media (prefers-reduced-motion:reduce){.typing i{animation:none}}
.chat-foot{padding:14px 20px 18px;border-top:1px solid var(--line-soft);display:flex;flex-direction:column;gap:10px}
.foot-label{margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--subtle)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chat-foot .chip{min-height:34px;font-size:14px;background:var(--surface)}
.chat-foot .chip:hover:not([disabled]){background:#FAF8F4}
.chip[disabled]{opacity:.55;cursor:not-allowed}
.chip-todo{border-style:dashed;text-align:left}
.composer{display:flex;align-items:flex-end;gap:8px;padding:8px 8px 8px 14px;border:1px solid #D9D2C5;border-radius:14px;background:var(--surface)}
.composer:focus-within{border-color:var(--ink)}
.composer textarea{flex:1;border:0;resize:none;outline:none;font-size:15px;line-height:1.45;padding:6px 0;background:transparent}
.send{width:44px;height:44px;flex-shrink:0;border:0;border-radius:10px;background:var(--ink);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.send[disabled]{opacity:.4;cursor:not-allowed}
.chat-error{margin:0;color:#9F1D1D;font-size:14px}
.stage{flex:1;min-width:0;padding:24px 28px 28px;display:flex;justify-content:center}
.frame{width:100%;display:flex;flex-direction:column;border-radius:14px;overflow:hidden;border:1px solid #DDD6C9;box-shadow:0 16px 40px rgba(26,26,23,.1);background:var(--surface);transition:width .25s ease}
.frame.phone{width:390px}
.frame-bar{height:40px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#EFEBE3;border-bottom:1px solid #DDD6C9;font-size:13px;color:var(--muted)}
.frame iframe{flex:1;width:100%;border:0;background:#fff}
@media (max-width:900px){
  .editor{height:auto;min-height:100vh}
  .editor-bar{height:auto;flex-wrap:wrap;padding:10px 12px}
  .editor-body{flex-direction:column-reverse}
  .chat{width:auto;border-right:0;border-top:1px solid var(--line)}
  .chat-log{max-height:50vh}
  .stage{padding:12px;height:60vh}
}
/* Photo uploads */
.msg-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.msg-actions .undo{margin-top:0}
.upload-btn{min-height:32px;padding:0 12px;border:0;border-radius:8px;background:var(--accent);color:#fff;font-size:14px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.upload-btn:hover{background:var(--accent-hover)}
.upload-btn[disabled]{opacity:.5;cursor:not-allowed}
.todo-item{display:inline-flex;align-items:center;gap:2px}
.chat-foot .chip-upload{border:1px solid var(--accent);color:var(--accent);background:var(--accent-soft);font-weight:600}
.chat-foot .chip-upload:hover:not([disabled]){background:#F8D8C5}
.dismiss{width:32px;height:32px;border:0;border-radius:999px;background:transparent;color:var(--subtle);font-size:18px;line-height:1;cursor:pointer}
.dismiss:hover{background:var(--chip);color:var(--ink)}
.attach{width:44px;height:44px;flex-shrink:0;border:0;border-radius:10px;background:transparent;color:var(--muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.attach:hover:not([disabled]){background:var(--chip);color:var(--ink)}
.attach[disabled]{opacity:.4;cursor:not-allowed}
/* Leads inbox */
#leads-button .count{min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--accent);color:#fff;font-size:13px;display:inline-flex;align-items:center;justify-content:center}
.inbox{width:min(640px,calc(100vw - 32px));max-height:min(80vh,760px);padding:0;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--ink)}
.inbox::backdrop{background:rgba(26,26,23,.45)}
.inbox-head{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;padding:16px 16px 12px 24px;background:var(--surface);border-bottom:1px solid var(--line-soft)}
.inbox-head h2{margin:0;font:600 22px/1.2 var(--display)}
.inbox-note{margin:0;padding:24px;color:var(--muted)}
.inbox-list{list-style:none;margin:0;padding:8px 24px 24px}
.lead{padding:16px 0;border-bottom:1px solid var(--line-soft)}
.lead:last-child{border-bottom:0}
.lead-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 10px}
.lead-head time{color:var(--muted);font-size:14px}
.badge-new{background:var(--accent-soft);color:var(--accent-hover)}
.lead dl{display:grid;grid-template-columns:minmax(110px,max-content) 1fr;gap:4px 16px;margin:0;font-size:15px}
.lead dt{color:var(--muted)}
.lead dd{margin:0;white-space:pre-line;overflow-wrap:anywhere}
@media (max-width:599px){.lead dl{grid-template-columns:1fr}.lead dd{margin-bottom:6px}}
/* Publishing */
.badge-live{background:var(--ok-soft);color:var(--ok)}
.live-link{font-size:14px;font-weight:600;color:var(--ok)}
.publish-body{padding:16px 24px 24px;display:flex;flex-direction:column;gap:14px}
.publish-body p{margin:0}
.publish-ok{color:var(--ok);font-weight:600}
.publish-notice{padding:10px 14px;border-radius:10px;background:var(--ok-soft);color:var(--ok);font-weight:600}
.publish-notice.is-error{background:#FBE9E7;color:#7A1F12}
.publish-list{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;color:var(--muted)}
.publish-actions{display:flex;flex-wrap:wrap;gap:10px}
.publish-sub{margin:8px 0 0;font:600 16px/1.3 var(--body)}
.publish-releases{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.publish-releases li{display:flex;align-items:center;gap:10px;min-height:48px;border-bottom:1px solid var(--line-soft)}
.publish-releases li:last-child{border-bottom:0}
.publish-releases .undo{margin:0 0 0 auto}
.publish-releases .badge{margin-left:auto}
.publish-meta{color:var(--muted);font-size:14px}
.link-button{align-self:flex-start;min-height:44px;padding:0;border:0;background:none;color:#7A1F12;font:inherit;font-size:14px;text-decoration:underline;cursor:pointer}
/* Upgrading a first-format site */
.upgrade-card{padding:14px 16px;border:1px solid var(--accent);border-radius:14px;background:var(--accent-soft);font-size:14px;line-height:1.5;display:flex;flex-direction:column;gap:8px}
.upgrade-card p{margin:0}
.upgrade-title{font-weight:700;font-size:15px}

/* Accounts: sign-in pages, top-bar account links, the owner's sites, the editor before signing in */
.account{display:flex;align-items:center;gap:20px}
.account form{margin:0}
.text-button{padding:0;border:0;background:none;color:var(--accent);font:inherit;font-weight:600;text-decoration:underline;cursor:pointer}
.text-button.quiet,.account .quiet{color:var(--muted);text-decoration:none;font-weight:500}
.text-button.quiet:hover,.account .quiet:hover{color:var(--ink)}
.auth{display:flex;justify-content:center;padding:24px 20px 80px}
.auth-card{width:100%;max-width:440px;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:36px 32px;box-shadow:0 1px 2px rgba(26,26,23,.04),0 12px 32px rgba(26,26,23,.06);display:flex;flex-direction:column;gap:20px}
.auth-card h1{margin:0;font:400 36px/1.1 var(--display);letter-spacing:-.02em}
.auth-card .lede{margin:10px 0 0;font-size:16px}
.auth-card .notice,.auth-card .error{margin:0}
.auth-form{display:flex;flex-direction:column;gap:14px}
.auth-form .hint{margin:0}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:14px;font-weight:600}
.field .error{margin:0}
.input{min-height:50px;width:100%;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);font-size:17px}
.input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.input[aria-invalid="true"]{border-color:#9F1D1D}
.code-input{text-align:center;font-size:28px;letter-spacing:.35em;font-variant-numeric:tabular-nums}
.btn-google{background:var(--surface);border-color:var(--line);color:var(--ink)}
.btn-google:hover{color:var(--ink);border-color:#cfc7b8;background:#FBFAF7}
.btn-block,.auth-card>.btn,.auth-form .btn{width:100%}
.or{display:flex;align-items:center;gap:12px;margin:0;color:var(--subtle);font-size:14px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.auth-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:15px}
.auth-foot form{margin:0}
@media (max-width:480px){.auth-card{padding:28px 20px}.auth-card h1{font-size:30px}}
.signin-card{padding:14px 16px;border:1px solid var(--accent);border-radius:14px;background:var(--accent-soft);font-size:14px;line-height:1.5;display:flex;flex-direction:column;gap:10px}
.signin-card p{margin:0}
.signin-actions{display:flex;flex-wrap:wrap;gap:8px}
.editor:not(.is-guest) .guest-only{display:none}
/* Before signing in the owner can look, not change: the script keeps running, its controls are hidden. */
.editor.is-guest .composer,.editor.is-guest .chat-foot>.chips,.editor.is-guest #todo-wrap,.editor.is-guest #upgrade-card,
.editor.is-guest .msg-actions,.editor.is-guest #leads-button,.editor.is-guest #publish-button,.editor.is-guest #live-link{display:none!important}
.plan-card{display:none}
.editor.needs-plan .plan-card{display:flex}
.plan-card form{margin:0}
/* Free edits used up: the owner can still look, undo and publish; asking for changes needs a subscription. */
.editor.needs-plan .composer,.editor.needs-plan .chat-foot>.chips,.editor.needs-plan #todo-wrap{display:none!important}
.edits-left{margin:0;text-align:right}
.chat-foot>.notice,.chat-foot>.chat-error{margin:0}
.limit-card{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:28px;width:100%;max-width:880px;padding:14px 16px;border:1px solid var(--accent);border-radius:14px;background:var(--accent-soft);text-align:left;font-size:15px}
.limit-card p,.limit-card form{margin:0}

/* Landing page (the home page: describe, then what PressUp does) */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.assurances{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px;margin:28px 0 0;padding:0;color:var(--muted);font-size:14px}
.assurances li{display:flex;align-items:center;gap:8px}
.assurances li::before{content:"\2713";color:var(--ok);font-weight:700}
.band{padding:88px 0;border-top:1px solid var(--line)}
.band-alt{background:var(--surface)}
.band-head{max-width:640px;margin-bottom:40px}
.band h2{margin:10px 0 0;font:400 clamp(32px,4vw,46px)/1.08 var(--display);letter-spacing:-.02em}
.band h3{margin:0;font-size:18px;font-weight:700;line-height:1.3}
/* :where keeps this at no specificity, so components (chat bubbles, labels) keep their own colors. */
:where(.band) p{color:var(--muted);line-height:1.6}
@media (max-width:700px){.band{padding:64px 0}}
.how{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.how li{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:18px}
/* An arrow in the gap between steps (wide screens) */
.how li:not(:last-child)::after{content:"";position:absolute;z-index:1;top:104px;right:-22px;width:12px;height:12px;border:solid var(--accent);border-width:2px 2px 0 0;transform:rotate(45deg)}
.how-body{padding:22px 26px 28px}
.how-n{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;margin-bottom:14px;border-radius:10px;background:var(--accent-soft);color:var(--accent-hover);font:400 20px/1 var(--display)}
.how-body p{margin:10px 0 0}
@media (max-width:860px){.how{grid-template-columns:1fr}.how li:not(:last-child)::after{display:none}}
/* Step illustrations, drawn in CSS: the form, a chat, the published site */
.how-art{display:flex;align-items:center;justify-content:center;height:200px;margin:10px 10px 0;padding:18px;border-radius:12px;overflow:hidden;background-color:var(--paper);background-image:radial-gradient(#E1DACD 1px,transparent 1px);background-size:14px 14px}
.art-card{width:100%;max-width:270px;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 24px rgba(26,26,23,.08);text-align:left}
.art-card small{display:block;color:var(--muted);font-size:10px;font-weight:600}
.art-card p{margin:6px 0 12px;color:var(--ink);font-size:13px;line-height:1.45}
.art-caret{display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-2px;background:var(--accent);animation:art-caret 1s steps(1) infinite}
@keyframes art-caret{50%{opacity:0}}
.art-btn{display:flex;width:max-content;margin-left:auto;padding:6px 11px;border-radius:8px;background:var(--ink);color:#fff;font-size:11px;font-weight:600}
.how-art-ask{flex-direction:column;align-items:stretch;gap:8px}
.art-you,.art-pu{margin:0;font-size:13px;line-height:1.35}
.art-you{align-self:flex-end;padding:8px 12px;border-radius:12px 12px 4px 12px;background:var(--ink);color:#fff}
.art-pu{align-self:flex-start;display:flex;align-items:center;gap:8px;padding:7px 12px 7px 7px;border:1px solid var(--line);border-radius:12px 12px 12px 4px;background:var(--surface);color:var(--ink)}
.art-avatar{display:inline-flex;flex:none;align-items:center;justify-content:center;width:20px;height:20px;border-radius:6px;background:var(--brand)}
.art-browser{width:100%;max-width:270px;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 24px rgba(26,26,23,.08)}
.art-browser-bar{display:flex;align-items:center;gap:5px;padding:7px 9px;background:#FBFAF7;border-bottom:1px solid var(--line-soft)}
.art-browser-bar i{width:7px;height:7px;border-radius:50%;background:#D9D2C5}
.art-live{display:inline-flex;align-items:center;gap:5px;margin-left:auto;padding:2px 8px;border-radius:999px;background:var(--ok-soft);color:var(--ok);font-size:10px;font-weight:700}
.art-live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok);animation:art-live 2s ease-in-out infinite}
@keyframes art-live{50%{opacity:.35}}
.art-browser-page{display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding:16px 14px 18px;background:#15161A;color:#F2EFE8}
.art-browser-page b{font:400 17px/1.1 var(--display)}
.art-line{width:80%;height:6px;border-radius:3px;background:#3A3C42}
.art-line.short{width:55%}
.art-cta{margin-top:4px;padding:4px 10px;border-radius:999px;background:#D4A24C;color:#111;font-size:10px;font-weight:700}
@media (prefers-reduced-motion:reduce){.art-caret,.art-live::before{animation:none}}
/* Made for: the trades as icon chips on one panel; the last chip goes back to the description */
.made-for{display:flex;align-items:center;gap:20px 36px;margin-top:28px;padding:22px 24px;background:var(--surface);border:1px solid var(--line);border-radius:18px}
.made-for-head{flex:none;width:220px}
.made-for-head h3{margin:0;font:400 23px/1.15 var(--display);letter-spacing:-.01em}
.made-for-head p{margin:6px 0 0;font-size:14px;line-height:1.5}
.trades{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.trade{display:inline-flex;align-items:center;gap:8px;padding:4px 13px 4px 4px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink);font-size:14px;font-weight:500;transition:transform .2s ease,border-color .2s ease}
.trade:hover{transform:translateY(-2px);border-color:#CFC7B8;color:var(--ink)}
a.trade{text-decoration:none}
.trade-icon{display:grid;flex:none;place-items:center;width:28px;height:28px;border-radius:50%;transition:transform .25s ease}
.trade:hover .trade-icon{transform:rotate(-10deg)}
.trade-yours{border:1px dashed var(--accent);background:transparent;color:var(--accent-hover);font-weight:600;text-decoration:none}
.trade-yours:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-hover)}
.trade-yours .trade-icon{background:var(--accent);color:#fff}
.trade-yours:hover .trade-icon{transform:rotate(90deg)}
.trade-yours:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:860px){.made-for{flex-direction:column;align-items:flex-start;padding:20px}.made-for-head{width:auto}}
@media (max-width:520px){.made-for{gap:14px}.trades{gap:6px}.trade{gap:6px;padding:3px 10px 3px 3px;font-size:13px}.trade-icon{width:24px;height:24px}.trade-icon svg{width:14px;height:14px}}
@media (prefers-reduced-motion:reduce){.trade,.trade-icon{transition:none}.trade:hover,.trade:hover .trade-icon{transform:none}}
.band-ink{padding:64px 0;background:var(--ink);border-top:0}
.band-ink h2{margin:0;color:#FFFFFF}
.band-ink p{max-width:620px;margin:12px 0 0;color:#D6D1C7}
.start{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
/* Questions: cards with icons; an open answer reads like a reply from PressUp */
.faq{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:48px;align-items:start}
.faq-side{position:sticky;top:24px}
.faq .band-head{margin:0}
.faq .band-head p:last-child{margin:12px 0 0}
.faq-art{display:flex;flex-direction:column;gap:10px;max-width:300px;margin-top:28px;padding:18px;border:1px solid var(--line);border-radius:16px;background-color:var(--paper);background-image:radial-gradient(#E1DACD 1px,transparent 1px);background-size:12px 12px}
.faq-art p{margin:0}
.faq-art-q{align-self:flex-end;padding:9px 14px;border-radius:14px 14px 4px 14px;background:var(--ink);color:#fff;font-size:14px}
.faq-art-a{display:flex;align-items:flex-end;gap:8px}
.faq-dots{display:flex;gap:4px;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:14px 14px 14px 4px}
.faq-dots i{width:6px;height:6px;border-radius:50%;background:var(--subtle);animation:demo-dot 1s ease-in-out infinite}
.faq-dots i:nth-child(2){animation-delay:.15s}.faq-dots i:nth-child(3){animation-delay:.3s}
.faq-avatar{display:inline-flex;flex:none;align-items:center;justify-content:center;width:22px;height:22px;border-radius:7px;background:var(--brand)}
.faq-list{display:grid;gap:10px}
.faq-list details{background:var(--surface);border:1px solid var(--line);border-radius:14px;transition:border-color .2s ease,box-shadow .2s ease}
.faq-list details:hover,.faq-list details[open]{border-color:#CFC7B8}
.faq-list details[open]{box-shadow:0 10px 24px rgba(26,26,23,.06)}
.faq-list summary{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:13px;font-size:16px;font-weight:600;list-style:none;cursor:pointer}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.faq-icon{display:grid;flex:none;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--accent-soft);color:var(--accent)}
.faq-q{flex:1}
.faq-toggle{display:grid;flex:none;place-items:center;width:28px;height:28px;border:1px solid var(--line);border-radius:50%;color:var(--accent);transition:transform .25s ease}
.faq-list details[open] .faq-toggle{transform:rotate(45deg)}
/* The avatar sits under the question's icon; the reply lines up with the question. */
.faq-answer{display:flex;align-items:flex-start;gap:21px;padding:0 14px 14px 21px}
.faq-answer .faq-avatar{margin-top:2px}
.faq-answer p{max-width:620px;margin:0;padding:10px 14px;background:var(--paper);border:1px solid var(--line-soft);border-radius:4px 14px 14px 14px;color:var(--ink);font-size:15px;line-height:1.55}
.faq-list details[open] .faq-answer{animation:faq-in .3s ease-out}
@keyframes faq-in{from{opacity:0;transform:translateY(-4px)}}
@media (max-width:860px){.faq{grid-template-columns:1fr;gap:24px}.faq-side{position:static}.faq-art{display:none}}
@media (max-width:520px){.faq-list summary{gap:12px;font-size:15px}.faq-answer{gap:12px;padding-left:14px}.faq-answer .faq-avatar{display:none}}
@media (prefers-reduced-motion:reduce){.faq-dots i{animation:none}.faq-list details,.faq-toggle{transition:none}.faq-list details[open] .faq-answer{animation:none}}

/* Made with PressUp: rows of example sites drifting in opposite directions, fading out at the edges and bottom */
.made-with{padding:8px 0 40px;overflow:hidden}
.made-with-head{max-width:760px;margin-bottom:36px;text-align:center}
.made-with-head h2{margin:10px 0 0;font:400 clamp(30px,3.6vw,42px)/1.1 var(--display);letter-spacing:-.02em;text-wrap:balance}
.made-with-head p:last-child{margin:12px 0 0;color:var(--muted)}
.made-with-rows{display:grid;gap:22px;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent),linear-gradient(to bottom,#000 55%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent),linear-gradient(to bottom,#000 55%,transparent);
  mask-composite:intersect}
.marquee{overflow:hidden}
.marquee-track{display:flex;gap:24px;width:max-content;margin:0;padding:6px 0 10px;list-style:none;animation:marquee 70s linear infinite}
.marquee-reverse .marquee-track{animation-duration:80s;animation-direction:reverse}
.marquee:hover .marquee-track{animation-play-state:paused}
/* Two identical halves: moving by half the track (plus half a gap) lands exactly where it started. */
@keyframes marquee{to{transform:translateX(calc(-50% - 12px))}}
.site-shot{flex:none;width:380px}
.site-shot figure{margin:0}
.site-shot-frame{overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 1px 2px rgba(26,26,23,.05),0 14px 32px rgba(26,26,23,.10);transition:transform .3s ease}
.site-shot:hover .site-shot-frame{transform:translateY(-4px)}
.site-shot-bar{display:flex;gap:5px;padding:8px 10px;background:#FBFAF7;border-bottom:1px solid var(--line-soft)}
.site-shot-bar i{width:7px;height:7px;border-radius:50%;background:#D9D2C5}
.site-shot img{display:block;width:100%;height:auto}
.site-shot figcaption{display:flex;gap:8px;margin-top:10px;color:var(--muted);font-size:14px}
.site-shot figcaption b{color:var(--ink);font-weight:600}
.made-with+.band{border-top:0}
@media (max-width:700px){.site-shot{width:280px}.made-with-head{margin-bottom:24px}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}.marquee{overflow-x:auto}.site-shot-frame{transition:none}}

/* Editing: a demo of the editor. The owner types, PressUp answers, the preview changes (played by describe.blade.php). */
.band-head-center{margin-inline:auto;text-align:center}
.editor-demo{margin:0}
.editor-demo figcaption{margin-top:14px;color:var(--subtle);font-size:13px;text-align:center}
.demo-window{max-width:1040px;margin:0 auto;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:0 1px 2px rgba(26,26,23,.05),0 30px 60px rgba(26,26,23,.12)}
.demo-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#FBFAF7;border-bottom:1px solid var(--line)}
.demo-bar i{width:9px;height:9px;border-radius:50%;background:#D9D2C5}
.demo-bar span{margin-left:10px;font-size:13px;font-weight:600}
.demo-bar b{margin-left:auto;padding:5px 12px;border-radius:8px;background:var(--accent);color:#fff;font-size:12px;font-weight:600}
.demo-body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);height:440px}
.demo-chat{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--line)}
.demo-log{display:flex;flex:1;flex-direction:column;justify-content:flex-end;gap:10px;min-height:0;padding:18px;overflow:hidden}
.demo-log>*{display:none}
.demo-log>.is-on{display:flex;animation:demo-in .35s ease-out}
@keyframes demo-in{from{opacity:0;transform:translateY(8px)}}
.demo-msg{margin:0;max-width:88%;padding:10px 14px;border-radius:14px;font-size:14px;line-height:1.45}
.demo-you{align-self:flex-end;background:var(--ink);color:#fff;border-bottom-right-radius:4px}
.demo-pu{align-self:flex-start;gap:10px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);color:var(--ink);border-bottom-left-radius:4px}
.demo-avatar{display:inline-flex;flex:none;align-items:center;justify-content:center;width:22px;height:22px;border-radius:7px;background:var(--brand)}
.demo-typing{align-self:flex-start;gap:4px;margin:0;padding:12px 14px;background:var(--paper);border:1px solid var(--line);border-radius:14px}
.demo-typing i{width:6px;height:6px;border-radius:50%;background:var(--subtle);animation:demo-dot 1s ease-in-out infinite}
.demo-typing i:nth-child(2){animation-delay:.15s}.demo-typing i:nth-child(3){animation-delay:.3s}
@keyframes demo-dot{50%{opacity:.25;transform:translateY(-2px)}}
.demo-composer{display:flex;align-items:center;gap:10px;margin:0 14px 14px;padding:10px 10px 10px 14px;border:1px solid var(--line);border-radius:12px;font-size:14px}
.demo-draft{flex:1;min-height:1.4em;color:var(--ink)}
.demo-draft:empty::before{content:"Ask for a change\2026";color:var(--subtle)}
.demo-draft:not(:empty)::after{content:"";display:inline-block;width:2px;height:1em;margin-left:1px;vertical-align:-2px;background:var(--accent)}
.demo-composer b{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;background:var(--ink);color:#fff;font-size:15px}
.demo-preview{display:flex;align-items:center;justify-content:center;min-height:0;padding:28px;background-color:var(--paper);background-image:radial-gradient(#E1DACD 1px,transparent 1px);background-size:14px 14px}
/* The example site: plain at first, then "more premium" (dark, gold, serif headline) */
.demo-site{--s-bg:#FFFFFF;--s-text:#1C2230;--s-muted:#5B6474;--s-line:#E3E7EE;--s-accent:#2F5FD0;--s-on:#FFFFFF;
  width:100%;max-width:470px;overflow:hidden;background:var(--s-bg);color:var(--s-text);border:1px solid var(--s-line);border-radius:12px;box-shadow:0 12px 30px rgba(26,26,23,.12);
  transition:background-color .8s,color .8s,border-color .8s}
.demo-window.is-premium .demo-site{--s-bg:#15161A;--s-text:#F2EFE8;--s-muted:#B7B1A6;--s-line:#2A2C31;--s-accent:#D4A24C;--s-on:#111111}
.demo-site *{transition:background-color .8s,color .8s,border-color .8s}
.demo-site-bar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--s-line)}
.demo-site-bar b{font-size:15px}
.demo-site-bar span,.demo-site-btn{padding:5px 12px;border-radius:999px;background:var(--s-accent);color:var(--s-on);font-size:11px;font-weight:700}
.demo-site-hero{padding:24px 16px 20px}
.demo-site-hero small{display:block;color:var(--s-accent);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.demo-site-hero strong{display:block;margin:8px 0 14px;font:700 24px/1.15 var(--body);letter-spacing:-.01em}
.demo-window.is-premium .demo-site-hero strong{font:400 26px/1.12 var(--display);letter-spacing:-.015em}
.demo-site-btn{display:inline-flex}
.demo-site-list{display:grid;gap:8px;margin:0;padding:0 16px 18px;list-style:none}
.demo-site-list li{display:flex;justify-content:space-between;padding:10px 12px;border:1px solid var(--s-line);border-radius:10px;font-size:13px}
.demo-site-list .demo-new{display:none}
.demo-site-list .demo-new.is-on{display:flex;border-color:var(--s-accent);animation:demo-new 1.6s ease-out}
@keyframes demo-new{from{opacity:0;transform:translateY(-6px);box-shadow:0 0 0 6px color-mix(in srgb,var(--s-accent) 35%,transparent)}40%{opacity:1;transform:none}to{box-shadow:0 0 0 0 transparent}}
.editing-points{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 32px;margin:32px 0 0;padding:0;list-style:none}
.editing-points li{display:flex;align-items:center;gap:10px;font-weight:500}
.editing-points svg{color:var(--accent)}
@media (max-width:760px){
  .demo-body{grid-template-columns:1fr;height:auto}
  .demo-preview{order:-1;padding:18px}
  .demo-chat{border-right:0;border-top:1px solid var(--line)}
  .demo-log{min-height:250px}
}
@media (prefers-reduced-motion:reduce){.demo-log>.is-on,.demo-site-list .demo-new.is-on{animation:none}.demo-typing i{animation:none}.demo-site,.demo-site *{transition:none}}

/* What you get: compact cards, each with a small illustration drawn in CSS */
.gets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.gets>li{display:flex;align-items:center;gap:16px;padding:12px 18px 12px 12px;background:var(--surface);border:1px solid var(--line);border-radius:16px;transition:transform .25s ease,box-shadow .25s ease}
.gets>li:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(26,26,23,.07)}
.get-art{display:flex;flex:none;align-items:center;justify-content:center;width:104px;height:84px;overflow:hidden;border-radius:11px;background-color:var(--paper);background-image:radial-gradient(#E1DACD 1px,transparent 1px);background-size:10px 10px}
.get-body{min-width:0}
.get-body h3{margin:0;font-size:16px}
.get-body p{margin:4px 0 0;font-size:14px;line-height:1.45}
@media (max-width:1179px){.gets{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:759px){.gets{grid-template-columns:1fr;gap:12px}}
@media (prefers-reduced-motion:reduce){.gets>li{transition:none}.gets>li:hover{transform:none}}
/* Three looks for three businesses */
.looks{display:flex;align-items:center}
.look{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:30px;height:40px;border-radius:7px;box-shadow:0 6px 12px rgba(26,26,23,.12)}
.look+.look{margin-left:-4px}
.look b{font-size:14px;line-height:1}
.look i{width:14px;height:4px;border-radius:2px}
.look-warm{background:#FAF4E9;color:#2E241C;border:1px solid #E4D7C1;transform:rotate(-8deg)}
.look-warm b{font-family:var(--display);font-weight:500}
.look-warm i{background:#9A6B2F}
.look-bold{position:relative;z-index:1;background:#0E1116;color:#F4F4F2;transform:translateY(-3px)}
.look-bold b{font-weight:800;letter-spacing:-.02em}
.look-bold i{background:#FF5A1F}
.look-soft{background:#F4EFFB;color:#2A2233;border:1px solid #E3D8F3;transform:rotate(8deg)}
.look-soft b{font-family:var(--display);font-weight:600;font-variation-settings:"SOFT" 100}
.look-soft i{background:#7E4CC8}
/* Stacked pages */
.pages{position:relative;width:62px;height:60px}
.page-card{position:absolute;display:flex;flex-direction:column;gap:4px;width:42px;height:52px;padding:7px 6px;background:var(--surface);border:1px solid var(--line);border-radius:6px;box-shadow:0 4px 10px rgba(26,26,23,.07)}
.page-card b{width:60%;height:4px;border-radius:2px;background:#CFC6B6}
.page-card i{height:3px;border-radius:2px;background:#E6E0D5}
.page-card i.short{width:60%}
.page-card:nth-child(1){top:0;left:19px;transform:rotate(9deg)}
.page-card:nth-child(2){top:3px;left:10px;transform:rotate(-2deg)}
.page-card:nth-child(3){top:8px;left:0;border-color:var(--accent);box-shadow:0 6px 14px rgba(194,65,12,.14)}
.page-card:nth-child(3) b{background:var(--accent)}
/* A new enquiry */
.lead-card{position:relative;display:flex;flex-direction:column;gap:5px;width:70px;padding:8px;background:var(--surface);border:1px solid var(--line);border-radius:9px;box-shadow:0 6px 14px rgba(26,26,23,.10)}
.lead-card-head{display:flex;align-items:center;gap:5px;margin-bottom:2px}
.lead-avatar{display:grid;place-items:center;flex:none;width:16px;height:16px;border-radius:50%;background:var(--accent-soft);color:var(--accent-hover);font-size:9px;font-weight:700}
.lead-card i{display:block;flex:1;height:4px;border-radius:2px;background:#E6E0D5}
.lead-card-head i{background:#CFC6B6}
.lead-card>i.short{width:65%;flex:none}
.lead-badge{position:absolute;top:-7px;right:-7px;display:grid;place-items:center;width:17px;height:17px;border:2px solid var(--paper);border-radius:50%;background:var(--accent);color:#fff;font-size:9px;font-weight:700}
/* Computer and phone */
.screens{position:relative;width:78px;height:52px}
.screen{position:absolute;padding:3px;background:#2A2A26;border-radius:5px;box-shadow:0 6px 12px rgba(26,26,23,.14)}
.screen-desktop{top:0;left:0;width:66px;height:44px}
.screen-phone{right:0;bottom:0;width:20px;height:36px;border-radius:5px;padding:2px}
.screen-site{display:flex;flex-direction:column;gap:3px;height:100%;padding:4px;overflow:hidden;background:#FAF4E9;border-radius:3px}
.screen-phone .screen-site{padding:3px 2px;border-radius:3px}
.screen-site b{width:45%;height:3px;border-radius:2px;background:#2E241C}
.screen-site i{height:4px;border-radius:2px;background:#DCCDB3}
.screen-site span{width:50%;height:5px;margin-top:auto;border-radius:999px;background:#9A6B2F}
/* Photos added from the chat */
.photo-tiles{display:flex;align-items:center}
.photo-tiles span{display:grid;place-items:center;width:32px;height:32px;border:2px solid var(--surface);border-radius:8px;color:rgba(255,255,255,.9);box-shadow:0 5px 10px rgba(26,26,23,.12)}
.photo-tiles span+span{margin-left:-5px}
.photo-tiles span:nth-child(1){background:linear-gradient(135deg,#C9A27A,#7C5A3C);transform:rotate(-8deg)}
.photo-tiles span:nth-child(2){position:relative;z-index:1;background:linear-gradient(135deg,#7FA3B8,#3F5E73);transform:translateY(-4px)}
.photo-tiles span:nth-child(3){background:linear-gradient(135deg,#9CB386,#566B45);transform:rotate(8deg)}
/* Live, with an earlier version to restore */
.host-card{display:flex;flex-direction:column;gap:4px;width:72px;padding:6px 7px;background:var(--surface);border:1px solid var(--line);border-radius:9px;box-shadow:0 6px 14px rgba(26,26,23,.10)}
.host-card-head span{display:inline-flex;align-items:center;gap:4px;padding:1px 6px;border-radius:999px;background:var(--ok-soft);color:var(--ok);font-size:9px;font-weight:700}
.host-card-head span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ok)}
.host-card p{display:flex;align-items:center;gap:4px;margin:0;padding:4px 5px;border-radius:5px;background:var(--paper)}
.host-card p i{flex:1;height:4px;border-radius:2px;background:#DCD4C6}
.host-card p i.short{flex:none;width:55%}
.host-card p em{display:grid;place-items:center;margin-left:auto;color:var(--accent)}

/* Tones: a soft background (--tb) and a strong ink (--tf) for icons and badges (App\Marketing: 'tone') */
.tone-orange{--tb:#FBE6DA;--tf:#C2410C}
.tone-teal{--tb:#DDF0EA;--tf:#1F7A66}
.tone-amber{--tb:#FBEBD0;--tf:#94600F}
.tone-sage{--tb:#E8EED9;--tf:#56762B}
.tone-blue{--tb:#E0EAF5;--tf:#2F5D8A}
.tone-lilac{--tb:#ECE5F7;--tf:#6A45A8}
.tone-rose{--tb:#F7E4DC;--tf:#A34E36}
.tone-ink{--tb:#23252B;--tf:#F0C36B}
.mega-icon,.case-icon,.trade-icon,.uc-n,.fa-avatar{background:var(--tb,var(--accent-soft));color:var(--tf,var(--accent))}
.mega-icon{display:grid;flex:none;place-items:center;width:38px;height:38px;border-radius:10px}

/* Site header: sticky; Products, Use Cases and Resources open panels with pictures (partials/site-header) */
html{scroll-padding-top:84px}
.site-header{position:sticky;top:0;z-index:50;background:rgba(245,242,236,.88);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid transparent;transition:border-color .2s ease}
.site-header.is-scrolled,.site-header.is-menu-open{border-bottom-color:var(--line)}
.site-header-inner{position:relative;display:flex;align-items:center;gap:24px;max-width:var(--container);margin-inline:auto;padding:14px var(--gutter)}
.mainnav{display:flex;flex:1;justify-content:center}
.mainnav-list{display:flex;align-items:center;gap:2px;margin:0;padding:0;list-style:none}
.mainnav-link{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border:0;border-radius:10px;background:none;color:var(--ink);font-size:15px;font-weight:500;text-decoration:none;cursor:pointer;transition:background .15s ease}
.mainnav-link:hover,.is-open>.mainnav-link{background:rgba(26,26,23,.06);color:var(--ink)}
.mainnav-link.is-active{color:var(--accent-hover)}
.nav-chevron{opacity:.55;transition:transform .2s ease}
.is-open>.mainnav-link .nav-chevron{transform:rotate(180deg)}
.header-actions{display:flex;align-items:center;gap:16px}
.header-link{color:var(--ink);font-size:15px;font-weight:500;text-decoration:none}
.header-link:hover{color:var(--accent-hover)}
/* Panels hang from the header, centered, so they always fit. */
.mega{position:absolute;top:calc(100% - 6px);left:50%;z-index:60;display:flex;gap:10px;padding:10px;background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:0 28px 60px rgba(26,26,23,.14),0 2px 6px rgba(26,26,23,.05);opacity:0;visibility:hidden;transform:translate(-50%,8px);transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s}
.mega::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.is-open>.mega{opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:0s}
html:not(.js-menu) .mainnav-item:hover>.mega,html:not(.js-menu) .mainnav-item:focus-within>.mega{opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:0s}
.mega-label{margin:8px 10px 6px;color:var(--subtle);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.mega-main{display:flex;flex-direction:column}
.mega-products .mega-main{width:390px}
.mega-resources .mega-main{width:320px}
.mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin:0;padding:0;list-style:none}
.mega-list{display:grid;gap:0;margin:0;padding:0;list-style:none}
.mega-item{display:flex;align-items:flex-start;gap:12px;padding:10px;border-radius:12px;color:var(--ink);text-decoration:none;transition:background .15s ease}
.mega-item:hover{background:var(--paper);color:var(--ink)}
.mega-item .mega-icon{transition:transform .2s ease}
.mega-item:hover .mega-icon{transform:rotate(-6deg) scale(1.06)}
.mega-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.mega-text b{font-size:14.5px;font-weight:600;line-height:1.3}
.mega-text small{color:var(--muted);font-size:13px;line-height:1.4}
.mega-more{display:inline-flex;align-items:center;gap:6px;margin:8px 10px 6px;color:var(--accent-hover);font-size:14px;font-weight:600;text-decoration:none}
.mega-more svg{transition:transform .2s ease}
.mega-more:hover svg{transform:translateX(3px)}
.mega-feature{display:flex;flex-direction:column;gap:4px;width:230px;padding:16px;border-radius:14px;text-decoration:none;transition:transform .2s ease}
.mega-feature:hover{transform:translateY(-2px)}
.mega-feature b{margin-top:14px;font-size:14.5px;font-weight:600}
.mega-feature small{font-size:13px;line-height:1.45}
.mega-feature-dark{background:var(--ink);color:#fff}
.mega-feature-dark:hover{color:#fff}
.mega-feature-dark small{color:rgba(255,255,255,.7)}
.mf-art{display:flex;flex-direction:column;gap:8px;margin-bottom:auto}
.mf-bubble{max-width:92%;padding:8px 10px;border-radius:12px;font-size:12px;line-height:1.4}
.mf-you{align-self:flex-end;background:#fff;color:var(--ink);border-bottom-right-radius:4px}
.mf-pu{display:flex;align-items:flex-start;gap:7px;align-self:flex-start;background:rgba(255,255,255,.1);color:#fff;border-bottom-left-radius:4px}
.mf-avatar{display:inline-flex;flex:none;align-items:center;justify-content:center;width:18px;height:18px;border-radius:6px;background:var(--brand)}
.mega-feature-shot,.mega-feature-post{background:var(--paper);color:var(--ink)}
.mega-feature-post:hover{color:var(--ink)}
.mega-feature-post .blog-cover{flex:1;min-height:130px;aspect-ratio:auto;margin-bottom:14px;border-radius:10px}
.mega-feature-post .bc-icon{width:64px;height:64px;border-radius:18px}
.mega-feature-post .blog-new{align-self:flex-start}
.mega-feature-post b{margin-top:8px;font:500 17px/1.25 var(--display)}
.mega-feature-post small{color:var(--muted)}
.mega-feature-shot:hover{color:var(--ink)}
.mega-feature-shot img{display:block;width:100%;height:auto;margin-bottom:auto;border-radius:8px;box-shadow:0 10px 22px rgba(26,26,23,.14)}
.mega-feature-shot small{color:var(--muted)}
.mega-cases{flex-direction:column;width:800px;gap:0}
.cases-groups{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cases-group+.cases-group{padding-left:10px;border-left:1px solid var(--line-soft)}
.cases-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;margin:0;padding:0;list-style:none}
.case-link{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;color:var(--ink);font-size:14px;font-weight:500;text-decoration:none;transition:background .15s ease}
.case-link:hover{background:var(--paper);color:var(--ink)}
.case-icon{display:grid;flex:none;place-items:center;width:30px;height:30px;border-radius:9px;transition:transform .2s ease}
.case-link:hover .case-icon{transform:rotate(-6deg) scale(1.06)}
.mega-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin:8px 0 0;padding:12px 10px 4px;border-top:1px solid var(--line-soft);color:var(--muted);font-size:13.5px}
.mega-foot .mega-more{margin:0}
/* Narrow screens: a menu button and one panel */
.menu-toggle{display:none;place-items:center;width:42px;height:42px;padding:0;border:1px solid var(--line);border-radius:12px;background:var(--surface);cursor:pointer}
.menu-toggle-bars{display:grid;gap:4px}
.menu-toggle-bars i{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink);transition:transform .2s ease,opacity .2s ease}
.menu-toggle[aria-expanded="true"] .menu-toggle-bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .menu-toggle-bars i:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] .menu-toggle-bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mobile-menu{height:calc(100vh - 70px);height:calc(100dvh - 70px);overflow-y:auto;overscroll-behavior:contain;background:var(--paper)}
.mobile-menu-inner{display:flex;flex-direction:column;padding:4px var(--gutter) 24px}
.mm-group,.mm-link{border-bottom:1px solid var(--line)}
.mm-group summary,.mm-link{display:flex;align-items:center;justify-content:space-between;padding:16px 2px;color:var(--ink);font-size:17px;font-weight:600;list-style:none;text-decoration:none;cursor:pointer}
.mm-link:hover{color:var(--ink)}
.mm-group summary::-webkit-details-marker{display:none}
.mm-group[open] summary .nav-chevron{transform:rotate(180deg)}
.mm-list{display:grid;gap:0;margin:0 0 10px;padding:0;list-style:none}
.mm-cases{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:0 0 6px;padding:0;list-style:none}
.mm-label{margin:4px 10px 4px;color:var(--subtle);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.mm-more{margin:6px 10px 14px}
.mm-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
body.menu-locked{overflow:hidden}
@media (max-width:960px){
  .mainnav,.header-link{display:none}
  .menu-toggle{display:inline-grid}
  .header-actions{margin-left:auto;gap:10px}
}
@media (min-width:961px){.mobile-menu{display:none !important}}
@media (max-width:420px){.header-cta{display:none}}
@media (prefers-reduced-motion:reduce){.site-header,.mainnav-link,.nav-chevron,.mega,.mega-item,.mega-item .mega-icon,.mega-more svg,.mega-feature,.case-link,.case-icon,.menu-toggle-bars i{transition:none}.mega-item:hover .mega-icon,.case-link:hover .case-icon,.mega-feature:hover,.mega-more:hover svg{transform:none}}

/* Site footer: every page, grouped like the menus (partials/site-footer) */
.site-footer{padding:56px 0 28px;border-top:1px solid var(--line);background:var(--surface)}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:32px}
.footer-brand p{max-width:260px;margin:14px 0 18px;color:var(--muted);font-size:15px}
.footer-h{margin:0 0 14px;color:var(--ink);font-size:14px;font-weight:700}
.footer-col ul{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.footer-col a{color:var(--muted);font-size:14.5px;text-decoration:none}
.footer-col a:hover{color:var(--ink)}
.footer-base{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:48px;padding-top:20px;border-top:1px solid var(--line-soft);color:var(--subtle);font-size:14px}
.footer-base p{margin:0}
.footer-account{display:flex;align-items:center;gap:18px}
.footer-account form{margin:0}
.footer-account a,.footer-account button{padding:0;border:0;background:none;color:var(--muted);font-size:14px;text-decoration:none;cursor:pointer}
.footer-account a:hover,.footer-account button:hover{color:var(--ink)}
@media (max-width:860px){.footer-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.footer-brand{grid-column:1/-1}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr 1fr}}

/* Marketing pages (resources/views/marketing) */
.page-hero{padding:56px 0 64px;text-align:center}
.page-hero h1{max-width:900px;margin:0 auto;font:560 clamp(40px,5.4vw,66px)/1.03 var(--display);letter-spacing:-.03em;font-optical-sizing:auto;font-variation-settings:"SOFT" 100,"WONK" 0;text-wrap:balance}
.page-hero .lede{margin:18px auto 0}
.hero-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:36px 0 0;padding:0;list-style:none}
.hero-chip{display:inline-flex;align-items:center;gap:10px;padding:5px 16px 5px 5px;background:var(--surface);border:1px solid var(--line);border-radius:999px;color:var(--ink);font-size:15px;font-weight:600;text-decoration:none;transition:transform .2s ease,border-color .2s ease}
.hero-chip:hover{transform:translateY(-2px);border-color:#CFC7B8;color:var(--ink)}
.hero-chip .mega-icon{width:34px;height:34px;border-radius:50%}
.band-tight{padding-top:0;border-top:0}
/* A product or guide beside its illustration */
.feature-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:64px;align-items:center}
.feature-row.flip>.feature-copy{order:2}
.feature-tag{display:inline-flex;align-items:center;gap:10px;margin:0;color:var(--ink);font-size:15px;font-weight:600}
.feature-tag .mega-icon{width:34px;height:34px}
.feature-copy h2,.band-head .feature-tag+h2{margin-top:16px}
.feature-copy>p{margin:14px 0 0;font-size:17px}
.checks{display:grid;gap:12px;margin:24px 0 0;padding:0;list-style:none}
.checks li{display:flex;align-items:flex-start;gap:12px;line-height:1.5}
.checks li::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;background:var(--ok-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F6B3A' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat}
.text-link{display:inline-flex;margin-top:22px;font-weight:600}
.feature-art{position:relative;display:grid;place-items:center;min-height:380px;padding:36px;overflow:hidden;border:1px solid var(--line);border-radius:22px;background-color:var(--paper);background-image:radial-gradient(#E1DACD 1px,transparent 1px);background-size:14px 14px}
.band:not(.band-alt) .feature-art{background-color:var(--surface)}
@media (max-width:900px){.feature-row{grid-template-columns:1fr;gap:36px}.feature-row.flip>.feature-copy{order:0}.feature-art{min-height:0;padding:28px 20px}}
.fa-shot{width:100%;max-width:480px;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px rgba(26,26,23,.12)}
.fa-shot img{display:block;width:100%;height:auto}
.fa-note{position:absolute;left:18px;bottom:18px;width:250px;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 30px rgba(26,26,23,.16);text-align:left}
.fa-note small{display:block;color:var(--muted);font-size:10.5px;font-weight:600}
.fa-note p{margin:6px 0 10px;color:var(--ink);font-size:12.5px;line-height:1.45}
.fa-note-btn{display:inline-block;padding:5px 10px;border-radius:8px;background:var(--ink);color:#fff;font-size:11px;font-weight:600}
@media (max-width:560px){.fa-note{position:static;width:auto;margin-top:-28px;margin-inline:12px}}
.fa-chat{display:flex;flex-direction:column;gap:10px;width:100%;max-width:400px}
.fa-msg{margin:0;max-width:85%;padding:10px 14px;border-radius:14px;font-size:14px;line-height:1.45}
.fa-you{align-self:flex-end;background:var(--ink);color:#fff;border-bottom-right-radius:4px}
.fa-pu{display:flex;align-items:flex-start;gap:10px;align-self:flex-start;background:var(--surface);border:1px solid var(--line);color:var(--ink);border-bottom-left-radius:4px}
.fa-list{margin-top:8px;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 30px rgba(26,26,23,.08)}
.fa-list p{display:flex;justify-content:space-between;gap:12px;margin:0;padding:10px 12px;border-radius:9px;color:var(--ink);font-size:14px}
.fa-list p+p{border-top:1px solid var(--line-soft)}
.fa-list .is-new{background:var(--accent-soft);border-top-color:transparent}
.fa-list em{margin-left:8px;padding:1px 7px;border-radius:999px;background:var(--accent);color:#fff;font-size:11px;font-style:normal;font-weight:700}
.fa-host{width:100%;max-width:400px;padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 40px rgba(26,26,23,.1)}
.fa-host-head{display:flex;align-items:center;justify-content:space-between}
.fa-host-head b{font-size:16px}
.fa-live{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:var(--ok-soft);color:var(--ok);font-size:12px;font-weight:700}
.fa-live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok);animation:live-pulse 2.2s ease-out infinite}
@keyframes live-pulse{0%{box-shadow:0 0 0 0 rgba(47,107,58,.45)}70%,100%{box-shadow:0 0 0 7px rgba(47,107,58,0)}}
.fa-host-publish{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0;padding:10px 12px;border-radius:10px;background:var(--paper);color:var(--muted);font-size:13px}
.fa-host-publish em{padding:5px 12px;border-radius:8px;background:var(--ink);color:#fff;font-size:12.5px;font-style:normal;font-weight:600}
.fa-host ul{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.fa-host li{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--line-soft);border-radius:10px;color:var(--muted);font-size:13px}
.fa-host li b{color:var(--ink)}
.fa-host li em{margin-left:auto;color:var(--accent);font-style:normal;font-weight:600;text-decoration:underline}
.fa-inbox{width:100%;max-width:420px;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 40px rgba(26,26,23,.1)}
.fa-inbox-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line-soft)}
.fa-inbox-head span{padding:2px 9px;border-radius:999px;background:var(--accent-soft);color:var(--accent-hover);font-size:12px;font-weight:700}
.fa-inbox ul{margin:0;padding:6px;list-style:none}
.fa-inbox li{display:flex;align-items:center;gap:12px;padding:10px;border-radius:10px}
.fa-inbox li:first-child{background:var(--paper)}
.fa-avatar{display:grid;flex:none;place-items:center;width:34px;height:34px;border-radius:50%;font-size:14px;font-weight:700}
.fa-inbox li p{display:flex;flex:1;flex-direction:column;min-width:0;margin:0}
.fa-inbox li b{color:var(--ink);font-size:14px}
.fa-inbox li small{color:var(--muted);font-size:13px}
.fa-inbox time{color:var(--subtle);font-size:12px;white-space:nowrap}
.fa-inbox li:first-child time::after{content:"";display:inline-block;width:8px;height:8px;margin-left:8px;border-radius:50%;background:var(--accent)}
/* Use cases */
.case-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.case-card{display:flex;align-items:center;gap:16px;height:100%;padding:18px;background:var(--surface);border:1px solid var(--line);border-radius:18px;color:var(--ink);text-decoration:none;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.case-card:hover{transform:translateY(-2px);border-color:#CFC7B8;box-shadow:0 14px 30px rgba(26,26,23,.08);color:var(--ink)}
.case-card .mega-icon{width:50px;height:50px;border-radius:14px;transition:transform .25s ease}
.case-card:hover .mega-icon{transform:rotate(-6deg) scale(1.05)}
.case-card-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.case-card-text b{font-size:16.5px;font-weight:600}
.case-card-text small{color:var(--muted);font-size:14px;line-height:1.4}
.case-card .go{flex:none;margin-left:auto;color:var(--subtle);transition:transform .2s ease,color .2s ease}
.case-card:hover .go{transform:translateX(3px);color:var(--accent)}
.case-card-yours{border:1px dashed var(--accent);background:transparent}
.cases-section{padding-bottom:48px}
.cases-section+.cases-section{padding-top:8px}
.band .cases-section-title{margin:0 0 18px;font-size:clamp(24px,3vw,30px)}
@media (max-width:980px){.case-grid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.case-grid{grid-template-columns:1fr}}
.uc-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:center;padding-top:32px;padding-bottom:80px}
.crumbs{display:flex;align-items:center;gap:8px;color:var(--subtle);font-size:14px}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--ink)}
.uc-badge{margin:22px 0 0}
.uc-badge .mega-icon{width:52px;height:52px;border-radius:15px}
.uc-hero h1{margin:14px 0 0;font:560 clamp(38px,4.6vw,58px)/1.04 var(--display);letter-spacing:-.03em;font-optical-sizing:auto;font-variation-settings:"SOFT" 100,"WONK" 0;text-wrap:balance}
.uc-hero .lede{margin:16px 0 0;font-size:18px}
.uc-form{display:flex;flex-direction:column;gap:10px;margin-top:28px;padding:16px 16px 12px;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:0 1px 2px rgba(26,26,23,.04),0 12px 32px rgba(26,26,23,.06)}
.uc-form:focus-within{border-color:#cfc7b8}
.uc-form label{color:var(--muted);font-size:13px;font-weight:600;letter-spacing:.02em}
.uc-form textarea{width:100%;min-height:96px;padding:0;border:0;background:transparent;font-size:16px;line-height:1.55;resize:vertical}
.uc-form textarea:focus{outline:none}
.uc-form .error{margin:0}
.uc-form-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding-top:10px;border-top:1px solid var(--line-soft)}
.uc-visual{display:grid;place-items:center;min-height:400px;padding:32px;border:1px solid var(--line);border-radius:22px;background-color:var(--surface);background-image:radial-gradient(#E1DACD 1px,transparent 1px);background-size:14px 14px}
.uc-shot{width:100%;max-width:480px;margin:0}
.uc-shot figcaption{margin-top:12px;color:var(--muted);font-size:13px;text-align:center}
@media (max-width:900px){.uc-hero{grid-template-columns:1fr;gap:32px;padding-bottom:56px}.uc-visual{min-height:0;padding:24px 16px}}
.mock-site{width:100%;max-width:460px;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px rgba(26,26,23,.12)}
.ms-nav{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line-soft)}
.ms-nav b{margin-right:auto;color:var(--ink);font-size:13px}
.ms-nav span{width:28px;height:5px;border-radius:3px;background:#E6E0D5}
.ms-nav em{width:54px;height:18px;border-radius:999px;background:var(--tf)}
.ms-hero{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:26px 20px 22px;background:var(--tb)}
.ms-hero p{margin:0}
.ms-eyebrow{color:var(--tf);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.ms-title{margin-bottom:4px !important;color:var(--ink);font:500 28px/1.1 var(--display);letter-spacing:-.02em}
.tone-ink .ms-title{color:#fff}
.ms-hero i{width:78%;height:6px;border-radius:3px;background:rgba(26,26,23,.14)}
.tone-ink .ms-hero i{background:rgba(255,255,255,.22)}
.ms-hero i.short{width:52%}
.ms-hero em{margin-top:8px;padding:7px 12px;border-radius:999px;background:var(--tf);color:var(--tb);font-size:11px;font-style:normal;font-weight:700}
.ms-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:16px}
.ms-tiles p{display:flex;flex-direction:column;gap:6px;margin:0;padding:10px;border:1px solid var(--line-soft);border-radius:10px;color:var(--ink);font-size:11px;font-weight:600;line-height:1.3}
.ms-tiles span{width:18px;height:18px;border-radius:6px;background:var(--tb)}
.ms-tiles i{height:4px;border-radius:2px;background:#E6E0D5}
.ms-tiles i.short{width:60%}
.uc-includes,.steps-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.uc-includes li,.steps-row li{padding:22px;background:var(--paper);border:1px solid var(--line);border-radius:18px}
.uc-n{display:grid;place-items:center;width:34px;height:34px;margin-bottom:14px;border-radius:10px;font:500 17px/1 var(--display)}
.uc-includes h3,.steps-row h3{font-size:17px}
.uc-includes p,.steps-row p{margin:8px 0 0;font-size:15px}
.uc-note{margin:24px 0 0}
.band .uc-others-title{margin:0 0 18px;font-size:clamp(24px,3vw,30px)}
@media (max-width:980px){.uc-includes,.steps-row{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.uc-includes,.steps-row{grid-template-columns:1fr}}
/* Pricing */
.plans-error{max-width:900px;margin:0 auto 16px}
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:900px;margin:0 auto}
.plan{display:flex;flex-direction:column;padding:30px;background:var(--surface);border:1px solid var(--line);border-radius:22px}
.plan p{color:inherit}
.plan-sub{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:0 24px 50px rgba(26,26,23,.18)}
.plan .plan-name{display:flex;align-items:center;gap:12px;margin:0;font-size:17px;font-weight:700}
.plan-name .mega-icon{width:38px;height:38px}
.plan .plan-price{margin:22px 0 0;font:500 56px/1 var(--display);letter-spacing:-.03em}
.plan .plan-price-words{font-size:44px}
.plan .plan-note{margin:8px 0 0;color:var(--muted);font-size:14px}
.plan-sub .plan-note{color:rgba(255,255,255,.7)}
.plan .checks{flex:1;margin:24px 0 28px}
.plan-sub .checks li::before,.plan-panel.is-subscribed .checks li::before{background-color:rgba(255,255,255,.12);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239FD4A8' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.plan .btn{width:100%}
.plan form{margin:0}
@media (max-width:760px){.plans{grid-template-columns:1fr}}
.counts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:56px;align-items:center}
.counts .band-head{margin:0}
.counts .band-head p:last-child{margin:12px 0 0}
.counts-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.counts-col,.request-col{display:flex;flex-direction:column;gap:10px;padding:20px;background:var(--paper);border:1px solid var(--line);border-radius:18px}
.counts-h,.request-h{display:flex;align-items:center;gap:8px;margin:0 0 4px;color:var(--ink);font-size:14px;font-weight:700}
.counts-dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--ok)}
.counts-dot.is-counts{background:var(--accent)}
.request-h .counts-dot{background:var(--tf)}
.counts-col .fa-msg,.request-col .fa-msg{max-width:100%;font-size:13.5px}
.free-list{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.free-list li{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--surface);border:1px solid var(--line-soft);border-radius:12px;font-size:14px;font-weight:500}
.free-list .mega-icon{width:30px;height:30px;border-radius:9px}
@media (max-width:900px){.counts{grid-template-columns:1fr;gap:28px}}
@media (max-width:560px){.counts-grid{grid-template-columns:1fr}}
/* Resources */
.annotated{margin:0;padding:32px 28px 24px;background:var(--paper);border:1px solid var(--line);border-radius:22px}
.annotated-text{margin:0;color:var(--ink) !important;font-size:20px;line-height:2.5}
.annotated mark{position:relative;padding:3px 4px;border-radius:6px;background:var(--tb);color:var(--ink);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.annotated mark::after{content:attr(data-label);position:absolute;top:-16px;left:4px;color:var(--tf);font-size:10.5px;font-weight:700;line-height:1;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.annotated figcaption{margin-top:12px;color:var(--muted);font-size:14px}
@media (max-width:560px){.annotated-text{font-size:17px}}
.request-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.request-col{background:var(--surface)}
@media (max-width:980px){.request-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.request-grid{grid-template-columns:1fr}}
.example-sites{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin:0;padding:0;list-style:none}
.example-sites .site-shot{width:auto}
@media (max-width:700px){.example-sites{grid-template-columns:1fr}.example-sites .site-shot{width:auto}}
@media (prefers-reduced-motion:reduce){.hero-chip,.case-card,.case-card .mega-icon,.case-card .go{transition:none}.hero-chip:hover,.case-card:hover,.case-card:hover .mega-icon,.case-card:hover .go{transform:none}.fa-live::before{animation:none}}
/* Blog (resources/content/blog): covers drawn from each post's tone and icon */
.blog-cover{position:relative;display:grid;place-items:center;overflow:hidden;aspect-ratio:16/9;border-radius:16px;background-color:var(--tb);background-image:radial-gradient(rgba(26,26,23,.13) 1px,transparent 1px);background-size:14px 14px;color:var(--tf)}
.tone-ink.blog-cover{background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1px)}
.bc-ring{position:absolute;top:-30%;right:-16%;width:62%;aspect-ratio:1;border:1.5px solid var(--tf);border-radius:50%;opacity:.2}
.bc-ring-2{top:auto;right:auto;bottom:-28%;left:-10%;width:40%;opacity:.15}
.bc-dot{position:absolute;top:22%;left:18%;width:14px;height:14px;border-radius:50%;background:var(--tf);opacity:.35}
.bc-icon{position:relative;display:grid;place-items:center;width:76px;height:76px;border-radius:22px;background:var(--surface);color:var(--tf);box-shadow:0 14px 30px rgba(26,26,23,.12);transform:rotate(-6deg);transition:transform .3s ease}
.blog-cover-lg .bc-icon{width:104px;height:104px;border-radius:28px}
a:hover .bc-icon{transform:rotate(0) scale(1.04)}
.blog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:24px}
.blog-grid-3{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:0}
.blog-card a,.blog-featured a{color:var(--ink);text-decoration:none;background:var(--surface);border:1px solid var(--line);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.blog-card a:hover,.blog-featured a:hover{transform:translateY(-3px);border-color:#CFC7B8;box-shadow:0 18px 36px rgba(26,26,23,.08);color:var(--ink)}
.band-alt .blog-card a{background:var(--paper)}
.blog-card a{display:flex;flex-direction:column;height:100%;padding:10px;border-radius:20px}
.blog-card-body{padding:16px 10px 10px}
.blog-meta{margin:0;color:var(--subtle);font-size:13px}
.blog-card h3{margin:8px 0 0;font:500 22px/1.22 var(--display);letter-spacing:-.01em}
.blog-card-body p:last-child{margin:8px 0 0;font-size:15px}
.blog-featured a{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:32px;align-items:center;padding:12px;border-radius:24px}
.blog-featured-body{padding:12px 20px 12px 0}
.blog-featured h2{margin:12px 0 0;font:500 clamp(28px,3.2vw,38px)/1.12 var(--display);letter-spacing:-.02em}
.blog-featured-body>p:not(.blog-meta){margin:12px 0 0;font-size:17px}
.blog-new{display:inline-block;margin-right:10px;padding:2px 9px;border-radius:999px;background:var(--accent-soft);color:var(--accent-hover);font-size:12px;font-weight:700}
.blog-featured .text-link{margin-top:18px;color:var(--accent)}
.band-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;max-width:none}
.band-head-row .text-link{margin:0 0 6px}
.band .more-title{margin:0 0 4px;font-size:clamp(24px,3vw,30px)}
@media (min-width:861px) and (max-width:1060px){.blog-grid-3{grid-template-columns:1fr 1fr}}
@media (max-width:860px){.blog-featured a{grid-template-columns:1fr;gap:8px}.blog-featured-body{padding:8px 10px 12px}.blog-grid,.blog-grid-3{grid-template-columns:1fr}}
/* A post */
.container.post-head{max-width:784px;padding-top:32px}
.post-head h1{margin:16px 0 0;font:560 clamp(36px,4.8vw,56px)/1.06 var(--display);letter-spacing:-.03em;font-optical-sizing:auto;font-variation-settings:"SOFT" 100,"WONK" 0;text-wrap:balance}
.post-head .lede{margin:16px 0 0;font-size:19px}
.post-head .blog-meta{margin:18px 0 28px}
.post-head .blog-cover{aspect-ratio:21/9}
.container.prose{max-width:784px;padding-top:40px;font-size:18px;line-height:1.7}
.prose h2{margin:40px 0 0;font:500 28px/1.2 var(--display);letter-spacing:-.01em}
.prose p,.prose ul{margin:14px 0 0}
.prose ul{padding-left:22px}
.prose li{margin:6px 0}
.prose blockquote{margin:18px 0 0;padding:14px 18px;border-left:3px solid var(--accent);border-radius:0 12px 12px 0;background:var(--surface)}
.prose blockquote p{margin:0}
.container.post-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;max-width:784px;margin-top:48px;margin-bottom:88px;padding:26px 28px;border-radius:20px;background:var(--ink);color:#fff}
.post-cta h2{margin:0;font:500 26px/1.2 var(--display)}
.post-cta p{margin:6px 0 0;color:rgba(255,255,255,.75)}
.post-cta .btn-dark{background:#fff;color:var(--ink)}
.post-cta .btn-dark:hover{background:var(--accent-soft);color:var(--ink)}
@media (max-width:700px){.container.post-cta{width:auto;margin-inline:var(--gutter);margin-bottom:64px}}
@media (prefers-reduced-motion:reduce){.bc-icon,.blog-card a,.blog-featured a{transition:none}a:hover .bc-icon,.blog-card a:hover,.blog-featured a:hover{transform:none}}
/* The owner's dashboard (/app): app header, sites, enquiries, plan and next steps */
.app-bar{position:sticky;top:0;z-index:50;background:rgba(245,242,236,.9);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
.app-bar-inner{display:flex;align-items:center;gap:28px;max-width:var(--container);margin-inline:auto;padding:12px var(--gutter)}
.app-bar .logo-word{font-size:24px}
.app-bar .logo-mark{width:32px;height:32px;border-radius:9px}
.app-nav{display:flex;gap:4px;margin-right:auto}
.app-nav-link{padding:8px 12px;border-radius:10px;color:var(--muted);font-size:15px;font-weight:500;text-decoration:none}
.app-nav-link:hover{background:rgba(26,26,23,.06);color:var(--ink)}
.app-nav-link.is-active{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(26,26,23,.06)}
.app-bar-actions{display:flex;align-items:center;gap:12px}
.account-menu{position:relative}
.account-menu summary{list-style:none;cursor:pointer;border-radius:50%}
.account-menu summary::-webkit-details-marker{display:none}
.avatar{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--ink);color:#fff;font-weight:700}
.account-menu[open] .avatar{box-shadow:0 0 0 3px var(--accent-soft)}
.account-menu-panel{position:absolute;right:0;top:calc(100% + 10px);z-index:60;display:grid;width:250px;padding:8px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 44px rgba(26,26,23,.14)}
.account-who{display:flex;flex-direction:column;margin:0 0 6px;padding:8px 10px 12px;border-bottom:1px solid var(--line-soft)}
.account-who small{overflow:hidden;color:var(--muted);font-size:13px;text-overflow:ellipsis}
.account-menu-panel a,.account-menu-panel button{display:block;width:100%;padding:9px 10px;border:0;border-radius:10px;background:none;color:var(--ink);font-size:14.5px;text-align:left;text-decoration:none;cursor:pointer}
.account-menu-panel a:hover,.account-menu-panel button:hover{background:var(--paper);color:var(--ink)}
.account-menu-panel form{margin:0}
@media (max-width:640px){.app-nav{display:none}.app-bar-actions{margin-left:auto}.app-bar-inner{gap:12px}}
.dash{padding:36px 0 88px}
.dash>.container>.notice,.dash>.container>.error{margin:0 0 20px}
.dash-hello{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px}
.dash-hello h1{margin:0;font:560 clamp(34px,4.4vw,48px)/1.05 var(--display);letter-spacing:-.03em;font-variation-settings:"SOFT" 100,"WONK" 0}
.dash-hello .lede{margin:8px 0 0;font-size:17px}
.dash-stats{display:flex;flex-wrap:wrap;gap:12px;margin:0;padding:0;list-style:none}
.dash-stats li{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;min-width:170px;padding:12px 16px 12px 12px;background:var(--surface);border:1px solid var(--line);border-radius:16px}
.dash-stats .mega-icon{grid-row:span 2}
.dash-stats b{font:500 26px/1 var(--display);letter-spacing:-.02em}
.dash-stats b small{color:var(--subtle);font:500 14px var(--body);letter-spacing:0}
.dash-stats span:last-child{color:var(--muted);font-size:13px}
@media (max-width:640px){.dash-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%}.dash-stats li{grid-template-columns:1fr;min-width:0;padding:10px 12px}.dash-stats .mega-icon{grid-row:auto;width:30px;height:30px;margin-bottom:8px;border-radius:9px}.dash-stats b{font-size:22px}.dash-stats b small{font-size:12px}.dash-stats span:last-child{font-size:12px;line-height:1.3}}
.dash-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}
.dash-main,.dash-side{display:grid;gap:24px}
.dash-panel{padding:22px;background:var(--surface);border:1px solid var(--line);border-radius:22px}
.dash-panel h2{margin:0;font:500 22px/1.2 var(--display);letter-spacing:-.01em}
.dash-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
@media (max-width:980px){.dash-grid{grid-template-columns:1fr}}
.dash-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:28px 16px;border:1px dashed var(--line);border-radius:16px;text-align:center}
.dash-empty h3{margin:4px 0 0;font:500 22px/1.2 var(--display)}
.dash-empty p{max-width:420px;margin:0;color:var(--muted)}
.dash-empty-sm{flex-direction:row;padding:16px;text-align:left}
/* Site cards: a live preview of the site, drawn small */
.site-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin:0;padding:0;list-style:none}
.site-card{display:flex;flex-direction:column;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:18px;transition:border-color .2s ease,box-shadow .2s ease}
.site-card:hover{border-color:#CFC7B8;box-shadow:0 16px 34px rgba(26,26,23,.08)}
.site-card-preview{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--paper);border-bottom:1px solid var(--line-soft)}
.site-card-preview iframe{position:absolute;top:0;left:0;width:1280px;height:800px;border:0;pointer-events:none;transform:scale(var(--scale,.25));transform-origin:0 0;background:#fff}
.site-card-building,.site-card-failed{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:6px;color:var(--muted);font-size:14px;font-weight:600;background-image:radial-gradient(#E1DACD 1px,transparent 1px);background-size:14px 14px}
.site-card-building i{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:demo-dot 1s ease-in-out infinite}
.site-card-building i:nth-child(2){animation-delay:.15s}.site-card-building i:nth-child(3){margin-right:6px;animation-delay:.3s}
.site-card-failed{color:#9F1D1D}
.site-card-body{display:flex;flex:1;flex-direction:column;gap:6px;padding:14px 16px 16px}
.site-card-title{display:flex;align-items:center;justify-content:space-between;gap:10px}
.site-card-title h3{margin:0;overflow:hidden;font-size:16.5px;font-weight:700;white-space:nowrap;text-overflow:ellipsis}
.site-card-title h3 a{color:var(--ink);text-decoration:none}
.site-card-title h3 a:hover{color:var(--accent-hover)}
.site-card-url,.site-card-meta{margin:0;color:var(--muted);font-size:13.5px}
.site-card-url a{overflow-wrap:anywhere}
.site-card-meta b{color:var(--accent-hover)}
.site-card-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:8px}
.site-card-actions form{margin:0}
.status-pill{display:inline-flex;flex:none;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:var(--chip);color:var(--muted);font-size:12px;font-weight:700}
.status-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.status-pill.is-live{background:var(--ok-soft);color:var(--ok)}
.status-pill.is-building{background:var(--warn-soft);color:var(--warn-ink)}
.status-pill.is-failed{background:#FBE3E3;color:#9F1D1D}
.site-card-new{border-style:dashed;background:transparent}
.site-card-new a,.site-card-new button{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;min-height:260px;padding:20px;border:0;background:none;color:var(--ink);text-align:center;text-decoration:none;cursor:pointer}
.site-card-new form{display:flex;flex:1;margin:0}
.site-card-new b{font-size:16px}
.site-card-new small{max-width:220px;color:var(--muted);font-size:13.5px}
.site-card-new:hover{border-color:var(--accent);background:var(--surface)}
/* Recent enquiries */
.badge-new{background:var(--accent-soft);color:var(--accent-hover)}
.lead-list{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.lead-item{border:1px solid var(--line-soft);border-radius:14px}
.lead-item[open]{border-color:var(--line);box-shadow:0 10px 24px rgba(26,26,23,.05)}
.lead-item summary{display:flex;align-items:center;gap:12px;padding:10px 12px;list-style:none;cursor:pointer}
.lead-item summary::-webkit-details-marker{display:none}
.lead-item summary:hover{background:var(--paper);border-radius:13px}
.lead-who{display:flex;flex:1;flex-direction:column;min-width:0}
.lead-who b{overflow:hidden;font-size:15px;white-space:nowrap;text-overflow:ellipsis}
.lead-who small{overflow:hidden;color:var(--muted);font-size:13px;white-space:nowrap;text-overflow:ellipsis}
.lead-when{display:flex;flex:none;align-items:center;gap:8px;color:var(--subtle);font-size:13px}
.lead-answers{display:grid;gap:10px;margin:0;padding:4px 16px 12px 58px}
.lead-answers div{display:grid;grid-template-columns:140px minmax(0,1fr);gap:12px}
.lead-answers dt{color:var(--muted);font-size:13.5px}
.lead-answers dd{margin:0;font-size:14.5px;white-space:pre-line;overflow-wrap:anywhere}
.lead-open{margin:0 0 14px 58px;font-size:14px}
@media (max-width:560px){.lead-answers{padding-left:16px}.lead-answers div{grid-template-columns:1fr;gap:2px}.lead-open{margin-left:16px}.lead-when time{display:none}}
/* Plan, next steps, help */
.plan-kicker{margin:0 0 4px;color:var(--subtle);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.plan-panel h2{margin-bottom:14px;font-size:28px}
.plan-panel.is-subscribed{background:var(--ink);border-color:var(--ink);color:#fff}
.plan-panel.is-subscribed .plan-kicker{color:rgba(255,255,255,.6)}
.plan-panel.is-subscribed .checks{margin:0 0 18px}
.plan-panel.is-subscribed .checks li{color:#fff}
.meter{margin-bottom:14px}
.meter p{display:flex;justify-content:space-between;gap:10px;margin:0 0 6px;font-size:13.5px}
.meter p span{color:var(--muted)}
.meter-bar{display:block;height:8px;overflow:hidden;border-radius:999px;background:var(--chip)}
.meter-bar i{display:block;width:var(--p);height:100%;border-radius:999px;background:var(--accent)}
.plan-panel form{margin:4px 0 0}
.plan-panel form .btn{width:100%}
.plan-note{margin:10px 0 0;color:var(--muted);font-size:13px;line-height:1.5}
.dash-panel>h2+.task-list,.dash-panel>h2+.dash-done,.dash-help h2+ul{margin-top:14px}
.task-list{display:grid;gap:4px;margin:0;padding:0;list-style:none}
.task-list li{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line-soft);font-size:14px}
.task-list li:last-child{border-bottom:0}
.task-list .mega-icon{width:30px;height:30px;border-radius:9px}
.task-text{flex:1;line-height:1.4}
.task-list form{margin:0}
.task-action{flex:none;padding:5px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font-size:13px;font-weight:600;text-decoration:none;cursor:pointer}
.task-action:hover{border-color:#CFC7B8;color:var(--ink)}
.dash-done{display:flex;align-items:center;gap:10px;margin:0;color:var(--muted)}
.dash-done .mega-icon{width:30px;height:30px;border-radius:9px}
.dash-help ul{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.dash-help a{font-weight:600}
@media (prefers-reduced-motion:reduce){.site-card-building i{animation:none}.site-card{transition:none}}

/* Coming soon (before launch, for people not yet invited: App\Http\Middleware\PreviewGate) */
.coming-soon{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:40px 20px;text-align:center}
.coming-soon h1{max-width:760px;margin:36px 0 0;font:560 clamp(40px,6vw,72px)/1.02 var(--display);letter-spacing:-.035em;font-variation-settings:"SOFT" 100,"WONK" 0;text-wrap:balance}
.coming-soon .h1-accent{color:var(--accent)}
.coming-soon .lede{max-width:560px;margin:18px 0 0}
.coming-soon .hint{margin-top:28px}