/* ============================================================
   HOMAURA site styles for homaura.com.au
   Palette, type and radii lifted verbatim from the app build
   (assets/css/app.css, v1.7.0) so the site and the product match.
   ============================================================ */

@font-face{font-family:Manrope;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/manrope-400-latin.woff2) format("woff2")}
@font-face{font-family:Manrope;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/manrope-500-latin.woff2) format("woff2")}
@font-face{font-family:Manrope;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/manrope-600-latin.woff2) format("woff2")}
@font-face{font-family:Manrope;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/manrope-700-latin.woff2) format("woff2")}
@font-face{font-family:Manrope;font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/manrope-800-latin.woff2) format("woff2")}

:root{
  /* app palette */
  --primary:#E67E00;
  --amber:#FFB300;
  --gold:#FFD54F;
  --porcelain:#FAF8F5;
  --chalk:#FFFFFF;
  --chalk-2:#F5F0E8;
  --ink:#383838;
  --ink-2:#4A4A4A;
  --slate:#6B6B6B;
  --hairline:#EDE8DC;
  --hairline-2:#F3EFE6;
  --primary-ink:#8A4B00;
  --amber-text:#8A5A00;
  --amber-wash:#FFF4DC;
  --petrol-wash:#FBEEDC;
  --jade:#106B44;
  --jade-wash:#E4F2EA;
  --violet:#6A4A8C;
  --violet-wash:#F0EAF6;
  --destructive:#EF4444;

  --grad-primary:linear-gradient(135deg,var(--primary) 0%,var(--amber) 100%);
  --grad-cta-hover:linear-gradient(135deg,#D97600 0%,#F5A800 100%);

  --shadow-1:0 1px 2px rgba(56,40,16,.05),0 2px 8px rgba(56,40,16,.05);
  --shadow-2:0 2px 4px rgba(56,40,16,.06),0 12px 28px rgba(56,40,16,.09);
  --shadow-3:0 10px 20px rgba(56,40,16,.10),0 32px 64px rgba(56,40,16,.16);
  --shadow-primary:0 6px 18px rgba(230,126,0,.20);

  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-2xl:32px;
  --font:"Manrope","Segoe UI",system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* ---- type scale. Seven steps, nothing else is allowed on the page. ----
     Sized off the app's own rhythm (Manrope on a 16px root) so the site and
     the product read as one typeface at one set of sizes. */
  --t-2xs:12.5px;                    /* eyebrows, kickers, uppercase labels */
  --t-xs:14px;                       /* footer meta, pills */
  --t-sm:15px;                       /* captions, notes, small UI */
  --t-base:16.5px;                   /* ALL body copy, list items, card body */
  --t-md:18.5px;                     /* lede, hero paragraphs, card titles */
  --t-lg:22px;                       /* statement lines, legal h2 */
  --t-xl:clamp(26px,3.2vw,34px);     /* audience headings */
  --t-2xl:clamp(30px,4.2vw,46px);    /* section headings */
  --t-3xl:clamp(38px,5.4vw,64px);    /* hero heading */

  --lh-head:1.12;
  --lh-tight:1.35;
  --lh-body:1.62;

  --w-body:450;
  --w-med:600;
  --w-bold:700;
  --w-head:800;

  --wrap:1200px;
  --pad:clamp(20px,5vw,48px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}

body{
  margin:0;font-family:var(--font);color:var(--ink);background:var(--porcelain);
  font-size:var(--t-base);line-height:var(--lh-body);font-weight:var(--w-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
h1,h2,h3,h4{margin:0;line-height:var(--lh-head);letter-spacing:-.028em;font-weight:var(--w-head);color:var(--ink)}
p{margin:0}
:focus-visible{outline:3px solid var(--primary);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;border-radius:0 0 var(--r-md) 0;z-index:100}
.skip:focus{left:0}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(250,248,245,.86);backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid var(--hairline)}
.nav-in{display:flex;align-items:center;gap:28px;height:76px}
.nav .logo{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto}
.nav .logo img{height:34px;width:auto}
.nav-links{display:flex;gap:30px;align-items:center}
.nav-links a{text-decoration:none;font-weight:var(--w-med);font-size:var(--t-sm);color:var(--ink-2);transition:color .2s var(--ease)}
.nav-links a:hover{color:var(--primary-ink)}
.nav-toggle{display:none}
@media (max-width:900px){.nav-links{display:none}}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font);font-weight:var(--w-bold);font-size:var(--t-base);letter-spacing:-.01em;
  padding:15px 28px;border-radius:999px;border:0;cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease);
}
.btn-primary{background:var(--grad-primary);color:#fff;box-shadow:var(--shadow-primary)}
.btn-primary:hover{background:var(--grad-cta-hover);transform:translateY(-1px);box-shadow:0 10px 26px rgba(230,126,0,.30)}
.btn-ghost{background:transparent;color:var(--primary-ink);border:2px solid var(--primary);}
.btn-ghost:hover{background:var(--petrol-wash)}
.btn-sm{padding:11px 20px;font-size:var(--t-sm)}

/* ---------- shared section furniture ---------- */
section{padding:clamp(64px,8vw,116px) 0;scroll-margin-top:90px}
#join{scroll-margin-top:110px}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;font-size:var(--t-xs);font-weight:var(--w-head);
  letter-spacing:.13em;text-transform:uppercase;color:var(--primary-ink);
  background:var(--petrol-wash);border:1px solid #F0DCC0;padding:8px 15px;border-radius:999px;margin-bottom:22px;
}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--primary)}
h2.sec{font-size:var(--t-2xl);max-width:17ch}
.lede{font-size:var(--t-md);color:var(--ink-2);max-width:62ch;margin-top:20px;line-height:var(--lh-body)}
.center{text-align:center}
.center h2.sec,.center .lede{margin-inline:auto}

