/* Zome Calculator — shared site styles (landing + legal pages) */
:root{
  color-scheme:light;
  --bg:#f7f2e7; --surface:#fffdf9; --surface-2:#efe6d3; --border:rgba(35,28,17,.13);
  --ink:#241c10; --ink-muted:#6b604c; --accent:#c26a1c; --accent-2:#33685f;
}
*{ box-sizing:border-box; }
html{ background:var(--bg); }
body{ margin:0; background:var(--bg); color:var(--ink); font:16px/1.6 "IBM Plex Sans",-apple-system,"Segoe UI",sans-serif; }
h1,h2,h3{ font-family:"Archivo","IBM Plex Sans",sans-serif; line-height:1.2; text-wrap:balance; margin:0; }
a{ color:var(--accent-2); text-underline-offset:3px; }
a:hover{ color:var(--accent); }
:focus-visible{ outline:2px solid var(--accent-2); outline-offset:2px; }

.wrap{ max-width:760px; margin:0 auto; padding-inline:16px; }
.site-header{ border-bottom:1px solid var(--border); background:var(--surface); }
.site-header .wrap{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding-block:14px; max-width:1040px; }
.brand{ font-family:"Archivo",sans-serif; font-weight:800; font-size:1.1rem; color:var(--ink); text-decoration:none; letter-spacing:-.01em; }
.site-header nav{ margin-left:auto; display:flex; gap:16px; flex-wrap:wrap; font-size:.9rem; }
.site-header nav a{ color:var(--ink-muted); text-decoration:none; }
.site-header nav a:hover,.site-header nav a[aria-current=page]{ color:var(--ink); text-decoration:underline; }

main.legal{ padding-block:32px 56px; }
main.legal h1{ font-size:clamp(1.8rem,5vw,2.4rem); margin-bottom:6px; }
main.legal .updated{ color:var(--ink-muted); font-size:.9rem; margin:0 0 28px; }
main.legal h2{ font-size:1.25rem; margin:32px 0 8px; }
main.legal p,main.legal li{ max-width:68ch; }
main.legal ul,main.legal ol{ padding-left:1.3em; }
main.legal li{ margin-bottom:6px; }
.callout{ background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--accent); border-radius:10px; padding:14px 16px; margin:20px 0; }
.callout p{ margin:0; }

.site-footer{ border-top:1px solid var(--border); background:var(--surface); font-size:.85rem; color:var(--ink-muted); }
.site-footer .wrap{ padding-block:22px; max-width:1040px; display:grid; gap:8px; }
.site-footer nav{ display:flex; gap:16px; flex-wrap:wrap; }
.site-footer a{ color:var(--ink-muted); }
@media (prefers-reduced-motion:reduce){ *{ transition:none!important; animation:none!important; } }

