/* The two sections that left the homepage on 1 October 2026 (the build and care cards, and the four-step timeline), with the rules that styled them there. Loaded by the How it works page only. */
.hero-grid > *, .cta-grid > *, .about-grid > *, .step > *,
.services > *{ min-width:0; }
.services{display:grid;gap:20px;grid-template-columns:repeat(6,minmax(0,1fr));}
.services > .service{grid-column:span 2;}
.services > .service:nth-child(4),
.services > .service:nth-child(5){grid-column:span 3;}
@media (max-width:1100px){.services{grid-template-columns:repeat(2,minmax(0,1fr));}.services > .service,
  .services > .service:nth-child(4){grid-column:auto;}.services > .service:nth-child(5){grid-column:1 / -1;}}
@media (max-width:640px){.services{grid-template-columns:1fr;}.services > .service:nth-child(5){grid-column:auto;}}
.service{
  position:relative;overflow:visible;isolation:isolate;
  background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:36px 32px 34px;display:flex;flex-direction:column;
  transition:transform 0.6s var(--e-out), border-color 0.5s var(--e-out), box-shadow 0.6s var(--e-out);
}
.service::before{
  content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), var(--glow), transparent 65%);
  opacity:0;transition:opacity 0.45s var(--e-out);
}
.service:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--signal) 55%,var(--line));box-shadow:var(--shadow-lift);}
.service:hover::before{opacity:1;}
.service-summary{list-style:none;display:flex;flex-direction:column;gap:16px;cursor:default;}
.service-summary::-webkit-details-marker{display:none;}
.service-detail{display:flex;flex:1;flex-direction:column;gap:16px;padding-top:16px;}
.service-toggle-label{display:none;}
.service .icon{
  width:46px;height:46px;flex:none;display:grid;place-items:center;border-radius:12px;
  background:color-mix(in oklch, var(--signal) 10%, transparent);color:var(--signal-text);
  transition:transform 0.6s var(--e-out), background 0.4s var(--e-out);
}
.service:hover .icon{transform:scale(1.08) rotate(-4deg);background:color-mix(in oklch,var(--signal) 18%,transparent);}
.service .icon svg{width:23px;height:23px;stroke-width:1.7;}
.service-heading{display:block;font-family:var(--display);font-size:1.45rem;line-height:1.14;color:var(--ink);}
.service .fit-label{color:var(--signal-text);font-size:.75rem;font-weight:600;line-height:1.35;margin-top:-2px;min-height:2.7em;}
.service-title{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;
  gap:7px;min-height:calc(1.6rem + 26px + 7px);
}
.service-detail > p{color:var(--ink-soft);font-size:1rem;}
.service-detail > p a{color:var(--signal-text);text-underline-offset:3px;}
.service ul{margin:6px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;
  font-size:0.95rem;color:var(--ink-soft);}
.service li{display:flex;gap:11px;align-items:flex-start;}
.service li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--signal);margin-top:8px;}
.service-next{
  margin-top:auto;padding-top:6px;align-self:flex-start;min-height:24px;
  display:inline-flex;align-items:center;gap:8px;
  color:var(--signal-text);font-size:0.94rem;font-weight:600;text-decoration:none;
  transition:gap 0.35s var(--e-out);
}
.service-next svg{transition:transform 0.45s var(--e-out);}
.service-next:hover{text-decoration:underline;text-underline-offset:4px;}
.service-next:hover svg{transform:translateX(4px);}
.service-next-sub{margin-top:6px;font-size:0.83rem;font-weight:500;color:var(--ink-soft);}
.service-next-sub:hover{color:var(--signal-text);}
@media (max-width:640px){.service{padding:0;transform:none;}.service:hover{transform:none;}.service-summary{position:relative;padding:24px 56px 22px 22px;gap:10px;cursor:pointer;}.service-summary .icon{width:40px;height:40px;}.service-summary .fit-label{min-height:0;margin:0;}.service-summary .service-title{min-height:0;}.service-toggle-label{
    position:absolute;right:20px;top:24px;width:30px;height:30px;display:grid;place-items:center;
    border:1px solid var(--line);border-radius:50%;color:var(--signal-text);
  }.service-toggle-label::before,.service-toggle-label::after{
    content:"";position:absolute;width:12px;height:1.5px;border-radius:2px;background:currentColor;
    transition:transform .3s var(--e-out);
  }.service-toggle-label::after{transform:rotate(90deg);}.service[open] .service-toggle-label::after{transform:rotate(0deg);}.service-detail{padding:0 22px 24px;border-top:1px solid var(--line);padding-top:20px;}}
