/* hero */
.hero{position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(1100px 520px at 78% -8%,rgba(166,64,59,.07),transparent 60%),radial-gradient(760px 420px at 8% 8%,rgba(184,138,68,.05),transparent 55%);pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1.02fr 1.15fr;gap:64px;align-items:center;position:relative;padding-top:96px;padding-bottom:96px}
.hero-badge{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:500;color:var(--ink-2);background:#fff;border:1px solid var(--line);padding:7px 14px 7px 9px;border-radius:100px;margin-bottom:28px;box-shadow:var(--sh-sm)}
.hero-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(47,158,98,.16)}
.hero h1{font-size:clamp(46px,5.6vw,78px);line-height:1.0;font-weight:800;letter-spacing:-0.04em;margin-bottom:26px}
.hero h1 .accent{color:var(--red)}
.hero .lede{font-size:22px;color:var(--ink-2);font-weight:450;max-width:26ch;margin-bottom:14px;letter-spacing:-0.017em}
.hero .sub{font-size:17px;color:var(--ink-3);max-width:46ch;margin-bottom:36px;line-height:1.6}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-proof{display:flex;align-items:center;gap:26px;margin-top:38px;font-size:13.5px;color:var(--ink-3);flex-wrap:wrap}
.hero-proof .item{display:flex;align-items:center;gap:8px}

/* dashboard mock (hero) */
.mock{position:relative;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-lg);padding:20px;transform:perspective(1900px) rotateY(-10deg) rotateX(3deg)}
.mock-head{display:flex;align-items:center;gap:7px;padding:2px 4px 16px}
.mock-dot{width:10px;height:10px;border-radius:50%;background:#E4E7EB}
.mock-title{margin-left:9px;font-size:13px;font-weight:600;color:var(--ink-3)}
.mock-tag{margin-left:auto;font-size:11px;font-weight:600;color:var(--red);background:var(--red-soft);padding:4px 9px;border-radius:7px}
.mock-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.stat{background:var(--bg-grey);border:1px solid var(--line);border-radius:14px;padding:16px}
.stat .k{font-size:12px;font-weight:600;color:var(--ink-3)}
.stat .v{font-size:26px;font-weight:700;letter-spacing:-0.03em;margin-top:7px}
.stat .d{font-size:12.5px;font-weight:600;margin-top:4px}
.stat .d.up{color:var(--green)} .stat .d.bronze{color:var(--bronze)}
.stat.wide{grid-column:span 2}
.spark{display:block;width:100%;height:48px;margin-top:10px}
.qbar{height:7px;border-radius:100px;background:#E7EAEE;overflow:hidden;margin-top:12px}
.qbar>span{display:block;height:100%;border-radius:100px;background:linear-gradient(90deg,var(--bronze),var(--red))}
.float-chip{position:absolute;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh);padding:11px 15px;display:flex;align-items:center;gap:11px;font-size:13px;font-weight:600}
.float-chip .ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none}
.float-chip small{display:block;font-size:11px;font-weight:500;color:var(--ink-3)}
.chip-ai{top:44px;right:-14px}
.chip-dl{bottom:26px;left:-2px}

/* logo strip */
.logos p{text-align:center;font-size:13px;font-weight:500;color:var(--ink-4);margin-bottom:26px;letter-spacing:.02em}
.logo-row{display:flex;align-items:center;justify-content:center;gap:64px;flex-wrap:wrap;opacity:.6}
.logo-row span{font-size:19px;font-weight:700;color:var(--ink-2);letter-spacing:-0.02em}

