/* ============================================================
   Golden Goose Property - Property Investment Comparison Tool
   Visual identity: "market research terminal"
   Cool slate ground + deep navy, teal for the leading market,
   brass to tie back to the logo, monospaced figures for data.
   ============================================================ */

:root{
  /* ground + structure */
  --paper:#f2f5f8;
  --surface:#ffffff;
  --ink:#101a29;
  --muted:#57657a;
  --line:#dbe2ec;
  --soft:#e9eef5;

  /* deep navy: buttons, CTA panel, sticky bar */
  --deep:#14304e;
  --deep-2:#1d4671;
  --deep-line:#0c2039;

  /* orange: primary tool CTA (distinct from the gold webinar CTA) */
  --orange:#e5791e;
  --orange-deep:#cf6c17;

  /* brass: brand tie-in to the logo */
  --brass:#8f6712;        /* text-safe on light grounds */
  --brass-bright:#c9962e; /* borders, hairlines, decorative */
  --brass-lite:#e8c07a;   /* brass on navy */

  /* teal: the market that leads on a metric */
  --win:#ddefeb;
  --win-line:#10847a;
  --win-ink:#0a5d55;

  /* red: cautions */
  --warn:#b3261e;
  --warn-soft:#fdecea;
  --warn-line:#e7b3ae;
  --warn-ink:#7a2b24;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:radial-gradient(1200px 520px at 50% 0, #ffffff 0%, #edf2f8 45%, var(--paper) 100%) fixed, var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans','Segoe UI',Arial,sans-serif; font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:'Archivo','Helvetica Neue',Arial,sans-serif; font-weight:700;
  letter-spacing:-.025em; margin:0; text-wrap:balance;
}
em{color:var(--brass); font-style:italic; font-weight:600}
p{margin:0}
a{color:inherit}
button{font:inherit; cursor:pointer}
button:focus-visible, select:focus-visible, a:focus-visible{outline:3px solid var(--brass-bright); outline-offset:4px}

header{max-width:1160px; margin:0 auto; padding:14px 32px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line)}
.brand{display:block; line-height:0; text-decoration:none}
.brand-logo{display:block; width:190px; max-width:100%; height:auto}
.header-note{font-size:10.5px; letter-spacing:.16em; color:var(--muted)}
@media (max-width:600px){ .header-note{display:none} }

main{min-height:70vh}

/* ---------- Intro screen ---------- */
.intro{max-width:860px; margin:0 auto; padding:34px 28px 20px; text-align:center}
.eyebrow{font-size:11.5px; letter-spacing:.17em; font-weight:600; color:var(--brass); margin-bottom:18px; text-transform:uppercase}
.intro h1{font-size:clamp(27px,3.4vw,40px); line-height:1.15; max-width:760px; margin:0 auto 18px}
.lead{font-size:17px; line-height:1.62; color:var(--muted); max-width:560px; margin:0 auto 26px}

/* Sample-comparison anchor: previews the payoff (a market vs the UK, UK
   highlighted) using the real terminal styling, so the first screen is not
   just text. */
