:root{
  --how-accent:#791323;
  --how-accent-soft:#f3e4e3;
  --how-paper:#fbf6f0;
  --how-surface:#fffdf9;
  --how-ink:#221710;
  --how-body:#51463f;
  --how-line:rgba(58,33,24,.19);
  --how-radius:18px;
}

html{scroll-behavior:smooth}
body.how-page{background:var(--how-paper);color:var(--how-body)}
.how-wrap{width:100%;max-width:none;margin:0;padding:0 0 56px}
.how-main{width:min(1180px,calc(100% - (2 * clamp(18px,3.4vw,48px))));margin:0 auto}

.how-hero{
  display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(480px,1.14fr);
  min-height:clamp(500px,66vh,650px);
  align-items:center;
  gap:clamp(32px,5vw,72px);
  padding:clamp(44px,7vw,86px) 0 clamp(54px,7vw,88px);
}
.how-hero-copy{max-width:520px}
.how-kicker,.stage-label{
  margin:0 0 16px;
  color:var(--how-accent);
  font:750 11px/1.2 var(--sans);
  letter-spacing:.14em;
  text-transform:uppercase;
}
.how-hero h1{max-width:11ch;margin:0;font:700 clamp(48px,6vw,76px)/.95 var(--sans);letter-spacing:-.055em;color:var(--how-ink)}
.how-hero-copy>p:not(.how-kicker){max-width:38ch;margin:22px 0 0;font:500 clamp(17px,1.8vw,21px)/1.5 var(--sans);color:var(--how-body)}
.how-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.how-button{
  display:inline-flex;
  min-height:48px;
  align-items:center;
  justify-content:center;
  padding:0 20px;
  border:1px solid transparent;
  border-radius:10px;
  font:700 14px/1 var(--sans);
  text-decoration:none;
  white-space:nowrap;
  transition:transform 160ms ease,background 160ms ease,border-color 160ms ease,color 160ms ease;
}
.how-button:active{transform:translateY(1px)}
.how-button.primary{background:var(--how-accent);color:#fffaf5}
.how-button.primary:hover{background:#5f0f1c;color:#fffaf5}
.how-button.secondary{border-color:rgba(121,19,35,.34);background:transparent;color:var(--how-accent)}
.how-button.secondary:hover{border-color:var(--how-accent);background:var(--how-accent-soft);color:#5f0f1c}
.how-hero-visual{overflow:hidden;margin:0;border-radius:var(--how-radius);background:#f1e9dd;box-shadow:0 24px 60px rgba(43,26,18,.12)}
.how-hero-visual img{display:block;width:100%;aspect-ratio:1.72/1;object-fit:cover}

.connection-rail{
  display:grid;
  grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr);
  gap:clamp(28px,5vw,70px);
  align-items:center;
  padding:clamp(28px,4vw,46px);
  border:1px solid var(--how-line);
  border-radius:var(--how-radius);
  background:#eee4d8;
}
.connection-rail h2,.journey-heading h2,.privacy-connection h2{margin:0;color:var(--how-ink);font:700 clamp(28px,3vw,42px)/1.02 var(--sans);letter-spacing:-.04em}
.connection-rail p,.journey-heading p,.privacy-connection p{max-width:55ch;margin:12px 0 0;font:500 15px/1.6 var(--sans);color:var(--how-body)}
.connection-rail ol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none;counter-reset:connection}
.connection-rail li{position:relative;display:flex;min-height:112px;align-items:flex-end;padding:16px;border-radius:14px;background:rgba(255,253,249,.72);counter-increment:connection}
.connection-rail li::before{content:counter(connection);position:absolute;top:14px;left:16px;color:var(--how-accent);font:800 12px/1 var(--sans)}
.connection-rail li:not(:last-child)::after{content:"";position:absolute;right:-8px;top:50%;width:8px;height:1px;background:var(--how-accent)}
.connection-rail li span{font:700 13px/1.3 var(--sans);color:var(--how-ink)}

.journey-explorer{padding:clamp(78px,9vw,120px) 0 40px;scroll-margin-top:96px}
.journey-heading{max-width:720px;margin-bottom:32px}
.journey-tabs{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  padding:8px;
  border:1px solid var(--how-line);
  border-radius:var(--how-radius);
  background:#eee4d8;
}
.journey-tabs button{
  display:grid;
  min-height:90px;
  padding:15px 16px;
  border:1px solid transparent;
  border-radius:14px;
  background:transparent;
  color:var(--how-body);
  text-align:left;
  cursor:pointer;
}
.journey-tabs button span{color:var(--how-accent);font:800 11px/1 var(--sans)}
.journey-tabs button strong{margin-top:8px;color:var(--how-ink);font:750 16px/1 var(--sans)}
.journey-tabs button small{margin-top:6px;font:550 12px/1.25 var(--sans);color:#70635a}
.journey-tabs button:hover{border-color:rgba(121,19,35,.28);background:rgba(255,253,249,.55)}
.journey-tabs button[aria-selected="true"]{background:var(--how-accent);box-shadow:0 8px 22px rgba(121,19,35,.14)}
.journey-tabs button[aria-selected="true"] span,.journey-tabs button[aria-selected="true"] strong,.journey-tabs button[aria-selected="true"] small{color:#fffaf5}

.journey-panel{padding:clamp(30px,4vw,52px) 0 0}
.journey-panel[hidden]{display:none}
.stage-intro{display:grid;grid-template-columns:minmax(0,.82fr) minmax(430px,1.18fr);gap:clamp(26px,4vw,54px);align-items:center}
.stage-copy{padding:clamp(8px,2vw,24px)}
.stage-copy h3{max-width:14ch;margin:0;color:var(--how-ink);font:720 clamp(34px,4.4vw,58px)/1 var(--sans);letter-spacing:-.05em}
.stage-copy>p:not(.stage-label){max-width:48ch;margin:18px 0 0;font:500 16px/1.65 var(--sans);color:var(--how-body)}
.stage-intro>img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--how-radius);background:#eee4d8}
.stage-handoff{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:26px 0 0}
.stage-handoff div{padding:14px;border-left:2px solid var(--how-accent);background:var(--how-surface)}
.stage-handoff dt{color:var(--how-accent);font:800 10px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase}
.stage-handoff dd{margin:7px 0 0;color:var(--how-ink);font:650 12px/1.45 var(--sans)}

.feature-map{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px;margin-top:18px}
.feature-map article{grid-column:span 4;min-height:190px;padding:22px;border:1px solid var(--how-line);border-radius:var(--how-radius);background:var(--how-surface)}
.feature-map article.feature-primary{grid-column:span 7;background:#eee4d8}
.feature-map article.feature-primary+article{grid-column:span 5}
.feature-map article.feature-tinted{grid-column:span 4;background:var(--how-accent-soft)}
.feature-map-six article{grid-column:span 4}
.feature-map h4{margin:0;color:var(--how-ink);font:760 18px/1.15 var(--sans);letter-spacing:-.02em}
.feature-map p{margin:12px 0 20px;font:500 14px/1.58 var(--sans);color:var(--how-body)}
.feature-map a{display:inline-flex;margin-top:auto;color:var(--how-accent);font:750 13px/1.2 var(--sans);text-decoration-thickness:1px}

.privacy-connection{display:flex;align-items:center;justify-content:space-between;gap:28px;margin-top:clamp(70px,8vw,112px);padding:clamp(28px,4vw,48px);border:1px solid var(--how-line);border-radius:var(--how-radius);background:var(--how-surface)}
.privacy-connection h2{font-size:clamp(27px,3vw,40px)}

.how-page .site-foot{width:min(1180px,calc(100% - (2 * clamp(18px,3.4vw,48px))));margin:72px auto 0}

@media (max-width:900px){
  .how-hero{grid-template-columns:1fr;min-height:0;padding-top:44px}
  .how-hero-copy{max-width:700px}
  .how-hero h1{max-width:13ch}
  .connection-rail{grid-template-columns:1fr}
  .stage-intro{grid-template-columns:1fr}
  .stage-intro>img{grid-row:1}
  .feature-map article,.feature-map article.feature-primary,.feature-map article.feature-primary+article,.feature-map article.feature-tinted,.feature-map-six article{grid-column:span 6}
}

@media (max-width:680px){
  html{scroll-behavior:auto}
  .how-main{width:min(100% - 32px,1180px)}
  .how-hero{gap:28px;padding:32px 0 54px}
  .how-hero h1{font-size:clamp(42px,13vw,58px)}
  .how-hero-visual img{aspect-ratio:1.25/1}
  .connection-rail{padding:22px}
  .connection-rail ol{grid-template-columns:1fr 1fr}
  .connection-rail li:not(:last-child)::after{display:none}
  .journey-explorer{padding-top:68px}
  .journey-tabs{grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}
  .stage-copy{padding:6px 0 0}
  .stage-copy h3{font-size:clamp(35px,11vw,48px)}
  .stage-handoff{grid-template-columns:1fr}
  .feature-map{grid-template-columns:1fr}
  .feature-map article,.feature-map article.feature-primary,.feature-map article.feature-primary+article,.feature-map article.feature-tinted,.feature-map-six article{grid-column:1;min-height:0}
  .privacy-connection{align-items:flex-start;flex-direction:column}
  .how-page .site-foot{width:calc(100% - 32px)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .how-button{transition:none}
}