/* How it works (howitworks.php). Builds on style.css (nav, footer, buttons, colour variables).
   Mobile first; motion uses transform and opacity only; everything is visible without JavaScript. */
.hiw{
  --hiw-gold:#c8a84e; --hiw-gold-text:#7a5f17; --hiw-gold-ink:#241F17; --hiw-green:#4a7c3f; --hiw-grey:#e0d8c8;
  --hiw-paper:#f5f0e8; --hiw-body:#6b5d4d; --hiw-brown:#8a7356;
}
[data-mode="dark"] .hiw{--hiw-gold:#d9bc62; --hiw-gold-text:#d9bc62; --hiw-green:#8FCB7A; --hiw-grey:#3A6486; --hiw-paper:#0A1B2C; --hiw-body:#9FBAD0; --hiw-brown:#9FBAD0;}
@media (prefers-color-scheme: dark){
  :root:not([data-mode]) .hiw{--hiw-gold:#d9bc62; --hiw-gold-text:#d9bc62; --hiw-green:#8FCB7A; --hiw-grey:#3A6486; --hiw-paper:#0A1B2C; --hiw-body:#9FBAD0; --hiw-brown:#9FBAD0;}
}
.hiw{overflow-x:clip;}
.hiw h1, .hiw h2, .hiw h3{font-weight:500;}
.hiw p, .hiw li{color:var(--hiw-body); font-size:14px; line-height:1.65;}
.hiw strong{color:var(--text); font-weight:600;}
.hiw-ic{width:24px; height:24px; flex:none;}

/* Step number: 32px gold circle, white number */
.hiw-num{display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%;
  background:var(--hiw-gold); color:#fff; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:15px; flex:none;}

/* The three lines, joined by arrows */
.hiw-lines{display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; margin:14px 0 0;}
.hiw .hiw-lines span{color:var(--hiw-gold-text); font-size:15px; font-weight:500;} /* #c8a84e is too light for text on the cream page */
.hiw .hiw-lines .hiw-arrow{color:var(--hiw-brown); font-weight:400;}
@media (max-width:560px){
  .hiw-lines{flex-direction:column; align-items:flex-start; gap:2px;}
  .hiw-lines .hiw-arrow{transform:rotate(90deg); line-height:1; margin-left:4px;}
}

/* Hero */
.hiw-hero{padding:12px 0 34px; border-bottom:1px solid var(--border);}
.hiw-hero h1{font-size:clamp(30px,5.4vw,44px); line-height:1.1; letter-spacing:-.03em;}
.hiw .hiw-lead{margin:10px 0 0; font-size:15px; color:var(--text-secondary);}
.hiw-stepbar{display:flex; list-style:none; margin:26px 0 0; padding:0; max-width:560px;}
.hiw-stepbar li{flex:1; position:relative; text-align:center;}
.hiw-stepbar li + li::before{content:''; position:absolute; top:16px; right:calc(50% + 22px); left:calc(-50% + 22px); height:2px; background:var(--hiw-grey);}
.hiw-stepbar a{display:inline-flex; flex-direction:column; align-items:center; gap:6px; text-decoration:none; min-height:44px;}
.hiw-stepbar-label{font-size:13px; font-weight:500; color:var(--text);}
.hiw-stepbar a:hover .hiw-num{transform:scale(1.08);}
.hiw-stepbar .hiw-num{transition:transform 150ms ease;}

/* Steps and blocks: separated by a subtle border */
.hiw-step, .hiw-block{padding:40px 0; border-bottom:1px solid var(--border); scroll-margin-top:calc(var(--nav-h) + 10px);}
.hiw-step h2, .hiw-block h2{font-size:clamp(23px,3.4vw,30px); line-height:1.2; letter-spacing:-.02em; margin:12px 0 4px;}
.hiw-block h2{margin-top:0;}
.hiw .hiw-sub{margin:0 0 16px; font-size:15px; color:var(--text-secondary);}
.hiw-text > p{margin:0 0 12px;}
.hiw-list{margin:0 0 12px; padding-left:20px;}
.hiw-list li{margin:3px 0;}
.hiw-list li::marker{color:var(--hiw-gold);}

/* Two columns on desktop (steps 1 and 3); stacked with the picture on top on phones */
.hiw-two{display:grid; grid-template-columns:minmax(0,1fr); gap:22px; align-items:center;}
.hiw-two .hiw-art{order:-1;}
@media (min-width:768px){
  .hiw-two{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:44px;}
  .hiw-two .hiw-art{order:0;}
}
.hiw-art{background:var(--hiw-paper); border:1px solid var(--border); border-radius:var(--r-lg); padding:16px;}
.hiw-art svg{display:block; width:100%; height:auto; max-width:420px; margin:0 auto;}
.a-paper{fill:var(--hiw-paper);}
.a-card rect:first-child{fill:var(--surface); stroke:var(--hiw-brown); stroke-width:1.5;}
.a-picked rect:first-child{stroke:var(--hiw-gold); stroke-width:3;}
.a-line{fill:none; stroke:var(--hiw-brown); stroke-width:1.6; stroke-linejoin:round;}
.a-picked .a-line{stroke:var(--text);}
.a-bar{fill:var(--hiw-grey);}
.a-check-bg{fill:var(--hiw-gold);}
.a-check{fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; stroke-linejoin:round;}
.a-ground{stroke:var(--hiw-grey); stroke-width:2; stroke-dasharray:4 6;}

/* Buttons */
.hiw .btn{min-height:44px; display:inline-flex; align-items:center; justify-content:center; text-align:center;}
.hiw .hiw-btn-gold{background:var(--hiw-gold); border-color:var(--hiw-gold); color:var(--hiw-gold-ink);}
.hiw .hiw-btn-gold:hover{box-shadow:0 8px 20px rgba(200,168,78,.35); border-color:var(--hiw-gold);}
.hiw .hiw-btn-line{background:transparent; border:1.5px solid var(--hiw-gold); color:var(--text);}
.hiw .hiw-btn-line:hover{background:var(--hiw-paper); border-color:var(--hiw-gold);}
.hiw-text .btn{margin-top:6px;}
@media (max-width:767px){ .hiw .btn{width:100%;} }

/* Step 2: three stacked option cards */
.hiw-options{list-style:none; margin:0; padding:0; display:grid; gap:12px;}
.hiw-options li{display:flex; gap:14px; align-items:flex-start; padding:16px 18px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface);
  transition:transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;}
.hiw-options li:hover{transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--hiw-gold);}
.hiw-opt-ic{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:12px; background:var(--hiw-paper); color:var(--hiw-gold); flex:none;}
.hiw-options h3{font-size:17px; margin:2px 0 2px;}
.hiw-options p{margin:0;}
.hiw .hiw-reassure{display:inline-flex; align-items:center; gap:8px; margin:16px 0 0; padding:9px 14px; border-radius:999px;
  background:color-mix(in srgb, var(--hiw-green) 13%, transparent); color:var(--hiw-green); font-weight:500; font-size:14px; line-height:1.4;}
.hiw-reassure .hiw-ic{width:20px; height:20px;}

/* Step 3: the timeline */
.hiw-timeline{list-style:none; margin:0; padding:4px 4px 4px 2px;}
.hiw-timeline li{position:relative; padding:0 0 18px 30px; color:var(--text); font-size:14px; font-weight:500; line-height:1.4;}
.hiw-timeline li:last-child{padding-bottom:0;}
.hiw-timeline li:not(:last-child)::before{content:''; position:absolute; left:7px; top:16px; bottom:-2px; width:2px; background:var(--hiw-grey);}
.hiw-timeline li.done:not(:last-child)::before{background:var(--hiw-green);}
.hiw-timeline .dot{position:absolute; left:0; top:2px; width:16px; height:16px; border-radius:50%; background:var(--hiw-grey); box-sizing:border-box;}
.hiw-timeline .done .dot{background:var(--hiw-green);}
.hiw-timeline .now .dot{background:var(--hiw-gold); box-shadow:0 0 0 4px color-mix(in srgb, var(--hiw-gold) 25%, transparent);}
.hiw-timeline .next .dot{background:var(--surface); border:2px solid var(--hiw-grey);}
.hiw-timeline .next{color:var(--text-secondary); font-weight:400;}

/* What you get: 2 columns on phones, 3 on desktop */
.hiw-get{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;}
@media (min-width:768px){ .hiw-get{grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px;} }
.hiw-get li{padding:16px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); transition:transform 200ms ease, box-shadow 200ms ease;}
.hiw-get li:hover{transform:translateY(-2px); box-shadow:var(--shadow-md);}
.hiw-get .hiw-ic{color:var(--hiw-gold); width:28px; height:28px;}
.hiw-get h3{font-size:16px; margin:8px 0 2px;}
.hiw-get p{margin:0; font-size:13px;}