.service-detail p,.service-detail li{font-size:1rem;line-height:1.75;}
.guide-lead,.service-detail p{font-family:var(--body);}
.service-alias{
  display:block;margin-top:5px;font-size:.74rem;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-soft);
}
.service-unsure{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;
  margin-top:20px;padding:20px 24px;border:1px dashed var(--line);border-radius:18px;
}
.service-unsure p{margin:0;font-size:.95rem;line-height:1.6;color:var(--ink);}
.service-unsure b{display:block;font-family:var(--display);font-size:1.16rem;color:var(--ink);}
.worked-example{
  margin:4px 0 0;padding:18px 20px;border-radius:14px;border:1px solid var(--line);
  background:color-mix(in srgb,var(--signal) 6%,transparent);
}
.worked-example b{display:block;font-size:.82rem;margin-bottom:8px;color:var(--ink);}
.worked-example p{margin:0 0 8px;font-size:.92rem;line-height:1.65;}
.worked-example p:last-child{margin-bottom:0;}
.worked-example .made-up{font-size:.82rem;color:var(--ink-soft);}
.service-open-hint{
  grid-column:4;justify-self:end;align-self:center;margin-right:0;
  font-size:.76rem;font-weight:600;letter-spacing:.02em;color:var(--ink-soft);
}
.service[open] .service-open-hint{color:var(--signal-text);}
@media(max-width:640px){.service-open-hint{grid-column:1;grid-row:4;justify-self:start;margin-top:2px;}}
.plan-ladder{
  /* Separate glass cards (glass.js adds .bp-glass/.bp-glow to each .plan).
     No parent fill/overflow — that left a black bleed in the rounded corners. */
  list-style:none;margin:0;padding:0;
  display:grid;gap:12px;
  border:0;border-radius:0;overflow:visible;background:transparent;
}
/* The care plans as three priced cards, 21 October 2026 (Jacob picked the card layout from a
   mockup). One Monthly / Yearly switch sits above all three so they are always compared on the
   same terms; both prices are in the markup and the switch only shows one (monthly with no
   script). Each card lists what is in it, "Everything in Watch, plus" shows each step up, and
   Watch and Care carry a tick box for the monthly improvement review, which Partner includes.
   The cards sit in the page's main column (686px on a computer, beside the step rail), so they
   are sized to that column, and stack one per row whenever it is under 640px wide. */