/* section heads */
.sec-head{max-width:680px;margin-bottom:56px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head h2{font-size:clamp(32px,3.8vw,50px);font-weight:800;letter-spacing:-0.035em;line-height:1.05;margin:16px 0 16px}
.sec-head p{font-size:19px;color:var(--ink-2);letter-spacing:-0.01em;line-height:1.55}
.sec-head.on-dark h2{color:#fff}
.sec-head.on-dark p{color:var(--dark-ink-2)}

/* product card styles now live in datasteak.css - shared with the marketplace */

/* doneness */
.done-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.done{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:38px 32px;box-shadow:var(--sh-sm);overflow:hidden;transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.done:hover{transform:translateY(-5px);box-shadow:var(--sh)}
.done .sear{position:absolute;top:0;left:0;right:0;height:4px}
.done .lvl{font-size:14px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin-bottom:6px}
.done h3{font-size:24px;font-weight:700;letter-spacing:-0.025em;margin-bottom:18px}
.done ul{list-style:none}
.done li{font-size:15.5px;color:var(--ink-2);padding:10px 0 10px 28px;position:relative;border-top:1px solid var(--line)}
.done li:first-child{border-top:none}
.done li::before{content:"";position:absolute;left:4px;top:17px;width:9px;height:9px;border-radius:50%}
.done.rare .lvl{color:var(--red)} .done.rare li::before{background:var(--red)}
.done.medium .lvl{color:var(--bronze)} .done.medium li::before{background:var(--bronze)}
.done.well .lvl{color:var(--ink)} .done.well li::before{background:var(--ink)}

/* features */
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.feat{background:#fff;padding:30px 26px;transition:background .2s var(--ease)}
.feat:hover{background:var(--bg-grey)}
.feat .fic{width:38px;height:38px;border-radius:10px;background:var(--bg-grey);display:grid;place-items:center;margin-bottom:16px;color:var(--red)}
.feat h4{font-size:16px;font-weight:650;letter-spacing:-0.015em;margin-bottom:6px}
.feat p{font-size:13.5px;color:var(--ink-3);line-height:1.5}

/* dark dashboard */
.dash-shell{background:linear-gradient(180deg,#121419,#0E1014);border:1px solid var(--dark-line);border-radius:var(--r-xl);padding:34px;box-shadow:0 30px 80px rgba(0,0,0,.45);position:relative;overflow:hidden}
.dash-shell::before{content:"";position:absolute;inset:0;background:radial-gradient(1000px 360px at 12% -12%,rgba(166,64,59,.16),transparent 60%);pointer-events:none}
.dash-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px;position:relative}
.dash-top .t{color:#fff;font-weight:650;font-size:16px;letter-spacing:-0.01em;display:flex;align-items:center;gap:11px}
.dash-top .live{font-size:12px;font-weight:600;color:var(--green-d);display:flex;align-items:center;gap:7px}
.dash-top .live .d{width:7px;height:7px;border-radius:50%;background:var(--green-d);box-shadow:0 0 0 3px rgba(95,201,140,.18)}
.dash-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:18px;position:relative}
.panel{background:var(--dark-panel);border:1px solid var(--dark-line);border-radius:16px;padding:22px}
/* Unscoped from .panel deliberately. The property-type minis need the same
   label-and-date row without being wrapped in a panel, and every block in this
   section must carry its own period or someone has to ask which month it is. */
.ph{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.ph .lbl{font-size:13px;font-weight:600;color:var(--dark-ink-2)}
.ph .val{font-size:12.5px;font-weight:600;color:#C4C9D2}
.panel .big{font-size:32px;font-weight:700;color:#fff;letter-spacing:-0.03em;margin:4px 0 2px}
.panel .chg{font-size:13px;font-weight:600;color:var(--green-d)}
/* A falling figure must not render green. The old panel never needed this
   because its numbers were invented and always rose. */
/* #D06A62, the dark-panel red already used for the bars in this section, not
   var(--red) which is the light-theme value and goes muddy on this background. */
.panel .chg.down{color:#D06A62}
.dash-col{display:grid;gap:18px}
.kpi-mini{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mini{background:var(--dark-panel);border:1px solid var(--dark-line);border-radius:14px;padding:16px}
.mini .k{font-size:12px;color:var(--dark-ink-2);font-weight:600}
.mini .v{font-size:22px;color:#fff;font-weight:700;letter-spacing:-0.02em;margin-top:4px}
.mini .s{font-size:12px;font-weight:600;margin-top:3px}
.mini .s.up{color:var(--green-d)} .mini .s.br{color:var(--bronze-d)}
/* .s had an up and a bronze variant but no down, because nothing using it had
   ever fallen. UK flat prices are down 1.6% year on year, so it does now. */
.mini .s.down{color:#D06A62}
.toplist{display:grid;gap:13px;margin-top:14px}
.toprow{display:flex;align-items:center;gap:14px}
.toprow .nm{font-size:13.5px;color:#C4C9D2;font-weight:500;flex:none;width:130px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track{flex:1;height:8px;border-radius:100px;background:#20242E;overflow:hidden}
.track>span{display:block;height:100%;border-radius:100px}
/* 72px, not 42. This was sized for values like "88%" and now carries
   "£293,262". flex:none means the box cannot grow, so a narrow one overflows
   instead of wrapping and the number collides with the bar beside it. */
.toprow .n{font-size:13px;color:var(--dark-ink-2);font-weight:600;width:72px;text-align:right;flex:none;white-space:nowrap}
/* Leaderboard variant: rank, name, bar, average price, change.
   .nm is 210px rather than the default 130px, which truncated "Newry Mourne
   and Down" and "Derry City and Strabane" to an ellipsis - bad on a board
   where the name is the content.
   The bar is scaled from zero on the 12-month change. Worth knowing when
   reading it: these five values span 12.4% to 12.8%, so the bars are all close
   to full length by design and the ranking is carried by the numbers, not by
   the bar. Julius chose to keep them, 15 Sep 2026: they balance the row. */
.toplist.rank .toprow{gap:16px}
.toplist.rank .rk{font-size:12.5px;font-weight:700;color:var(--dark-ink-3);width:16px;flex:none;text-align:right}
.toplist.rank .nm{width:210px}
/* .track is flex:1, which stretched it the full width of the wide column.
   Capped at 420px: long enough to read as a chart, short enough that the name,
   price and change keep the weight. */
.toplist.rank .track{max-width:420px}
.toplist.rank .pr{font-size:13px;color:var(--dark-ink-2);font-weight:600;width:92px;text-align:right;flex:none;white-space:nowrap}
.toplist.rank .n{font-size:13.5px;color:var(--green-d);font-weight:700;width:62px;text-align:right;flex:none;white-space:nowrap}
.cust{display:grid;gap:12px;margin-top:14px}
.custrow{display:flex;align-items:center;gap:12px}
.av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;color:#fff;flex:none}
.cust .info{flex:1;min-width:0}
.cust .info .n{font-size:13.5px;color:var(--dark-ink);font-weight:600}
.cust .info .e{font-size:11.5px;color:var(--dark-ink-3)}
.cust .amt{font-size:13.5px;color:#fff;font-weight:700}

/* cta */
.cta-band{text-align:center}
.cta-band h2{font-size:clamp(34px,4.4vw,56px);font-weight:800;letter-spacing:-0.04em;margin-bottom:18px}
.cta-band p{font-size:20px;color:var(--ink-2);max-width:48ch;margin:0 auto 34px;line-height:1.55}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.cta-note{margin-top:20px;font-size:13.5px;color:var(--ink-4)}

/* reveal */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* responsive */
@media(max-width:1080px){
  .hero-grid{grid-template-columns:1fr;gap:48px;padding-top:64px;padding-bottom:64px}
  .mock{transform:none}
  .products,.feat-grid{grid-template-columns:repeat(2,1fr)}
  .done-grid{grid-template-columns:1fr}
  .dash-grid{grid-template-columns:1fr}
  .pad-y{padding-top:88px;padding-bottom:88px}
}
@media(max-width:600px){
  :root{--pad:20px}
  .products,.feat-grid{grid-template-columns:1fr}
  .chip-ai,.chip-dl{position:static;margin-top:12px;display:inline-flex}
  .hero h1{font-size:clamp(38px,11vw,52px)}

  /* ---- THE PROPERTY DASHBOARD ON A PHONE, fixed 30 Sep 2026 --------------
     Both panels were being CUT OFF rather than scrolling, and one line
     explains why: .dash-shell carries overflow:hidden, so anything too wide
     is clipped silently instead of producing a scrollbar somebody could use.

     The arithmetic on a 375px phone, which is what it was failing on:

       375  viewport
       -40  page gutter (--pad 20 each side)
       -68  .dash-shell padding (34 each side)
       -44  .panel padding (22 each side)
       ---
       223  usable

     "Fastest rising areas" needed 444px before its bar got a single pixel:
     rank 16 + name 210 + price 92 + change 62, plus four 16px gaps. The
     property-type minis needed about 268px, because "£444,652" has no break
     opportunity and so sets a min-content width of roughly 95px per cell.

     Both are fixed by making the content fit, NOT by turning on horizontal
     scrolling. A sideways-scrolling panel inside a vertically scrolling page
     is a worse answer than a layout that reflows. */
  .dash-shell{padding:18px}
  .panel{padding:16px}

  /* Two lines instead of five columns. Rank, area and the percentage on the
     first line, because the percentage is what the panel is ABOUT; average
     price smaller underneath, because it is context rather than the point.

     The bar goes entirely. It encodes the same number as the percentage
     beside it, so on a screen this narrow it is the one element costing
     width without adding information. */
  .toplist.rank .track{display:none}
  .toplist.rank .toprow{
    display:grid;
    grid-template-columns:16px 1fr auto;
    grid-template-areas:"rk nm pc" ".  pr pr";
    gap:1px 10px;
    align-items:baseline;
  }
  .toplist.rank .rk{grid-area:rk}
  /* width:auto undoes the desktop fixed 210px; min-width:0 is what actually
     lets a grid item shrink, because grid items default to min-width:auto and
     would otherwise refuse to go below their content and overflow again. */
  .toplist.rank .nm{grid-area:nm;width:auto;min-width:0}
  .toplist.rank .n {grid-area:pc;width:auto}
  .toplist.rank .pr{grid-area:pr;width:auto;text-align:left;font-size:12px;color:var(--dark-ink-3);font-weight:500}

  /* Minis stay 2x2 - one column would make the panel very tall for four
     numbers - but the cell has to actually hold "£444,652" without forcing
     the grid wider than the panel. 17px plus tighter padding does it. */
  .mini{padding:14px}
  .mini .v{font-size:17px}
}