/* ==========================================================================
   HPT Index — website design system
   Built on the same palette + typography as the delivered report PDFs, so the
   marketing site and the product feel like one continuous thing.
   ========================================================================== */

/* ---------- fonts (self-hosted, no third-party requests) ---------- */
@font-face{font-family:'Jost';font-weight:400;font-style:normal;font-display:swap;
  src:url('/static/fonts/jost-400.woff2') format('woff2');}
@font-face{font-family:'Jost';font-weight:500;font-style:normal;font-display:swap;
  src:url('/static/fonts/jost-500.woff2') format('woff2');}
@font-face{font-family:'Jost';font-weight:700;font-style:normal;font-display:swap;
  src:url('/static/fonts/jost-700.woff2') format('woff2');}

:root{
  /* the four quarters — identical to the report palette */
  --culture:#5E71A0;
  --org:#E46128;
  --personal:#3E9B8A;
  --growth:#C9A52E;

  --ink:#15181A;
  --ink-2:#2C3134;
  --muted:#7C817F;
  --paper:#FAF9F6;
  --paper-2:#F3F1EB;
  --line:#E7E4DC;
  --white:#fff;

  --display:'Century Gothic','Jost','Helvetica Neue',sans-serif;
  --body:'Helvetica Neue','HelveticaNeue',Helvetica,Arial,sans-serif;

  --container:1140px;
  --prose:680px;
  --radius:18px;
  --radius-lg:28px;
  --shadow:0 30px 70px -46px rgba(20,22,24,.45);
  --shadow-sm:0 16px 34px -26px rgba(20,22,24,.4);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-weight:300; font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{max-width:100%;}
a{color:inherit; text-decoration:none;}

/* ---------- ambient background glow (matches the modern report) ---------- */
.bg-glow{position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(52% 40% at 8% 2%,   rgba(94,113,160,.20), transparent 70%),
    radial-gradient(46% 38% at 96% 6%,  rgba(228,97,40,.15),  transparent 70%),
    radial-gradient(50% 44% at 88% 92%, rgba(201,165,46,.16), transparent 72%),
    radial-gradient(48% 40% at 4% 96%,  rgba(62,155,138,.13), transparent 72%);}

/* ---------- layout ---------- */
.container{max-width:var(--container); margin:0 auto; padding:0 28px;}
.prose{max-width:var(--prose);}
section{padding:112px 0;}
section.tight{padding:76px 0;}
.center{text-align:center;}
.mx-auto{margin-left:auto;margin-right:auto;}

/* ---------- typography ---------- */
h1,h2,h3,h4,.display{font-family:var(--display); font-weight:700; letter-spacing:-.3px;
  line-height:1.06; margin:0;}
h1,.h1{font-size:clamp(38px,5.4vw,64px);}
h2,.h2{font-size:clamp(30px,3.6vw,42px); line-height:1.1;}
h3,.h3{font-size:22px; line-height:1.25;}
p{margin:0 0 1.1em;}
.lead{font-size:clamp(17px,1.5vw,21px); line-height:1.6; color:var(--ink-2); font-weight:300;}
.kicker{font-family:'Jost',var(--body); font-weight:600; font-size:12px; letter-spacing:3.2px;
  text-transform:uppercase; color:var(--muted); margin-bottom:14px; display:block;}
.small{font-size:14px; color:var(--muted); line-height:1.55;}
.rule{height:3px; width:56px; border:0; border-radius:3px; background:var(--ink); margin:22px 0;}
.rule.accent{background:var(--org);}
em.accent{font-style:normal; color:var(--org);}
strong{font-weight:600;}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.55em; white-space:nowrap;
  font-family:var(--body); font-size:15.5px; font-weight:500; line-height:1;
  padding:15px 28px; border-radius:999px; border:1px solid transparent; cursor:pointer;
  background:var(--ink); color:#fff; transition:transform .18s ease, box-shadow .18s ease, opacity .18s;
  box-shadow:0 12px 28px -16px rgba(20,22,24,.6);}