/* ---------- hero ---------- */
.hero{
  padding-top:clamp(48px,6vw,84px);padding-bottom:0;position:relative;overflow:hidden;
  background:
    radial-gradient(1100px 620px at 88% -8%,rgba(255,179,0,.20),transparent 62%),
    radial-gradient(760px 520px at 4% 8%,rgba(230,126,0,.09),transparent 60%),
    var(--porcelain);
}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(32px,5vw,68px);align-items:center}
.hero h1{font-size:var(--t-3xl);letter-spacing:-.035em;line-height:1.1}
/* background-clip:text paints only inside the inline box. The heading runs a
   tight letter-spacing, which pulls that box in narrower than the last glyph,
   and Manrope ExtraBold's "y" overhangs its advance width top right, so the
   corner of the arm was being sliced off. Padding grows the paint box and the
   matching negative margin cancels the layout change, so the comma after the
   span does not move. Same idea vertically for the descender.
   The gradient also runs amber into deep orange, so the phrase ends on the
   strongest colour rather than the palest. */
.hero h1 .accent{
  background:linear-gradient(120deg,var(--amber) 0%,var(--primary) 78%,var(--primary) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  padding:.14em .16em .18em .06em;
  margin:0 -.16em 0 -.06em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.hero p.sub{font-size:var(--t-md);color:var(--ink-2);margin-top:22px;max-width:54ch;line-height:var(--lh-body)}
.hero p.sub + p.sub{margin-top:16px}

/* device stack */
.device-stack{position:relative;display:flex;justify-content:center;align-items:flex-end;min-height:520px}
.phone{
  position:relative;width:min(300px,72%);border-radius:44px;background:#1a1512;padding:9px;
  box-shadow:var(--shadow-3);z-index:2;
}
.phone img{border-radius:36px;display:block}
.hero .device-stack{margin-bottom:-40px}

/* trust strip */
.strip{background:var(--ink);color:#F4EEE2;padding:0}
.strip .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:20px clamp(24px,4vw,56px);padding-block:30px}
.strip .item{display:flex;align-items:baseline;gap:10px;font-size:var(--t-base);color:#CFC6B6;line-height:var(--lh-tight)}
@media (max-width:820px){.strip .wrap{grid-template-columns:1fr;gap:14px}}
.strip .item b{font-size:var(--t-md);font-weight:var(--w-head);color:#fff;letter-spacing:-.02em}

/* ---------- waitlist form ---------- */
.wl{margin-top:34px;max-width:520px}
.wl form{display:flex;gap:10px;background:var(--chalk);padding:8px;border-radius:999px;box-shadow:var(--shadow-2);border:1px solid var(--hairline)}
.wl input[type=email]{
  flex:1;min-width:0;border:0;background:transparent;font-family:var(--font);font-size:var(--t-base);
  padding:13px 20px;color:var(--ink);
}
.wl input::placeholder{color:#A79C89}
.wl input:focus{outline:none}
.wl form:focus-within{border-color:var(--primary);box-shadow:0 0 0 4px rgba(230,126,0,.14),var(--shadow-2)}
.wl .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.wl .note{font-size:var(--t-sm);color:var(--slate);margin-top:14px;line-height:1.55}
.wl .note b{color:var(--primary-ink);font-weight:var(--w-head)}
.wl .note a{color:var(--slate);text-decoration:underline;text-underline-offset:3px;text-decoration-color:#CFC6B6}
.wl .note a:hover{color:var(--primary-ink);text-decoration-color:var(--primary)}
.wl .msg{margin-top:14px;font-size:var(--t-sm);font-weight:var(--w-med);display:none;padding:12px 16px;border-radius:var(--r-md)}
.wl .msg.ok{display:block;background:var(--jade-wash);color:var(--jade)}
.wl .msg.err{display:block;background:#FCE9E9;color:#C42B2B}
.wl.on-dark .note{color:#B9AF9E}
.wl.on-dark .note b{color:var(--gold)}

/* ---------- problem ---------- */
.problem{background:var(--chalk-2)}
/* six cards, three across, two full rows. Never an orphan. */
.prob-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:52px}
@media (max-width:940px){.prob-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.prob-grid{grid-template-columns:1fr}}
.prob{background:var(--chalk);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:26px 24px;box-shadow:var(--shadow-1)}
.prob b{display:block;font-size:var(--t-md);font-weight:var(--w-head);margin-bottom:8px;letter-spacing:-.02em;line-height:1.25;color:var(--ink)}
.prob span{font-size:var(--t-base);color:var(--ink-2);line-height:var(--lh-body)}
.prob-close{margin-top:44px;font-size:var(--t-lg);font-weight:var(--w-bold);letter-spacing:-.025em;max-width:38ch;line-height:var(--lh-tight);color:var(--ink)}
.prob-close em{font-style:normal;color:var(--primary-ink)}

/* ---------- imagine (instead-of ledger) ---------- */
.imagine{background:var(--ink);color:#F4EEE2}
.imagine .eyebrow{background:rgba(255,179,0,.14);border-color:rgba(255,179,0,.28);color:var(--gold)}
.imagine h2.sec{color:#fff}
.imagine .lede{color:#B9AF9E}
.swap-list{margin-top:52px;display:grid;gap:0;border-top:1px solid #4A4034}
.swap{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(14px,3vw,40px);align-items:center;padding:26px 0;border-bottom:1px solid #4A4034}
.swap .from{color:#B9AF9E;font-size:var(--t-base);line-height:var(--lh-body)}
.swap .arrow{color:var(--primary);font-size:var(--t-md);font-weight:var(--w-head);line-height:1}
.swap .to{font-size:var(--t-md);font-weight:var(--w-bold);letter-spacing:-.02em;color:#fff;line-height:var(--lh-tight)}
@media (max-width:760px){
  .swap{grid-template-columns:1fr;gap:8px;padding:22px 0}
  .swap .arrow{display:none}
  .swap .from{font-size:var(--t-base)}
  .swap .from::after{content:" \2192";color:var(--primary);font-weight:var(--w-head)}
}

/* ---------- outcomes ---------- */
/* five cards: three, then two centred under them. No orphan hanging left. */
.out-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;margin-top:52px}
.out{grid-column:span 2}
.out:nth-child(4){grid-column:2/4}
.out:nth-child(5){grid-column:4/6}
@media (max-width:940px){
  .out-grid{grid-template-columns:repeat(4,1fr)}
  .out,.out:nth-child(4),.out:nth-child(5){grid-column:span 2}
  .out:nth-child(5){grid-column:2/4}
}
@media (max-width:620px){
  .out-grid{grid-template-columns:1fr}
  .out,.out:nth-child(4),.out:nth-child(5){grid-column:1/-1}
}
.out{background:var(--chalk);border:1px solid var(--hairline);border-radius:var(--r-xl);padding:30px 26px;box-shadow:var(--shadow-1);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.out:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
.out .ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;margin-bottom:18px;background:var(--petrol-wash)}
.out .ic svg{width:23px;height:23px;stroke:var(--primary-ink);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.out h3{font-size:var(--t-md);margin-bottom:9px;letter-spacing:-.02em;line-height:1.25}
.out p{font-size:var(--t-base);color:var(--ink-2);line-height:var(--lh-body)}
.out:nth-child(2) .ic{background:var(--jade-wash)} .out:nth-child(2) .ic svg{stroke:var(--jade)}
.out:nth-child(3) .ic{background:var(--amber-wash)} .out:nth-child(3) .ic svg{stroke:var(--amber-text)}
.out:nth-child(4) .ic{background:var(--violet-wash)} .out:nth-child(4) .ic svg{stroke:var(--violet)}

/* ---------- product / screenshots ---------- */
.product{background:linear-gradient(180deg,var(--chalk-2) 0%,var(--porcelain) 100%)}
.tabs{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:40px}
.tab{
  font-family:var(--font);font-size:var(--t-sm);font-weight:var(--w-bold);padding:11px 21px;border-radius:999px;cursor:pointer;
  background:var(--chalk);border:1px solid var(--hairline);color:var(--ink-2);transition:all .2s var(--ease)
}
.tab:hover{border-color:var(--primary);color:var(--primary-ink)}
.tab[aria-selected=true]{background:var(--grad-primary);color:#fff;border-color:transparent;box-shadow:var(--shadow-primary)}
.shot{display:none;margin-top:40px}
.shot[data-on=true]{display:block;animation:fade .38s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.shot-grid{display:grid;grid-template-columns:1fr 300px;gap:clamp(20px,3vw,40px);align-items:end}
.browser{border-radius:var(--r-xl);overflow:hidden;background:var(--chalk);box-shadow:var(--shadow-3);border:1px solid var(--hairline)}
.browser .bar{display:flex;align-items:center;gap:7px;padding:12px 16px;background:#F1ECE3;border-bottom:1px solid var(--hairline)}
.browser .dot{width:11px;height:11px;border-radius:50%;background:#D6CDBE}
.browser .url{margin-left:12px;font-size:var(--t-2xs);color:#8A8172;background:var(--chalk);padding:5px 14px;border-radius:999px;font-weight:600}
.shot .cap{margin-top:24px;font-size:var(--t-base);color:var(--ink-2);max-width:70ch;line-height:var(--lh-body)}
.shot .cap b{color:var(--ink);font-weight:var(--w-head)}
@media (max-width:900px){.shot-grid{grid-template-columns:1fr}.shot-grid .phone{width:min(260px,64%);margin-inline:auto}}

/* ---------- audiences ---------- */
.aud{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(28px,5vw,72px);align-items:center;margin-top:0}
.aud + .aud{margin-top:clamp(56px,7vw,104px)}
.aud:nth-child(even) .aud-media{order:-1}
.aud-media{position:relative;border-radius:var(--r-2xl);overflow:hidden;box-shadow:var(--shadow-2)}
.aud-media img{aspect-ratio:4/3;object-fit:cover;width:100%}
.aud-media .tagpill{position:absolute;left:18px;bottom:18px;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);padding:9px 16px;border-radius:999px;font-size:var(--t-xs);font-weight:var(--w-head);letter-spacing:-.01em;color:var(--primary-ink)}
.aud h3{font-size:var(--t-xl);letter-spacing:-.028em}
.aud .kicker{font-size:var(--t-base);font-weight:var(--w-head);letter-spacing:.09em;text-transform:uppercase;color:var(--primary);margin-bottom:14px;line-height:1.3}
.aud p{font-size:var(--t-base);color:var(--ink-2);margin-top:16px;line-height:var(--lh-body)}
.aud ul{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:11px}
.aud li{display:flex;gap:11px;font-size:var(--t-base);color:var(--ink-2);line-height:var(--lh-body)}
.aud li svg{flex:none;width:19px;height:19px;margin-top:3px;stroke:var(--jade);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:880px){.aud{grid-template-columns:1fr}.aud:nth-child(even) .aud-media{order:0}}

/* ---------- individual ---------- */
.individual{background:var(--chalk)}
/* five cards again: three, then two centred. */
.ind-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:48px}
.ind{grid-column:span 2}
.ind:nth-child(4){grid-column:2/4}
.ind:nth-child(5){grid-column:4/6}
@media (max-width:940px){
  .ind-grid{grid-template-columns:repeat(4,1fr)}
  .ind,.ind:nth-child(4),.ind:nth-child(5){grid-column:span 2}
  .ind:nth-child(5){grid-column:2/4}
}
@media (max-width:620px){
  .ind-grid{grid-template-columns:1fr}
  .ind,.ind:nth-child(4),.ind:nth-child(5){grid-column:1/-1}
}
.ind{border:1px solid var(--hairline);border-radius:var(--r-lg);padding:22px;background:var(--porcelain)}
.ind b{display:block;font-size:var(--t-md);font-weight:var(--w-head);margin-bottom:7px;line-height:1.25;color:var(--ink)}
.ind span{font-size:var(--t-base);color:var(--ink-2);line-height:var(--lh-body)}

/* ---------- closing ---------- */
.closing{
  background:
    radial-gradient(900px 500px at 50% 0%,rgba(255,179,0,.22),transparent 65%),
    var(--chalk-2);
  text-align:center
}
.closing h2{font-size:var(--t-2xl);max-width:20ch;margin-inline:auto;letter-spacing:-.032em}
.closing .three{margin-top:26px;font-size:var(--t-md);font-weight:var(--w-head);color:var(--primary-ink);letter-spacing:-.02em}
.closing .wl{margin-inline:auto;margin-top:36px}

/* ---------- footer ---------- */
footer{background:var(--ink);color:#B9AF9E;padding:60px 0 34px;font-size:var(--t-sm);line-height:var(--lh-body)}
footer .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px}
footer img.logo{height:34px;width:auto;margin-bottom:16px}
footer h4{color:#fff;font-size:var(--t-2xs);letter-spacing:.11em;text-transform:uppercase;margin-bottom:16px;font-weight:var(--w-head)}
footer a{color:#B9AF9E;text-decoration:none;display:block;margin-bottom:10px;transition:color .2s var(--ease)}
footer a:hover{color:var(--gold)}
footer .base{margin-top:44px;padding-top:24px;border-top:1px solid #4A4034;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;font-size:var(--t-xs);color:#A79C89}
@media (max-width:760px){footer .cols{grid-template-columns:1fr 1fr}footer .cols>div:first-child{grid-column:1/-1}}

/* ---------- legal pages ---------- */
.legal{padding-top:clamp(48px,6vw,80px)}
.legal .wrap{max-width:820px}
.legal h1{font-size:var(--t-2xl);letter-spacing:-.032em}
.legal .updated{color:var(--slate);font-size:var(--t-sm);margin-top:16px;line-height:var(--lh-body)}
.legal h2{font-size:var(--t-lg);margin-top:52px;letter-spacing:-.025em}
.legal h3{font-size:var(--t-md);margin-top:30px;letter-spacing:-.02em}
.legal p{margin-top:14px;color:var(--ink-2);line-height:var(--lh-body);font-size:var(--t-base)}
.legal ul{margin:14px 0 0;padding-left:22px;color:var(--ink-2)}
.legal li{margin-top:9px;line-height:var(--lh-body);font-size:var(--t-base)}
.legal a{color:var(--primary-ink);font-weight:var(--w-med)}
.legal .box{margin-top:26px;background:var(--chalk);border:1px solid var(--hairline);border-left:4px solid var(--primary);border-radius:var(--r-md);padding:20px 24px}
.legal .box p:first-child{margin-top:0}
.legal .back{display:inline-block;margin-top:56px;font-weight:var(--w-bold);font-size:var(--t-base);text-decoration:none;color:var(--primary-ink)}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;text-align:left}
  .device-stack{min-height:auto;margin-top:44px}
  .hero .device-stack{margin-bottom:-24px}
  .wl{max-width:none}
}
@media (max-width:560px){
  .nav-in{height:66px;gap:14px}
  .nav .logo img{height:26px}
  .nav .btn-sm{padding:10px 16px;font-size:var(--t-xs)}
  .wl form{flex-direction:column;border-radius:var(--r-xl);padding:10px}
  .wl input[type=email]{padding:14px 16px;text-align:left}
  .wl .btn{width:100%}
  .strip .wrap{gap:16px}
  .strip .item{width:100%}
}