.intro-preview{
  max-width:440px; margin:2px auto 30px; padding:15px 17px; text-align:left;
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 18px 40px rgba(16,26,41,.08);
}
.ip-caption{font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin-bottom:11px}
.ip-row{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.ip-cell{padding:11px 13px; border:1px solid var(--line); border-radius:8px; background:var(--paper)}
.ip-cell.ip-uk{background:var(--win); border-color:var(--win-line)}
.ip-label{display:block; font-size:11px; letter-spacing:.02em; color:var(--muted); font-weight:600; margin-bottom:5px}
.ip-cell.ip-uk .ip-label{color:var(--win-ink)}
.ip-fig{font-family:'IBM Plex Mono',ui-monospace,monospace; font-weight:600; font-size:22px; font-variant-numeric:tabular-nums; letter-spacing:-.02em; color:var(--ink); display:block}
.ip-cell.ip-uk .ip-fig{color:var(--win-ink)}
.ip-badge{display:inline-block; margin-top:8px; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--win-ink); background:#cbe7e1; border:1px solid var(--win-line); padding:2px 7px; border-radius:4px}
.primary{
  background:var(--orange); color:#fff; border:1px solid var(--orange); padding:17px 24px; border-radius:6px;
  display:inline-flex; align-items:center; gap:14px; font-weight:600; font-size:16px; min-height:56px;
  text-decoration:none; box-shadow:0 10px 22px rgba(229,121,30,.22); transition:background .18s, transform .18s;
}
.primary:hover{background:var(--orange-deep); transform:translateY(-1px)}
.primary span{font-size:20px}
.small{font-size:13px; color:var(--muted); margin-top:15px}
.preview-strip{display:flex; justify-content:center; gap:34px; padding:26px 0; margin-top:34px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-size:13.5px; text-align:left; flex-wrap:wrap}
.preview-strip b{
  font-family:'IBM Plex Mono',ui-monospace,monospace; color:var(--brass); font-size:16px;
  margin-right:9px; font-weight:600;
}
.quiet{font-size:13.5px; line-height:1.6; color:var(--muted); margin:22px auto 0; max-width:600px}

/* ---------- Compare screen ---------- */
.compare{max-width:980px; margin:0 auto; padding:40px 26px 10px; animation:arrive .35s ease-out}
@keyframes arrive{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)}}
.compare-head{max-width:680px}
.compare-head h1{font-size:clamp(27px,3.2vw,38px); margin-bottom:14px}
.compare-head p{color:var(--muted); font-size:16px; line-height:1.65}

.picker{
  display:flex; align-items:center; gap:14px; margin:30px 0 6px; padding:18px 20px;
  background:var(--surface); border:1px solid var(--line); border-radius:10px; flex-wrap:wrap;
}
.picker label{font-size:12px; letter-spacing:.09em; color:var(--muted); font-weight:600; text-transform:uppercase}
.picker .vs{font-family:'IBM Plex Mono',ui-monospace,monospace; color:var(--brass); font-size:13px; letter-spacing:-.01em}
select{
  appearance:none; -webkit-appearance:none; background:var(--paper) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="9"><path d="M1 1l6 6 6-6" fill="none" stroke="%2357657a" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat right 14px center;
  border:1px solid var(--line); border-radius:6px; padding:12px 40px 12px 14px; font:inherit; font-weight:600;
  color:var(--ink); font-size:15px; min-width:220px; cursor:pointer;
}
select:hover{border-color:var(--brass-bright)}