/* the Australian Consumer Law text that must appear word for word */
blockquote.acl{ margin:16px 0; padding:14px 18px; background:var(--surface); border:1px solid var(--border); border-radius:10px; }
blockquote.acl p{ margin:0 0 8px; } blockquote.acl p:last-child{ margin-bottom:0; }
blockquote.acl ul{ margin:0 0 8px; }
/* details still to be filled in before launch */
mark.todo{ background:#fbe7c6; color:#5c3b06; padding:0 4px; border-radius:4px; }

/* ---------- home page ---------- */
.site-header .wrap .brand{ display:flex; align-items:center; gap:8px; }
.brand svg{ width:22px; height:22px; flex:none; }
.wide{ max-width:1040px; margin:0 auto; padding-inline:16px; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:0 20px; border-radius:10px;
  font:600 1rem/1 "IBM Plex Sans",sans-serif; text-decoration:none; border:1px solid transparent; cursor:pointer; }
.btn-primary{ background:var(--accent); color:#fffaf1; }
.btn-primary:hover{ background:#a95a15; color:#fffaf1; }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--border); }
.btn-ghost:hover{ background:var(--surface); color:var(--ink); }
.eyebrow{ font-size:.78rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-2); margin:0 0 10px; }

.hero{ padding-block:44px 32px; }
.hero .wide{ display:grid; gap:28px; align-items:center; }
.hero h1{ font-size:clamp(2.1rem,6vw,3.4rem); font-weight:800; letter-spacing:-.02em; }
.hero .lede{ font-size:1.12rem; color:var(--ink-muted); max-width:52ch; margin:16px 0 24px; }
.hero .actions{ display:flex; gap:12px; flex-wrap:wrap; }
.hero .note{ font-size:.85rem; color:var(--ink-muted); margin:14px 0 0; }
.hero-zome{ width:100%; max-width:460px; height:auto; display:block; margin-inline:auto; }
@media (min-width:860px){ .hero .wide{ grid-template-columns:1.1fr .9fr; } .hero{ padding-block:72px 48px; } }

.section{ padding-block:40px; }
.section h2{ font-size:clamp(1.5rem,4vw,2.1rem); letter-spacing:-.01em; }
.section .intro{ color:var(--ink-muted); max-width:60ch; margin:10px 0 0; }
.cards{ display:grid; gap:14px; margin-top:24px; }
@media (min-width:700px){ .cards{ grid-template-columns:repeat(3,1fr); } }
.card{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:18px 18px 16px; }
.card h3{ font-size:1.05rem; margin-bottom:6px; }
.card p{ margin:0; color:var(--ink-muted); font-size:.95rem; }
.card .num{ font:600 .8rem/1 "IBM Plex Sans",sans-serif; color:var(--accent); margin-bottom:10px; display:block; }

.pro{ background:var(--surface); border-block:1px solid var(--border); }
.pro .wide{ display:grid; gap:32px; }
@media (min-width:860px){ .pro .wide{ grid-template-columns:1.15fr .85fr; align-items:start; } }
.badge{ display:inline-block; font-size:.75rem; font-weight:600; color:#fffaf1; background:var(--accent-2); border-radius:999px; padding:4px 10px; margin-bottom:12px; }
.features{ list-style:none; padding:0; margin:22px 0 0; display:grid; gap:10px; }
@media (min-width:600px){ .features{ grid-template-columns:1fr 1fr; column-gap:22px; } }
.features li{ position:relative; padding-left:24px; }
.features li::before{ content:""; position:absolute; left:2px; top:.45em; width:10px; height:10px; transform:rotate(45deg); border:2px solid var(--accent); border-radius:2px; }
.features b{ font-weight:600; }

.signup{ background:var(--bg); border:1px solid var(--border); border-radius:14px; padding:22px 20px; }
.signup h3{ font-size:1.2rem; margin-bottom:6px; }
.signup p{ margin:0 0 14px; color:var(--ink-muted); font-size:.95rem; }
.signup label{ display:block; font-weight:600; font-size:.9rem; margin-bottom:6px; }
.signup .row{ display:flex; gap:8px; flex-wrap:wrap; }
.signup input[type=email]{ flex:1 1 200px; min-height:46px; border:1px solid var(--border); border-radius:10px; padding:0 12px;
  font:inherit; background:var(--surface); color:var(--ink); }
.signup input[type=email]:focus{ outline:2px solid var(--accent-2); outline-offset:1px; }
.signup .btn{ flex:0 0 auto; }
.signup .fine{ font-size:.8rem; margin:12px 0 0; }
.signup .msg{ margin:12px 0 0; font-size:.92rem; font-weight:500; min-height:1.4em; }
.signup .msg.ok{ color:#2f7a4f; } .signup .msg.err{ color:#a63a22; }
.hp{ position:absolute!important; left:-9999px!important; width:1px; height:1px; overflow:hidden; }

.safety .callout{ margin:0; max-width:820px; }

/* ---------- FAQ ---------- */
.faq-list{ margin-top:22px; display:grid; gap:10px; max-width:820px; }
.faq-item{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:0 18px; }
.faq-item summary{ cursor:pointer; list-style:none; padding:16px 28px 16px 0; position:relative; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; position:absolute; right:2px; top:50%; transform:translateY(-50%); font:600 1.3rem/1 "IBM Plex Sans",sans-serif; color:var(--accent); }
.faq-item[open] summary::after{ content:"–"; }
.faq-item summary h3{ font-size:1.05rem; display:inline; }
.faq-item p{ margin:0 0 16px; color:var(--ink-muted); max-width:70ch; }

/* ---------- Pro teaser (home) ---------- */
.pro-teaser{ display:grid; gap:18px; align-items:center; }
@media (min-width:860px){ .pro .wide.pro-teaser{ grid-template-columns:1.4fr .6fr; } }
.pro-teaser-actions .note{ font-size:.85rem; color:var(--ink-muted); margin:10px 0 0; }

/* ---------- Pro page ---------- */
.pro-hero{ padding-block:44px 24px; }
.pro-grid{ display:grid; gap:32px; align-items:start; }
@media (min-width:860px){ .pro-grid{ grid-template-columns:1.15fr .85fr; } }
.pro-hero h1{ font-size:clamp(2rem,5vw,2.8rem); letter-spacing:-.02em; }
.pro-screens{ background:var(--surface); border-block:1px solid var(--border); }
.pro-screens h2{ font-size:clamp(1.4rem,3.5vw,1.9rem); }
.thumbs{ display:grid; gap:18px; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); margin-top:24px; }
.thumb{ margin:0; }
.thumb-open{ display:block; width:100%; padding:0; border:1px solid var(--border); border-radius:10px; overflow:hidden; background:var(--bg); cursor:zoom-in; }
.thumb-open img{ display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; transition:transform .2s ease; }
.thumb-open:hover img,.thumb-open:focus-visible img{ transform:scale(1.03); }
.thumb figcaption{ font-size:.85rem; color:var(--ink); margin-top:8px; line-height:1.4; }
.pro-screens .back{ margin:28px 0 0; }

/* centred enlarged view */
.lightbox{ position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:56px 16px 24px; background:rgba(24,18,10,.93); }
.lightbox[hidden]{ display:none; }
.lb-figure{ margin:0; display:flex; flex-direction:column; align-items:center; justify-content:center; max-width:1100px; width:100%; height:100%; }
.lb-figure img{ display:block; max-width:100%; max-height:calc(100% - 40px); width:auto; height:auto; border-radius:10px; background:#fffdf9; box-shadow:0 20px 50px -20px rgba(0,0,0,.6); }
.lb-figure figcaption{ color:#fffaf1; text-align:center; margin-top:12px; font-size:.95rem; }
.lb-close{ position:absolute; top:12px; right:16px; width:44px; height:44px; border-radius:50%; border:none; background:#fffdf9; color:#241c10; font-size:1.6rem; line-height:1; cursor:pointer; }

/* ---------- home hero: live 3D zome ---------- */
.hero-3d{ position:relative; display:block; width:100%; max-width:520px; margin-inline:auto; aspect-ratio:1/0.92; border-radius:20px; cursor:grab;
  background:radial-gradient(120% 100% at 50% 15%, #fbf8f2, #ece1cb); border:1px solid var(--border); overflow:hidden; text-decoration:none; }
.hero-3d canvas{ position:absolute; inset:0; width:100% !important; height:100% !important; display:block; touch-action:none; }
.hero-3d.dragging{ cursor:grabbing; }
.hero .wide > *{ min-width:0; }
.hero-3d{ contain:layout paint; }
.hero-3d .hero-fallback{ position:absolute; inset:12% 8%; width:84%; height:auto; }
.hero-3d.is-3d .hero-fallback{ display:none; }
.hero-3d-hint{ position:absolute; right:12px; bottom:12px; font-size:.8rem; font-weight:600; color:var(--ink); background:rgba(255,253,248,.9); padding:6px 12px; border-radius:999px; text-decoration:none; border:1px solid var(--border); transition:color .15s, background .15s; }
.hero-3d-hint:hover{ color:#fffaf1; background:var(--accent); border-color:var(--accent); }
.hero-3d-tip{ position:absolute; right:12px; top:12px; font-size:.72rem; color:var(--ink-muted); background:rgba(255,253,248,.7); padding:4px 9px; border-radius:999px; pointer-events:none; }
.hero-3d:not(.is-3d) .hero-3d-tip{ display:none; }