/* Pricing */
.hiw-prices{margin:6px 0 0; padding:6px 20px; border-radius:var(--r-lg); background:var(--hiw-paper); border:1px solid var(--border);}
.hiw-prices > div{display:flex; justify-content:space-between; align-items:baseline; gap:6px 16px; flex-wrap:wrap; padding:14px 0;}
.hiw-prices > div + div{border-top:1px solid var(--border);}
.hiw-prices dt{font-weight:500; color:var(--text); font-size:15px;}
.hiw-prices dd{margin:0; color:var(--hiw-body); font-size:14px;}
.hiw-prices dd strong{font-family:'Space Grotesk',sans-serif; font-size:20px; font-weight:600; color:var(--text); font-variant-numeric:tabular-nums;}
.hiw .hiw-note{margin:14px 0 0; font-size:14px;}
.hiw-note a{color:var(--text); font-weight:600; white-space:nowrap;}

/* Questions: one open at a time (the script folds them; without it every answer shows) */
.hiw-faq{border-top:1px solid var(--border);}
.hiw-faq-item{border-bottom:1px solid var(--border);}
.hiw-faq-item h3{margin:0; font-size:inherit;}
.hiw-faq-q{display:flex; width:100%; align-items:center; justify-content:space-between; gap:12px; min-height:52px; padding:12px 2px; border:0; background:none;
  font:inherit; font-family:'Space Grotesk',sans-serif; font-size:16px; font-weight:500; color:var(--text); text-align:left; cursor:pointer;}