.btn:hover{transform:translateY(-2px); box-shadow:0 18px 34px -16px rgba(20,22,24,.55);}
.btn.accent{background:var(--org); box-shadow:0 12px 28px -14px rgba(228,97,40,.75);}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--line); box-shadow:none;}
.btn.ghost:hover{border-color:var(--ink); background:rgba(255,255,255,.6);}
.btn.lg{font-size:16.5px; padding:17px 34px;}
.btn.sm{font-size:14px; padding:11px 20px;}
.btn:disabled{opacity:.45; cursor:not-allowed; transform:none;}
.btn-row{display:flex; gap:14px; flex-wrap:wrap; align-items:center;}

/* ---------- nav ---------- */
.nav{position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(14px);
  background:rgba(250,249,246,.82); border-bottom:1px solid transparent; transition:border-color .3s, box-shadow .3s;}
.nav.scrolled{border-bottom-color:var(--line); box-shadow:0 10px 30px -26px rgba(0,0,0,.5);}
.nav-inner{display:flex; align-items:center; gap:26px; height:74px;}
.nav .brand{display:flex; align-items:center; gap:9px; font-family:var(--display);
  font-weight:700; font-size:19px; letter-spacing:-.2px;}
.nav .brand svg{width:52px; height:auto; display:block;}
.nav .links{display:flex; gap:30px; margin-left:auto; align-items:center;}
.nav .links a{font-size:15px; color:var(--ink-2); position:relative; padding:4px 0; white-space:nowrap;}
.nav .links a.btn{flex:none; padding:11px 20px; color:#fff;}   /* beats `.nav .links a` */
.nav .links a.btn:after{display:none;}
.nav .brand{flex:none;}
.nav .links a:after{content:""; position:absolute; left:0; right:100%; bottom:0; height:1.5px;
  background:var(--org); transition:right .28s ease;}
.nav .links a:hover:after{right:0;}
.nav .cta{margin-left:8px;}
.nav-toggle{display:none; margin-left:auto; background:none; border:0; cursor:pointer; padding:8px;}
.nav-toggle span{display:block; width:22px; height:2px; background:var(--ink); margin:5px 0; border-radius:2px;
  transition:.25s;}

/* ---------- hero ---------- */
.hero{position:relative; padding:88px 0 96px; overflow:hidden;}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center;}
.hero h1{margin-bottom:20px;}
.hero .lead{margin-bottom:30px; max-width:44ch;}
.hero-badges{display:flex; gap:22px; flex-wrap:wrap; margin-top:34px; align-items:center;}
.hero-badges .b{display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--muted);}
.hero-badges .dot{width:9px;height:9px;border-radius:50%;}
.hero-visual{position:relative; display:flex; align-items:center; justify-content:center;}
.hero-rings{position:absolute; inset:-18%; opacity:.75;}
.hero-rings circle{fill:none; stroke-width:8;}
.hero-card{position:relative; background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.9);
  border-radius:var(--radius-lg); padding:30px 30px 26px; box-shadow:var(--shadow); backdrop-filter:blur(12px);
  width:100%; max-width:420px;}
.hero-card .score{display:flex; align-items:baseline; gap:8px; justify-content:center;}
.hero-card .score .n{font-family:var(--display); font-weight:700; font-size:72px; line-height:1;}
.hero-card .score .d{font-size:19px; color:var(--muted);}
.hero-card .band{display:block; text-align:center; font-family:'Jost',var(--body); font-weight:600;
  letter-spacing:2.4px; font-size:11.5px; text-transform:uppercase; color:#fff; background:var(--ink);
  padding:7px 16px; border-radius:999px; width:max-content; margin:12px auto 22px;}
.qbars{display:flex; flex-direction:column; gap:13px;}
.qbar .top{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:5px;}
.qbar .nm{font-family:'Jost',var(--body); font-weight:600; font-size:11.5px; letter-spacing:1.2px;
  text-transform:uppercase; color:var(--ink-2);}
.qbar .vl{font-family:var(--display); font-weight:700; font-size:16px;}
.qbar .track{height:9px; border-radius:999px; background:rgba(20,22,24,.07); overflow:hidden;}
.qbar .fill{height:100%; border-radius:999px; width:0; transition:width 1.1s cubic-bezier(.22,.9,.3,1);}