.table-wrap{overflow-x:auto; margin:26px 0 6px; border:1px solid var(--line); border-radius:10px; background:var(--surface)}
table{border-collapse:collapse; width:100%; min-width:560px}
caption{
  caption-side:top; text-align:left; padding:20px 22px 4px; font-size:11px; letter-spacing:.13em;
  color:var(--muted); text-transform:uppercase; font-weight:600;
}
thead th{
  text-align:left; padding:16px 22px; font-family:'Archivo','Helvetica Neue',Arial,sans-serif;
  font-weight:700; font-size:17px; letter-spacing:-.015em;
  border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--surface);
}
thead th.uk-col{color:var(--win-ink); background:var(--win); position:relative}
.uk-badge{
  display:block; font-family:'IBM Plex Sans',sans-serif; font-size:10px; letter-spacing:.12em;
  font-weight:600; color:var(--win-line); margin-top:5px; text-transform:uppercase;
}
tbody th{
  text-align:left; padding:15px 22px; font-size:13.5px; color:var(--muted); font-weight:600; vertical-align:top;
  border-bottom:1px solid var(--line); width:30%;
}
tbody td{padding:15px 22px; font-size:15px; border-bottom:1px solid var(--line); vertical-align:top; line-height:1.5}
tbody tr:last-child th, tbody tr:last-child td{border-bottom:0}
td.uk-col{background:var(--win); color:var(--win-ink); position:relative}
td.uk-col.glow{box-shadow:inset 0 0 0 1.5px var(--win-line), inset 0 0 22px rgba(16,132,122,.16)}
.stat-figure{
  font-family:'IBM Plex Mono',ui-monospace,monospace; font-weight:600; font-size:17px;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em; display:block;
}
.win-tag{
  display:inline-flex; align-items:center; gap:5px; font-size:10.5px; letter-spacing:.05em; font-weight:600;
  color:var(--win-ink); background:#cbe7e1; border:1px solid var(--win-line);
  padding:3px 9px; border-radius:4px; margin-top:7px; text-transform:uppercase;
}
.win-tag.alt{color:#5c6a7d; background:#e8edf3; border-color:#ccd6e2}

/* The rebuttal sits in the same cell as the flattering number, so the reader
   cannot take the number away uncorrected. */
.rebuttal{
  display:block; margin-top:8px; padding:9px 11px;
  background:var(--warn-soft); border:1px solid var(--warn-line); border-left:3px solid var(--warn);
  border-radius:5px; font-size:12.5px; line-height:1.5; color:var(--warn-ink);
  text-decoration:none; font-weight:400; letter-spacing:0;
}
.rebuttal b{display:block; margin-top:4px; font-weight:600; color:var(--warn); text-decoration:underline; text-underline-offset:2px}
.rebuttal:hover{background:#fbe0dc}
.caveat:target{animation:flag 1.6s ease-out}
@keyframes flag{0%,55%{background:#fbd9d4} 100%{background:var(--warn-soft)}}
@media (prefers-reduced-motion:reduce){ .caveat:target{animation:none} }
.cell-note{display:block; font-size:12.5px; color:var(--muted); margin-top:4px; font-weight:400; letter-spacing:0}

.table-source{font-size:12px; color:var(--muted); margin:12px 4px 0}

.reveal-hook{
  margin:42px 0 0; padding-top:32px; border-top:1px solid var(--line); text-align:center;
}
.warn-icon{display:block; color:var(--warn); margin-bottom:10px; line-height:0}
.warn-icon svg{display:inline-block}
.reveal-hook h2{
  font-size:clamp(24px,3.2vw,34px); line-height:1.16; max-width:680px; margin:0 auto;
  color:var(--warn);
}

.insight{
  margin:22px 0 0; padding:24px 26px; background:var(--surface);
  border:1px solid var(--line); border-left:3px solid var(--brass-bright); border-radius:4px;
}
.insight p{font-size:15.5px; line-height:1.7; color:var(--ink)}
.insight p + p{margin-top:10px}
.insight strong{color:var(--win-ink)}
.insight .caveat{
  margin:18px -26px -24px; padding:18px 26px 22px;
  background:var(--warn-soft); border-top:1px solid var(--warn-line);
  font-size:14.5px; line-height:1.65; color:var(--warn-ink);
}
.caveat-label{
  display:inline-block; font-size:10px; letter-spacing:.12em; font-weight:600; text-transform:uppercase;
  color:#fff; background:var(--warn); border-radius:3px;
  padding:3px 8px; margin-right:9px; vertical-align:1px;
}

.disclaimer{font-size:12.5px; line-height:1.6; color:#77839a; margin:22px 4px 0}

.retake{
  background:none; border:0; border-bottom:1px solid #aab6c6; padding:7px 0;
  color:var(--muted); font-size:14px;
}
.retake:hover{color:var(--ink); border-bottom-color:var(--ink)}

.webinar{
  background:var(--deep); color:#fff; padding:30px; border-radius:10px; margin:38px 0 30px;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.55fr); gap:32px; align-items:center;
}
.presenter{margin:0; text-align:center}
.presenter-photo{display:block; width:100%; height:auto; object-fit:contain}
.presenter figcaption{font-size:13px; line-height:1.7; color:#b5c4d6; margin-top:10px}
.presenter figcaption strong{
  display:block; font-family:'Archivo','Helvetica Neue',Arial,sans-serif; font-weight:700;
  font-size:21px; letter-spacing:-.02em; color:var(--brass-lite);
}
.webinar-copy{padding:4px 0}
.webinar .eyebrow{color:var(--brass-lite); margin-bottom:14px}
.webinar h2{font-size:clamp(26px,3.2vw,34px); margin-bottom:16px; color:#fff}
.webinar p.body{font-size:16px; line-height:1.65; color:#d7e1ee; margin-bottom:16px}
.webinar .primary{background:var(--brass-lite); color:#11263d; border-color:var(--brass-lite); box-shadow:none; margin-top:6px}
.webinar .primary:hover{background:#f2d29a}
.webinar .fine{font-size:12.5px; color:#a4b4c8; margin-top:12px}
.webinar .primary + .fine{margin-top:14px}

footer{max-width:740px; margin:36px auto 30px; padding:0 26px; text-align:center; color:#77839a; font-size:12px; line-height:1.6}

.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:20;
  background:var(--deep); color:#fff; border-top:1px solid var(--deep-line);
  padding:14px 22px; display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap;
  box-shadow:0 -6px 24px rgba(9,20,35,.22); animation:slideUp .25s ease-out;
}
.sticky-cta .sticky-cta-text{font-size:14px; color:#d7e1ee}
.sticky-cta .primary{min-height:44px; padding:11px 18px; font-size:14px; flex-shrink:0}
@keyframes slideUp{from{transform:translateY(100%)} to{transform:translateY(0)}}
@media (max-width:600px){
  .sticky-cta{padding:12px 16px; gap:10px}
  .sticky-cta .sticky-cta-text{display:none}
  .sticky-cta .primary{width:100%; justify-content:center}
}

@media (max-width:650px){
  header{padding:12px 20px}
  .brand-logo{width:150px}
  .intro{padding:44px 22px 6px}
  .preview-strip{gap:14px; font-size:12.5px}
  .compare{padding:30px 20px 6px}
  .picker{padding:16px}

  /* Stacked comparison cards: a 3-column table cannot show the UK column
     on a phone, and a horizontal scroll hides the very thing being compared. */
  .table-wrap{overflow:visible; border:0; background:transparent; border-radius:0; margin:20px 0 6px}
  .table-wrap table{min-width:0; width:100%; display:block}
  .table-wrap thead{display:none}
  .table-wrap tbody{display:block}
  /* A caption inside a display:block table shrink-wraps; force full width. */
  .table-wrap caption{display:block; width:100%; padding:0 2px 14px}
  .table-wrap tr{
    display:grid; grid-template-columns:1fr 1fr; gap:10px;
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    padding:15px; margin-bottom:12px;
  }
  .table-wrap tbody th{
    grid-column:1 / -1; display:block; width:auto; padding:0 0 2px;
    border:0; font-size:15px; font-weight:600; color:var(--ink);
  }
  .table-wrap tbody th .cell-note{font-weight:400; margin-top:4px}
  .table-wrap tbody td{
    display:block; padding:12px; border:1px solid var(--line); border-radius:7px;
    background:var(--paper);
  }
  .table-wrap tbody td:before{
    content:attr(data-label); display:block;
    font-size:10px; letter-spacing:.1em; text-transform:uppercase; font-weight:600;
    color:var(--muted); margin-bottom:7px; line-height:1.3;
  }
  .table-wrap tbody td.uk-col{background:var(--win); border-color:var(--win-line)}
  .table-wrap tbody td.uk-col:before{color:var(--win-ink)}
  /* Desktop clears the last row's bottom border; each card needs it back. */
  .table-wrap tbody tr:last-child td{border-bottom:1px solid var(--line)}
  .table-wrap tbody tr:last-child td.uk-col{border-bottom-color:var(--win-line)}
  .table-wrap .stat-figure{font-size:18px}
  .win-tag{font-size:9.5px; padding:2px 7px}

  .webinar{grid-template-columns:1fr; gap:18px; padding:24px 22px}
  .presenter{max-width:230px; margin:0 auto}
  .webinar .primary{width:100%; justify-content:center}
}

.script-warning{
  max-width:520px; margin:0 auto 26px; padding:16px 20px; text-align:left;
  background:var(--warn-soft); border:1px solid var(--warn-line); border-radius:8px;
  font-size:14.5px; line-height:1.6; color:var(--warn-ink);
}
[hidden]{display:none !important}