.hiw-faq-q:hover{color:var(--hiw-brown);}
.hiw-chev{width:20px; height:20px; color:var(--hiw-brown); transition:transform 250ms ease;}
.hiw-faq-a p{margin:0; padding:0 2px 16px;}
.hiw.js .hiw-faq-a{max-height:0; overflow:hidden; transition:max-height 300ms ease-out;}
.hiw.js .hiw-faq-item.open .hiw-faq-a{max-height:320px;}
.hiw.js .hiw-faq-item:not(.open) .hiw-chev{transform:none;}
.hiw .hiw-faq-item.open .hiw-chev, .hiw:not(.js) .hiw-chev{transform:rotate(180deg);}

/* Bottom call to action */
.hiw-cta{padding:44px 0 10px; text-align:center;}
.hiw-cta h2{font-size:clamp(28px,4.6vw,38px); letter-spacing:-.02em;}
.hiw-cta .hiw-lines{justify-content:center;}
@media (max-width:560px){ .hiw-cta .hiw-lines{align-items:center;} .hiw-cta .hiw-lines .hiw-arrow{margin-left:0;} }
.hiw-cta-btns{display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin:22px 0 0;}
@media (max-width:767px){ .hiw-cta-btns{flex-direction:column;} }

/* Fade in as sections scroll into view (only when the browser can tell us; see the script) */
@keyframes hiwUp{from{opacity:0; transform:translateY(20px);} to{opacity:1; transform:translateY(0);}}
.hiw.anim .hiw-reveal{opacity:0;}
.hiw.anim .hiw-reveal.in{animation:hiwUp 500ms ease-out both;}
.hiw.anim .hiw-reveal.in .hiw-stagger > li{animation:hiwUp 500ms ease-out backwards;}
.hiw-stagger > li:nth-child(1){animation-delay:80ms;}
.hiw-stagger > li:nth-child(2){animation-delay:160ms;}
.hiw-stagger > li:nth-child(3){animation-delay:240ms;}
.hiw-stagger > li:nth-child(4){animation-delay:320ms;}
.hiw-stagger > li:nth-child(5){animation-delay:400ms;}
.hiw-stagger > li:nth-child(6){animation-delay:480ms;}
@media (prefers-reduced-motion: reduce){
  .hiw.anim .hiw-reveal{opacity:1;}
  .hiw.anim .hiw-reveal.in, .hiw.anim .hiw-reveal.in .hiw-stagger > li{animation:none;}
  .hiw-chev, .hiw.js .hiw-faq-a{transition:none;}
}