/* ---------- generic cards ---------- */
.grid{display:grid; gap:22px;}
.grid.g2{grid-template-columns:repeat(2,1fr);}
.grid.g3{grid-template-columns:repeat(3,1fr);}
.grid.g4{grid-template-columns:repeat(4,1fr);}
.card{background:rgba(255,255,255,.74); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px; box-shadow:var(--shadow-sm); backdrop-filter:blur(8px); transition:transform .25s, box-shadow .25s;}
.card.hoverable:hover{transform:translateY(-4px); box-shadow:0 28px 52px -32px rgba(20,22,24,.5);}
.card .card-k{font-family:'Jost',var(--body); font-weight:600; font-size:11.5px; letter-spacing:2px;
  text-transform:uppercase; margin-bottom:10px;}
.card h3{margin-bottom:8px;}
.card p{font-size:15.5px; line-height:1.58; color:var(--ink-2); margin:0;}

/* quarter cards get a coloured top edge + reveal-on-hover detail */
.qcard{position:relative; overflow:hidden; border-top:4px solid var(--c);}
.qcard .hemi{position:absolute; top:18px; right:20px; font-family:'Jost',var(--body); font-weight:700;
  font-size:11px; letter-spacing:2px; color:var(--c); opacity:.9;}
.qcard .reveal{max-height:0; opacity:0; overflow:hidden;
  transition:max-height .45s ease, opacity .35s ease, margin-top .35s ease;}
.qcard:hover .reveal, .qcard:focus-within .reveal{max-height:220px; opacity:1; margin-top:14px;}
.qcard .reveal ul{margin:0; padding-left:18px;}
.qcard .reveal li{font-size:14px; color:var(--muted); line-height:1.5; margin-bottom:5px;}
.qcard .more{font-size:13px; color:var(--c); font-weight:500; margin-top:12px; display:inline-block;}
.qcard:hover .more{opacity:0; transition:opacity .2s;}

