/* How It Works (how-it-works.html): only what css/landing.css and css/home.css lack. Loads after both. */
/* the three-step time bar under the hero */
.hw-time{display:flex;gap:6px;max-width:860px;margin:40px auto 0;padding:6px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper);box-shadow:var(--shadow);text-align:start}
.hw-time a{flex:var(--w) 1 0;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:12px 14px;border-radius:16px;background:var(--white);color:var(--ink);text-decoration:none;transition:transform .2s}
.hw-time a:hover{transform:translateY(-2px)}
.hw-time a:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.hw-time a:nth-child(3){background:var(--nile);color:var(--on-nile)}
.hw-time b{grid-row:1/3;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--nile);color:var(--on-nile);font:800 14px/1 var(--display)}
.hw-time a:nth-child(3) b{background:var(--on-nile);color:var(--nile)}
.hw-time span{font:800 14px/1.2 var(--body)}
.hw-time small{color:var(--muted);font:700 12px/1.2 var(--body)}
.hw-time a:nth-child(3) small{color:var(--on-nile);opacity:.8}

/* set up once: three short steps in one card */
.hw-setup{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;counter-reset:s}
.hw-setup li{position:relative;padding:16px 16px 16px 52px;border-radius:16px;background:var(--field);counter-increment:s}
.hw-setup li::before{content:counter(s);position:absolute;inset-inline-start:16px;top:16px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--nile);color:var(--on-nile);font:800 12px/1 var(--body)}
.hw-setup li b{display:block;color:var(--ink);font:800 16px/1.3 var(--body)}
.hw-setup li span{display:block;margin-top:4px;color:var(--ink2);font-size:15px;line-height:1.5}

/* the month-end routine: copy beside the real screen, sides alternate */
.hw-step{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr);gap:56px;align-items:center;padding-top:72px}
.hw-step:nth-child(even){grid-template-columns:minmax(0,1.5fr) minmax(0,.9fr)}
.hw-step:nth-child(even) .hw-copy{order:2}
.hw-num{display:flex;align-items:center;gap:12px}
.hw-num b{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--nile);color:var(--on-nile);font:800 18px/1 var(--display)}
.hw-num span{color:var(--muted);font:800 13px/1.2 var(--body)}
.hw-copy h2{margin-top:16px;font-size:clamp(30px,4.2vw,48px);line-height:1.06;letter-spacing:-.035em}
.hw-copy>p{margin-top:14px;color:var(--ink2)}
.hw-do{margin-top:22px;padding:20px 22px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper);box-shadow:var(--shadow)}
.hw-do h3{color:var(--muted);font:800 13px/1.2 var(--body);letter-spacing:.01em}
.hw-do ol{display:grid;gap:10px;margin-top:12px;counter-reset:d}
.hw-do li{display:grid;grid-template-columns:24px 1fr;gap:10px;color:var(--ink);font-size:15px;font-weight:600;line-height:1.45;counter-increment:d}
.hw-do li::before{content:counter(d);display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--t-green);color:var(--green-text);font:800 12px/1 var(--body)}
.hw-tip{margin-top:14px;padding:14px 18px;border-radius:16px;background:var(--t-green);color:var(--ink2);font-size:15px;line-height:1.5}
.hw-tip-label{display:block;margin-bottom:3px;color:var(--green-text);font:800 13px/1.3 var(--body)}
.hw-media{position:relative;min-width:0}
.hw-media .d-frame+.d-frame{position:absolute;inset-inline-end:-18px;bottom:-40px;width:58%}
.hw-media.has-pair{padding-bottom:40px}
.hw-cap{margin-top:12px;color:var(--ink2);font-size:14px;font-weight:600;line-height:1.4}
.hw-media.has-pair .hw-cap{margin-top:54px;max-width:38%}

/* step 3: five questions, one tab each */
.hw-analysis .d-head .hw-num{justify-content:center;margin-bottom:16px}
.hw-analysis .d-head h2{margin-top:0}
.hw-bento{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.hw-q{display:flex;flex-direction:column;gap:18px;padding:24px}
.hw-q.wide{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.6fr);align-items:center;gap:32px}
.hw-q h3{margin-top:12px;font-size:21px;line-height:1.2;letter-spacing:-.02em}
.hw-q.wide h3{font-size:clamp(24px,3vw,28px)}
.hw-q p{margin-top:8px;color:var(--ink2);font-size:16px;line-height:1.5}
.hw-min{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:99px;background:var(--t-green);color:var(--green-text);font:800 13px/1 var(--body)}
.hw-min::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green)}
.hw-decide{display:flex;align-items:center;gap:20px;max-width:820px;margin:24px auto 0}
.hw-decide .tile{flex:none}
.hw-decide h3{font-size:21px;line-height:1.2;letter-spacing:-.02em}
.hw-decide p{margin-top:4px;color:var(--ink2);font-size:16px}
.d-trust .tile,.hw-decide .tile{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--nile);color:var(--on-nile)}
.d-trust.hw-trust{grid-template-columns:repeat(3,minmax(0,1fr))}
.d-trust.hw-trust a{color:var(--ink);font-weight:700}

/* one question, one guide */
.hw-guides{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.hw-guide{display:flex;flex-direction:column;gap:8px;color:inherit;text-decoration:none;transition:border-color .2s,transform .2s}
.hw-guide:hover{border-color:var(--line-ctl);transform:translateY(-2px)}
.hw-guide:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.hw-guide h3{font-size:19px;line-height:1.25;letter-spacing:-.02em}
.hw-guide p{color:var(--ink2);font-size:16px;line-height:1.5}
.hw-guides-more{display:flex;justify-content:center;margin-top:28px}
@media (prefers-reduced-motion:reduce){.hw-guide,.hw-guide:hover,.hw-time a:hover{transition:none;transform:none}}

@media (max-width:1100px){.hw-media .d-frame+.d-frame{inset-inline-end:0}}
@media (max-width:900px){
  .hw-step,.hw-step:nth-child(even){grid-template-columns:1fr;gap:32px;padding-top:48px}
  .hw-step:nth-child(even) .hw-copy{order:0}
  .hw-setup,.d-trust.hw-trust,.hw-guides,.hw-bento{grid-template-columns:1fr}
  .hw-q.wide{grid-template-columns:1fr;gap:18px}
}
@media (max-width:640px){
  .hw-time{flex-direction:column}
  .hw-time a{flex:none}
  .hw-decide{flex-direction:column;align-items:flex-start}
  .hw-media .d-frame+.d-frame{position:relative;inset-inline-end:auto;bottom:auto;width:86%;margin-block:-24px 0;margin-inline:auto 0}
  .hw-media.has-pair{padding-bottom:0}
  .hw-media.has-pair .hw-cap{margin-top:14px;max-width:none}
  .hw-step{padding-top:40px}
}
/* Analysis screens: the sidebar-free capture shows the whole screen, so the frame follows its shape instead of cropping it */
.hw-q .d-frame img{aspect-ratio:auto;object-fit:contain}