/* Ownerkit - ownerkit.com.au
   Palette and status colours are lifted straight from the app so the site and the
   app read as one thing. Structure uses hairline rules rather than stacked cards. */

:root{
  --ink:#142A47;
  --ink-soft:#24415f;
  --paper:#EEF1F5;
  --white:#fff;
  --action:#0040DF;
  --over:#C0113A;
  --soon:#C87A0A;
  --ok:#0E7A5F;
  --text:#17202A;
  --muted:#5A6675;
  --line:#D8DEE6;
  --wrap:1140px;
  color-scheme:light;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--white); color:var(--text);
  font:400 17px/1.6 "Public Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
h1,h2,h3,.display{
  font-family:"Archivo", ui-sans-serif, system-ui, sans-serif;
  font-weight:800; letter-spacing:-0.02em; line-height:1.05; margin:0;
  font-stretch:105%;
}
p{margin:0 0 1em}
a{color:var(--action); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--action); outline-offset:3px; border-radius:4px}
img{max-width:100%; display:block}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}
.muted{color:var(--muted)}
.small{font-size:15px}

/* ---------- header ---------- */
header{background:var(--ink); color:#fff}
header .wrap{display:flex; align-items:center; gap:24px; min-height:68px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:11px; color:#fff; font-family:"Archivo"; font-weight:800; font-size:23px; letter-spacing:-0.02em}
.brand img{width:34px; height:34px; border-radius:8px}
.brand:hover{text-decoration:none}
nav{margin-left:auto; display:flex; gap:22px; font-size:16px}
nav a{color:#cfd9e6}
nav a:hover{color:#fff}

/* ---------- hero ---------- */
.hero{background:var(--ink); color:#fff; padding:52px 0 64px}
.hero-grid{display:grid; grid-template-columns:1.12fr .88fr; gap:54px; align-items:start}
.hero h1{font-size:clamp(38px,6vw,62px); color:#fff}
.hero .lede{font-size:20px; color:#cbd6e4; max-width:34em; margin-top:20px}
.cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:30px}
.btn{
  display:inline-block; padding:14px 22px; border-radius:10px; font-weight:700; font-size:17px;
  background:var(--action); color:#fff; border:2px solid var(--action);
}
.btn:hover{text-decoration:none; background:#0036bb; border-color:#0036bb}
.btn.ghost{background:transparent; color:#fff; border-color:#4a5f7d}
.btn.ghost:hover{background:#1d3757; border-color:#6b82a1}
.note{margin-top:16px; font-size:15px; color:#93a6bd}

/* ---------- the ledger: the page's one bold element ---------- */
.ledger{background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 18px 40px rgba(6,16,32,.28)}
.ledger-head{display:flex; align-items:baseline; gap:10px; padding:16px 18px; border-bottom:1px solid var(--line)}
.ledger-head b{font-family:"Archivo"; font-weight:800; font-size:18px; color:var(--ink)}
.ledger-head span{font-size:14px; color:var(--muted); margin-left:auto}
.row{display:flex; align-items:center; gap:14px; padding:13px 18px 13px 14px; border-bottom:1px solid #EDF0F4; border-left:5px solid transparent}
.row:last-child{border-bottom:0}
.row .what{flex:1; min-width:0}
.row .nm{font-weight:700; font-size:16px; color:var(--text)}
.row .dt{font-size:14px; color:var(--muted)}
.chip{font-size:13px; font-weight:700; color:#fff; padding:5px 11px; border-radius:999px; white-space:nowrap}
.r-over{border-left-color:var(--over)} .r-over .chip{background:var(--over)}
.r-soon{border-left-color:var(--soon)} .r-soon .chip{background:var(--soon)}
.r-ok{border-left-color:var(--ok)} .r-ok .chip{background:var(--ok)}
.ledger-foot{padding:13px 18px; background:#F7F9FB; font-size:14px; color:var(--muted)}

/* one orchestrated reveal on load, nothing else moves */
.row{opacity:0; transform:translateY(6px); animation:rowin .45s ease forwards}
.row:nth-child(1){animation-delay:.10s} .row:nth-child(2){animation-delay:.20s}
.row:nth-child(3){animation-delay:.30s} .row:nth-child(4){animation-delay:.40s}
.row:nth-child(5){animation-delay:.50s} .row:nth-child(6){animation-delay:.60s}
@keyframes rowin{to{opacity:1; transform:none}}
@media (prefers-reduced-motion: reduce){ .row{opacity:1; transform:none; animation:none} }

/* ---------- sections ---------- */
section{padding:66px 0}
section h2{font-size:clamp(28px,3.6vw,38px); color:var(--ink)}
section h2 + p{margin-top:16px; max-width:36em; color:var(--muted); font-size:18px}
.alt{background:var(--paper)}

/* steps: a real sequence, so it is numbered */
.steps{counter-reset:s; margin-top:36px; display:grid; grid-template-columns:repeat(3,1fr); gap:34px}
.step{counter-increment:s; border-top:3px solid var(--ink); padding-top:16px}
.step::before{content:counter(s); font-family:"Archivo"; font-weight:800; font-size:15px; color:var(--action)}
.step h3{font-size:21px; margin:6px 0 8px; color:var(--ink)}
.step p{margin:0; color:var(--muted); font-size:16px}

/* templates: a list, because that is what it is */
.tpl{margin-top:34px; border-top:1px solid var(--line)}
.tpl div{display:grid; grid-template-columns:minmax(190px,1fr) 2fr; gap:20px; padding:15px 0; border-bottom:1px solid var(--line)}
.tpl b{font-size:17px; color:var(--ink)}
.tpl span{color:var(--muted); font-size:16px}

/* screens */
.screens{margin-top:36px; display:grid; grid-template-columns:repeat(4,1fr); gap:26px}
.screens figure{margin:0}
.screens img{border-radius:12px; border:1px solid var(--line); box-shadow:0 10px 24px rgba(20,42,71,.10)}
.screens figcaption{margin-top:12px; font-size:15px; color:var(--muted)}

/* what you get: definition list, not a card grid */
.feat{margin-top:30px; display:grid; grid-template-columns:1fr 1fr; gap:0 48px}
.feat > div{padding:20px 0; border-bottom:1px solid var(--line)}
.feat h3{font-size:19px; color:var(--ink); margin-bottom:6px}
.feat p{margin:0; color:var(--muted); font-size:16px}

/* form */
.signup{background:var(--ink); color:#fff}
.signup h2{color:#fff}
.signup h2 + p{color:#cbd6e4}
form{margin-top:26px; display:flex; gap:12px; flex-wrap:wrap; max-width:620px}
input[type=email]{
  flex:1; min-width:240px; padding:14px 16px; font-size:17px; font-family:inherit;
  border:2px solid #4a5f7d; border-radius:10px; background:#0e2039; color:#fff;
}
input[type=email]::placeholder{color:#8fa2b9}
input[type=email]:focus{border-color:var(--action); outline:none}
button{font-family:inherit; cursor:pointer}
.formnote{margin-top:14px; font-size:15px; color:#93a6bd}
.ok{margin-top:18px; padding:14px 16px; border-radius:10px; background:#0e2039; border:2px solid var(--ok); color:#fff; display:none}

/* footer */
footer{background:#0d1c31; color:#93a6bd; padding:40px 0; font-size:15px}
footer .wrap{display:flex; gap:12px 28px; flex-wrap:wrap; align-items:center}
footer a{color:#cfd9e6}
footer .sp{margin-left:auto}

/* long-form pages */
.page{padding:54px 0 72px; max-width:44em}
.page h1{font-size:clamp(32px,4.6vw,44px); color:var(--ink)}
.page h2{font-size:23px; color:var(--ink); margin:34px 0 10px}
.page ul{padding-left:22px} .page li{margin:7px 0}
.page .updated{color:var(--muted); font-size:15px; margin-top:10px}
.page .box{background:var(--paper); border-left:4px solid var(--ink); padding:16px 18px; border-radius:0 10px 10px 0; margin:24px 0}
.page .box p:last-child{margin:0}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr; gap:38px}
  .steps{grid-template-columns:1fr; gap:26px}
  .screens{grid-template-columns:1fr 1fr; gap:20px}
  .feat{grid-template-columns:1fr; gap:0}
  .tpl div{grid-template-columns:1fr; gap:4px}
  section{padding:48px 0}
  nav{gap:16px; font-size:15px}
}
@media (max-width:560px){
  .screens{grid-template-columns:1fr}
  nav{width:100%; margin:0 0 10px; order:3}
}