.plan-cards{display:grid;gap:22px;container-type:inline-size;}
/* The page sets every paragraph and list item in a card to 1rem on a tall line; these are smaller. */
.plan-cards p,.plan-cards li{line-height:1.45;}
.plan-billing{display:inline-flex;flex-wrap:wrap;gap:2px;justify-self:center;padding:4px;border:1px solid var(--line);border-radius:999px;background:var(--surface-sunk);}
.plan-billing button{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:6px 16px;border:0;border-radius:999px;background:transparent;color:var(--ink-soft);font:600 .92rem/1 var(--body);cursor:pointer;transition:background .25s var(--e-out),color .25s var(--e-out);}
.plan-billing button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px oklch(0.2 0.02 220 / .18);}
.plan-billing button:focus-visible{outline:2px solid var(--signal);outline-offset:2px;}
.plan-save{padding:3px 8px;border:1px solid var(--wash-line);border-radius:999px;background:var(--glow);color:var(--signal-text);font-size:.72rem;font-weight:700;}
.plan-cards[data-billing="monthly"] .pp-year,
.plan-cards[data-billing="yearly"] .pp-month{display:none;}
.plan-cards .plan-ladder{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch;padding-top:12px;}
.plan{
  position:relative;display:flex;flex-direction:column;gap:13px;
  padding:24px 18px 20px;border-bottom:0;
}
.plan:last-child{border-bottom:0;}
.plan-head{display:flex;flex-direction:column;gap:12px;align-items:flex-start;}
.plan-icon{flex:none;display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--wash-line);border-radius:10px;background:var(--glow);color:var(--signal-text);}
.plan-icon svg{width:20px;height:20px;}
.plan-name b{display:block;font-size:1.04rem;font-weight:600;line-height:1.25;}
.plan-name span{display:block;margin-top:3px;font-size:.84rem;color:var(--ink-soft);}
.plan-name .plan-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;margin:0;padding:4px 12px;border-radius:999px;border:1px solid var(--signal);background:var(--signal);color:var(--signal-ink);font-size:.74rem;font-weight:700;letter-spacing:.01em;white-space:nowrap;}
.plan:has(.plan-badge){border:1px solid var(--signal);}
.plan-cards .plan-price{margin:0;font-variant-numeric:tabular-nums;color:var(--ink-soft);font-size:.9rem;white-space:nowrap;}
.plan-price b{font-family:var(--display);font-size:clamp(1.9rem,4.6cqi,2.6rem);font-weight:700;line-height:1;letter-spacing:-.03em;color:var(--ink);margin-right:4px;}
.plan-cards .plan-fit{margin:-4px 0 0;color:var(--signal-text);font-size:.84rem;font-weight:600;line-height:1.35;}
.service .plan-includes{margin:0;gap:9px;flex:1;align-content:start;}
.plan-cards .plan-includes li{color:var(--ink-soft);font-size:.9rem;line-height:1.45;}
.service .plan-includes .plan-includes-lead{color:var(--ink);font-weight:600;}
.service .plan-includes .plan-includes-lead::before{display:none;}
.plan-cards .plan-addon{position:relative;display:flex;gap:10px;align-items:flex-start;margin:0;padding:11px 12px;border:1px dashed var(--wash-line);border-radius:10px;background:var(--glow);font-size:.86rem;line-height:1.4;color:var(--ink);cursor:pointer;}
.plan-addon input{position:absolute;opacity:0;width:1px;height:1px;}
.plan-addon b{display:block;font-weight:600;}
.plan-addon .pp-month,.plan-addon .pp-year{display:block;color:var(--ink-soft);font-size:.82rem;}
.plan-cards[data-billing="monthly"] .plan-addon .pp-year,
.plan-cards[data-billing="yearly"] .plan-addon .pp-month{display:none;}
.plan-addon-box{flex:none;display:grid;place-items:center;width:18px;height:18px;margin-top:1px;border:1.5px solid var(--signal-text);border-radius:5px;}
.plan-addon input:checked + .plan-addon-box,.plan-addon.is-included .plan-addon-box{background:var(--signal-text);}
.plan-addon input:checked + .plan-addon-box::after,.plan-addon.is-included .plan-addon-box::after{content:"";width:9px;height:5px;border:2px solid var(--surface);border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg);}
.plan-addon input:focus-visible + .plan-addon-box{outline:2px solid var(--signal);outline-offset:2px;}
.plan-addon.is-included{border-style:solid;cursor:default;}
.plan-cards .plan-response{max-width:none;align-self:stretch;display:flex;flex-direction:column;gap:2px;margin:0;padding-top:12px;border-top:1px solid var(--line);font-size:.8rem;color:var(--ink-soft);}
.plan-response b{color:var(--ink);font-size:.92rem;font-weight:600;}
.service-summary .service-price{display:block;margin-top:6px;font-size:.92rem;font-weight:600;color:var(--ink);}
.service-detail .guarantee-line{margin-top:10px;font-size:.88rem;font-weight:600;color:var(--signal-text);}
.plan-ask{
  display:flex;align-items:center;justify-content:center;gap:6px;min-height:46px;padding:10px 12px;border:1.5px solid var(--ink);border-radius:999px;
  color:var(--ink);font-size:.9rem;font-weight:650;line-height:1.2;text-decoration:none;text-align:center;
  transition:background .25s var(--e-out),border-color .25s var(--e-out),transform .25s var(--e-out);
}
.plan:has(.plan-badge) .plan-ask{background:var(--signal);border-color:var(--signal);color:var(--signal-ink);}
.plan-ask:hover{border-color:var(--signal);background:var(--glow);transform:translateY(-1px);}
.plan:has(.plan-badge) .plan-ask:hover{background:var(--signal);filter:brightness(1.06);}
.plan-ask.is-selected{color:var(--signal-ink);border-color:var(--signal);background:var(--signal);}
.plan-cards .plan-ask-note{margin:-8px 0 0;text-align:center;font-size:.8rem;color:var(--ink-soft);}
.plan-review{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;padding:24px 26px;border:1px solid var(--line);border-radius:18px;background:var(--surface);}
.plan-review h3{margin:0 0 8px;font-family:var(--display);font-size:1.2rem;font-weight:600;letter-spacing:-.01em;}
.plan-cards .plan-review p{margin:0;color:var(--ink-soft);font-size:.96rem;}
.plan-cards .plan-review .plan-review-cap{margin-bottom:8px;font-size:.74rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;}
.plan-review-sample{list-style:none;margin:0;padding:0;display:grid;gap:8px;counter-reset:idea;}
.service .plan-review-sample li{display:block;position:relative;padding:10px 12px 10px 46px;border:1px solid var(--line);border-radius:10px;font-size:.92rem;font-weight:600;color:var(--ink);counter-increment:idea;}
.service .plan-review-sample li::before{content:counter(idea);position:absolute;left:12px;top:10px;display:grid;place-items:center;width:24px;height:24px;margin:0;border-radius:50%;background:var(--glow);border:1px solid var(--wash-line);color:var(--signal-text);font:700 .8rem/1 var(--display);}
.plan-review-sample span{display:block;margin-top:2px;font-weight:400;font-size:.84rem;color:var(--ink-soft);}
.plan-cards .plan-review .plan-review-note{margin-top:8px;font-size:.8rem;}
@container (max-width:639px){.plan-cards .plan-ladder{grid-template-columns:minmax(0,1fr);width:100%;max-width:440px;margin-inline:auto;gap:24px;}.plan{padding:26px 22px 22px;}.plan-head{flex-direction:row;}.plan-price b{font-size:2.5rem;}}
.response-targets{
  margin:0 0 32px;padding:26px 28px;
  border:1px solid var(--line);border-radius:18px;background:var(--surface);
}
.response-targets h3{margin:0 0 16px;font-size:1.12rem;font-weight:600;letter-spacing:-.01em;font-family:var(--body);}
.response-targets .rt-scroll{overflow-x:auto;}
.response-targets table{border-collapse:collapse;width:100%;min-width:420px;}
.response-targets th,.response-targets td{
  text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top;
}
.response-targets thead th{
  background:var(--brand);color:var(--on-brand);
  font-size:.8rem;font-weight:600;letter-spacing:.02em;border-bottom:0;
}
.response-targets thead th:first-child{border-radius:9px 0 0 0;}
.response-targets thead th:last-child{border-radius:0 9px 0 0;}
.response-targets tbody th{font-size:.94rem;font-weight:500;color:var(--ink-soft);}
.response-targets tbody td{font-size:.94rem;font-weight:600;color:var(--ink);}
.response-targets tbody tr:last-child th,.response-targets tbody tr:last-child td{border-bottom:0;}
.response-targets > p{margin:14px 0 0;font-size:.86rem;color:var(--ink-soft);}
@media (max-width:640px){.response-targets{padding:22px;}.plan-review{padding:20px;}}
.process{background:var(--surface-sunk);}
.timeline-overview{margin:-20px 0 54px;}
.timeline-total{margin-bottom:28px;}
.timeline-total strong{display:block;font-family:var(--display);font-size:1.35rem;font-weight:400;line-height:1.1;}
.timeline-total span{display:block;margin-top:6px;font:700 .75rem/1.3 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--signal-text);}
.timeline-rail{position:relative;display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:20px;list-style:none;margin:0;padding:0;}
.timeline-rail::before{content:"";position:absolute;top:13px;left:13px;right:13px;height:2px;background:var(--line);}
.timeline-rail::after{content:"";position:absolute;top:13px;left:13px;height:2px;background:var(--signal);width:0;animation:timeline-draw 7s cubic-bezier(.65,0,.35,1) infinite;}
.timeline-rail li{position:relative;padding-right:8px;}
.timeline-rail .dot{display:block;width:26px;height:26px;border-radius:50%;background:var(--surface);border:2px solid var(--signal);margin-bottom:14px;position:relative;z-index:1;}
.timeline-rail li:nth-child(1) .dot{animation:timeline-dot-0 7s steps(1) infinite;}
.timeline-rail li:nth-child(2) .dot{animation:timeline-dot-1 7s steps(1) infinite;}
.timeline-rail li:nth-child(3) .dot{animation:timeline-dot-2 7s steps(1) infinite;}
.timeline-rail li:nth-child(4) .dot{animation:timeline-dot-3 7s steps(1) infinite;}
.timeline-rail b{display:block;font-family:var(--display);font-size:1.05rem;font-weight:400;margin-bottom:3px;color:var(--ink);}
.timeline-rail .dur{display:block;font-size:.78rem;color:var(--ink-mid);font-weight:600;text-transform:uppercase;letter-spacing:.02em;}
.timeline-rail .free{display:inline-block;margin-top:6px;font-size:.78rem;color:var(--ink-mid);font-style:italic;}
.timeline-rail .stop-point{
  display:table;margin-top:6px;padding:2px 9px;border-radius:999px;
  border:1px solid var(--signal);color:var(--signal-text);
  font-size:.68rem;font-weight:600;letter-spacing:.01em;white-space:nowrap;
}
@media (max-width:700px){.timeline-rail{display:flex;flex-direction:column;gap:0;grid-template-columns:none;}.timeline-rail::before{display:none;}.timeline-rail::after{display:none;}.timeline-rail li{padding:0 0 26px 26px;border-left:2px solid var(--line);margin-left:13px;}.timeline-rail li:last-child{padding-bottom:0;}.timeline-rail .dot{position:absolute;left:-14px;top:0;margin-bottom:0;}}
@media (max-width:640px){.service{padding:0;}}
.services{display:grid;gap:12px;border-top:0}
.services > .service{display:block;border:0;border-bottom:0;border-radius:0;padding:0;background:transparent;box-shadow:none}
.service:hover{transform:none;box-shadow:none}
.service::before{display:none}
.service-summary{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1.3fr) auto auto;align-items:center;gap:24px;padding:24px 0;cursor:pointer}
.service-title{order:-1;display:block;min-height:0;padding:0}
.service-heading{font-size:1.7rem}
.service .fit-label{margin:0;min-height:0;color:var(--ink-soft);font-size:.9rem}
.service-summary .service-price{margin:0;font-size:.85rem;font-weight:600;color:var(--ink);text-align:right}
.service-toggle-label{grid-column:5;position:relative;justify-self:end;width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;color:var(--signal-text);transition:transform .3s var(--e-out)}
.service-toggle-label::before{content:none}
.service-toggle-label::after{content:"";position:static;width:8px;height:8px;background:none;border-radius:0;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg)}
.service[open] .service-toggle-label{transform:rotate(180deg)}
.service-detail{display:block;padding:0 0 28px;max-width:860px}
#support .service-detail{max-width:none}
#support .service-detail > p{max-width:860px}
.service:not([open]) > .service-detail{display:none}
.service-detail > * + *{margin-top:18px}
.service .plan{display:flex}
.service .plan::before{display:none}
.support-conditions > summary{cursor:pointer;color:var(--signal-text);padding:12px 0}
.service .plan-ladder{padding:0}
.timeline-overview{margin:0}
@media(max-width:640px){.service-summary{grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;padding:18px 0}.service-title{grid-column:1;grid-row:1}.service-heading{font-size:1.4rem}.service .fit-label{grid-column:1;grid-row:2}.service-summary .service-price{grid-column:1;grid-row:3;text-align:left;font-size:.85rem}.service-toggle-label{grid-column:2;grid-row:1 / 4}.service-detail{padding-bottom:22px}}