/* ---------- steps ---------- */
.steps{counter-reset:s; display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.step{position:relative; padding-top:16px;}
.step .n{font-family:var(--display); font-weight:700; font-size:58px; line-height:1;
  color:transparent; -webkit-text-stroke:1.4px var(--line); display:block; margin-bottom:10px;}
.step h3{margin-bottom:8px;}
.step p{font-size:15.5px; color:var(--ink-2); margin:0;}

/* ---------- report preview strip ---------- */
/* Report previews: two per row so an A4 page is ~550px wide and actually
   legible; click to open full size. */
.shots{display:grid; grid-template-columns:repeat(2,1fr); gap:28px; align-items:start;}
.shots.trio{grid-template-columns:repeat(3,1fr); gap:22px;}
.shot{border-radius:14px; overflow:hidden; border:1px solid var(--line); background:#fff;
  box-shadow:var(--shadow-sm); transition:transform .3s ease, box-shadow .3s ease; cursor:zoom-in;
  position:relative;}
.shot:hover{transform:translateY(-6px); box-shadow:0 34px 60px -34px rgba(20,22,24,.55);}
.shot img{display:block; width:100%; height:auto;}
.shot .cap{font-size:13.5px; color:var(--ink-2); padding:12px 16px; border-top:1px solid var(--line);
  background:#fff; display:flex; justify-content:space-between; align-items:center; gap:10px;}
.shot .cap b{font-weight:600;}
.shot .cap span{font-size:11.5px; color:var(--muted); white-space:nowrap;}
.shot .zoom{position:absolute; top:12px; right:12px; background:rgba(21,24,26,.72); color:#fff;
  font-size:11px; padding:5px 10px; border-radius:999px; opacity:0; transition:opacity .25s;
  backdrop-filter:blur(6px);}
.shot:hover .zoom{opacity:1;}

/* lightbox */
.lb{position:fixed; inset:0; background:rgba(18,20,22,.92); z-index:200; display:none;
  align-items:center; justify-content:center; padding:24px; backdrop-filter:blur(4px);}
.lb.open{display:flex;}
.lb img{max-width:min(94vw,900px); max-height:92vh; border-radius:10px; box-shadow:0 40px 90px rgba(0,0,0,.6);}
.lb .x{position:absolute; top:18px; right:24px; color:#fff; font-size:30px; cursor:pointer;
  line-height:1; opacity:.85;}
.lb .x:hover{opacity:1;}
.lb .lbcap{position:absolute; bottom:20px; left:0; right:0; text-align:center; color:rgba(255,255,255,.85);
  font-size:14px;}

/* ---------- science / logos strip ---------- */
.frameworks{display:flex; flex-wrap:wrap; gap:12px;}
.fw{background:rgba(255,255,255,.7); border:1px solid var(--line); border-radius:999px;
  padding:9px 18px; font-size:14px; color:var(--ink-2);}

/* ---------- pricing ---------- */
.price-card{background:rgba(255,255,255,.82); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:40px; box-shadow:var(--shadow); position:relative; overflow:hidden;}
.price-card .tag{position:absolute; top:22px; right:-42px; transform:rotate(45deg); background:var(--org);
  color:#fff; font-size:11px; font-weight:600; letter-spacing:1.6px; padding:7px 52px; text-transform:uppercase;}
.price{display:flex; align-items:baseline; gap:8px; margin:6px 0 4px;}
.price .amt{font-family:var(--display); font-weight:700; font-size:60px; line-height:1;}
.price .per{font-size:15px; color:var(--muted);}
.feats{list-style:none; padding:0; margin:22px 0 28px;}
.feats li{position:relative; padding-left:30px; margin-bottom:12px; font-size:15.5px; color:var(--ink-2);}
.feats li:before{content:""; position:absolute; left:0; top:7px; width:17px; height:17px; border-radius:50%;
  background:var(--personal); opacity:.16;}
.feats li:after{content:""; position:absolute; left:5.5px; top:11px; width:6px; height:10px;
  border:solid var(--personal); border-width:0 2px 2px 0; transform:rotate(45deg);}

/* ---------- FAQ accordion ---------- */
.faq{border-top:1px solid var(--line);}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{cursor:pointer; list-style:none; padding:22px 40px 22px 0; position:relative;
  font-family:var(--display); font-weight:700; font-size:18px; transition:color .2s;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:hover{color:var(--org);}
.faq summary:after{content:""; position:absolute; right:6px; top:29px; width:10px; height:10px;
  border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg);
  transition:transform .28s ease;}
.faq details[open] summary:after{transform:rotate(-135deg);}
.faq .a{padding:0 40px 24px 0; font-size:16px; color:var(--ink-2); line-height:1.62;}

/* ---------- CTA band ---------- */
.cta-band{background:var(--ink); color:#fff; border-radius:var(--radius-lg); padding:64px 56px;
  position:relative; overflow:hidden;}
.cta-band h2{color:#fff;}
.cta-band p{color:rgba(255,255,255,.72); font-size:17.5px;}
.cta-band .btn.ghost{color:#fff; border-color:rgba(255,255,255,.3);}
.cta-band .btn.ghost:hover{background:rgba(255,255,255,.1); border-color:#fff;}
.cta-band .glow{position:absolute; width:520px; height:520px; border-radius:50%; filter:blur(90px);
  opacity:.30; pointer-events:none;}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line); padding:56px 0 40px; margin-top:40px;}
.foot{display:flex; gap:40px; flex-wrap:wrap; justify-content:space-between;}
.foot .col h4{font-family:'Jost',var(--body); font-weight:600; font-size:11.5px; letter-spacing:2px;
  text-transform:uppercase; color:var(--muted); margin-bottom:12px;}
.foot .col a, .foot .col p{display:block; font-size:14.5px; color:var(--ink-2); margin-bottom:8px;}
.foot .col a:hover{color:var(--org);}
.foot-bottom{margin-top:36px; padding-top:22px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13px; color:var(--muted);}

/* ---------- forms ---------- */
label.fl{display:block; font-family:'Jost',var(--body); font-weight:600; font-size:11.5px;
  letter-spacing:1.6px; text-transform:uppercase; color:var(--muted); margin:0 0 7px;}
input:not([type]),input[type=text],input[type=email],input[type=number],
input[type=tel],input[type=url],input[type=search],input[type=password],
input[type=date],textarea,select{
  width:100%; padding:13px 15px; border:1px solid var(--line); border-radius:12px; background:#fff;
  font-family:var(--body); font-size:15.5px; color:var(--ink); transition:border-color .2s, box-shadow .2s;}
input:focus,textarea:focus,select:focus{outline:none; border-color:var(--org);
  box-shadow:0 0 0 4px rgba(228,97,40,.12);}
textarea{resize:vertical; line-height:1.6;}
.field{margin-bottom:18px;}
/* Two-column field pairs, collapsing to one column on narrow screens. */
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:0 18px;}
@media (max-width:640px){ .grid2{grid-template-columns:1fr; gap:0;} }
.hint{font-size:13px; color:var(--muted); margin-top:6px;}
.alert{padding:14px 18px; border-radius:12px; font-size:15px; margin-bottom:20px;}
.alert.err{background:#FDECE8; color:#B3331A; border:1px solid #F3C4B8;}
.alert.ok{background:#E9F6EF; color:#1C6B3F; border:1px solid #BCDFCB;}
.alert.warn{background:#FDF4E3; color:#8A5A00; border:1px solid #F0D9A8;}

/* ---------- reveal on scroll ---------- */
.reveal-up{opacity:0; transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.22,.9,.3,1), transform .7s cubic-bezier(.22,.9,.3,1);}
.reveal-up.in{opacity:1; transform:none;}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr; gap:44px;}
  .grid.g4{grid-template-columns:repeat(2,1fr);}
  .shots, .shots.trio{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr; gap:32px;}
  section{padding:84px 0;}
}
/* The full nav needs about 854px. Below that the "Start an assessment"
   button was clipped off the right edge — on iPad portrait the primary call
   to action was simply not there — so it collapses to the menu at 900px. */
@media (max-width:900px){
  .nav .links{display:none; position:absolute; top:74px; left:0; right:0; background:var(--paper);
    flex-direction:column; gap:0; padding:12px 28px 22px; border-bottom:1px solid var(--line);
    box-shadow:0 18px 40px rgba(20,22,24,.10);}
  .nav.open .links{display:flex;}
  .nav .links a{padding:12px 0; width:100%;}
  .nav .links a.btn{width:100%; text-align:center; margin-top:8px;}
  .nav-toggle{display:block;}
  .nav.open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav.open .nav-toggle span:nth-child(2){opacity:0;}
  .nav.open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
}
@media (max-width:720px){
  body{font-size:16px;}
  .grid.g2,.grid.g3,.grid.g4{grid-template-columns:1fr;}
  .cta-band{padding:44px 26px;}
  .price-card{padding:28px;}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important;}
  .reveal-up{opacity:1; transform:none;}
}

/* ---------- print ---------- */
@media print{ .nav,footer,.cta-band{display:none;} body{background:#fff;} }

/* ---------- plan chooser on /start ---------- */
.plans{display:grid; gap:10px;}
.planopt{position:relative; display:block; cursor:pointer;}
.planopt input{position:absolute; opacity:0; inset:0; cursor:pointer;}
.po-body{display:block; border:1.5px solid var(--line); border-radius:12px; padding:13px 16px;
  background:#fff; transition:border-color .18s, background .18s, box-shadow .18s;}
.planopt:hover .po-body{border-color:#cfcdc6;}
.planopt input:checked + .po-body{border-color:var(--org); background:#FFF8F4;
  box-shadow:0 0 0 3px rgba(228,97,40,.10);}
.po-top{display:flex; justify-content:space-between; align-items:baseline; gap:12px;}
.po-top b{font-size:15.5px; font-weight:600;}
.po-top em{font-style:normal; font-family:'Jost',sans-serif; font-weight:700; font-size:15px;}
.po-sub{display:block; font-size:12.5px; color:var(--muted); margin-top:2px;}