/* ---- The page itself: a title block, then the two sections, each as they were on the home page ---- */
.how-it-works section{padding:42px 0}
.how-it-works .section-head{max-width:62ch;margin-bottom:24px}
.how-it-works .section-head h2{font-family:var(--display);font-weight:400;font-size:clamp(1.55rem,2.5vw,2.15rem);line-height:1.1;letter-spacing:-.025em;margin:0 0 8px;text-wrap:balance}
.how-it-works .section-head p{color:var(--ink-soft);font-size:1rem;line-height:1.55}
.how-it-works .process{padding:42px 0}
@media (max-width:640px){
  .how-it-works section{padding:34px 0}
  .how-it-works .section-head{margin-bottom:18px}
}

/* 8 October 2026 ideas review. The rail carries each step's time, a phone gets the four steps as a
   two-by-two grid (the rail is hidden there), steps one to four each end in the link that answers
   the question people ask at that point, and the care card opens with a side-by-side table. */
.how-split .bp-track{gap:16px}
.how-split .bp-track button small{display:block;font-size:.8rem;font-weight:500;color:var(--ink-soft);margin-top:2px}
.hiw-strip{display:none}
@media (max-width:860px){
  .hiw-strip{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .hiw-strip li{border:1px solid var(--line);border-radius:14px;padding:10px 12px;background:var(--surface);font-weight:700;font-size:.9rem;line-height:1.25;color:var(--ink)}
  .hiw-strip b{color:var(--signal-text);margin-right:4px}
  .hiw-strip small{display:block;font-weight:500;color:var(--ink-soft);font-size:.78rem;margin-top:3px}
}
.step-link{display:block;width:fit-content;max-width:100%;margin-top:10px;color:var(--signal-text);font-size:.94rem;font-weight:600;text-underline-offset:4px}
.bp-step p a{color:var(--signal-text);font-weight:600;text-underline-offset:3px}
.how-split .services > .hiw-faq{margin-top:0}
.service .price-factors{margin:10px 0 0}

/* Tap targets on phones and touch tablets (9 October 2026): the link under each step gets a 44px tall tap area, with its top margin taken in to match. The final audit pass adds the "Book a free chat" and related-work links at the foot of each way of working (30px and 27px) and the "Ask about this plan" buttons (42px). */
@media (max-width:640px), (pointer:coarse) and (max-width:1024px){
  .step-link{box-sizing:border-box;min-height:44px;padding-block:10px;margin-top:0}
  .service-next{min-height:44px;padding-top:0}
  .service-next-sub{margin-top:0}
  .plan-ask{min-height:44px}
}

/* 11 October 2026 motion picks (B30): the four steps drawn on one eight-week scale, in the "Four
   steps, four to eight weeks" column under the rail (under the four-step grid on a phone). Plain
   markup that reads finished with no script. assets/motion/pages.js grows the bars once when it is
   first seen. Solid is the shortest time each step takes, dashed is the extra if the build takes
   the full six weeks, and a ring marks a point where you can stop. */
.hiw-weeks{margin:22px 0 0;padding:12px 14px 10px;border:1px solid var(--line);border-radius:14px;background:color-mix(in oklch,var(--surface) 70%,transparent)}
.hiw-weeks figcaption{margin:0 0 8px;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.hiw-weeks ol{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.hiw-weeks li{display:grid;gap:4px}
.hw-name{display:flex;justify-content:space-between;gap:10px;font-size:.76rem;line-height:1.3;color:var(--ink-soft)}
.hw-name b{font-size:.82rem;color:var(--ink)}
.hw-track,.hw-scale{position:relative;margin-inline:6px}
.hw-track{height:7px;border-radius:4px;background:color-mix(in oklch,var(--ink) 9%,transparent)}
.hw-track i{position:absolute;top:0;bottom:0;left:calc(var(--a) / 8 * 100%);width:calc((var(--b) - var(--a)) / 8 * 100%);border-radius:4px;background:var(--signal)}
.hw-track i.hw-maybe{background:repeating-linear-gradient(90deg,color-mix(in oklch,var(--signal) 60%,transparent) 0 5px,transparent 5px 9px)}
.hw-track i.hw-dot{width:11px;height:11px;top:-2px;left:-5px;border-radius:50%;box-shadow:0 0 0 3px color-mix(in oklch,var(--signal) 22%,transparent)}
.hw-track s{position:absolute;top:50%;left:calc(var(--a) / 8 * 100%);width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;border:2px solid var(--signal-text);background:var(--bg)}
.hiw-weeks .hw-scale{height:14px;margin-top:6px;font-size:.7rem;color:var(--ink-soft)}
.hw-scale span{position:absolute;left:calc(var(--a) / 8 * 100%);transform:translateX(-50%);white-space:nowrap}
.hiw-weeks .hw-key{margin:6px 0 0;font-size:.72rem;line-height:1.4;color:var(--ink-soft)}