/* Tektura: styles for How we work only, split out of site.css so no other page has to
   download them. Loaded after site.css. The rules are in the order they had there, and
   none of them needs to win against a later rule of the same weight in site.css, so the
   split changes nothing on screen. A rule another page needs goes in site.css. */

/* ---------- Hero ---------- */
.hero{padding-block:clamp(40px,7vw,96px) clamp(20px,4vw,48px)}
.table-wrap{overflow-x:auto}
@media (max-width:560px){
  .hero{padding-block:28px 12px}
}

/* ---------- Process phases (how we work) ---------- */
/* Question lists inside the dark topic cards */
.qs{margin:10px 0 0;padding-left:17px}
.qs li{margin:7px 0;font-size:15px;line-height:1.5;color:var(--on-ink)}
.card.ink .qnote{margin-top:10px;font-size:13.5px;line-height:1.5;color:var(--on-ink-dim)}
.days-rows{display:grid;gap:4px;margin-top:12px}
.drow{display:grid;grid-template-columns:minmax(96px,124px) 1fr auto;gap:12px;align-items:center;padding:5px 0;border:0;background:none;text-align:left;width:100%;font:inherit;cursor:default}
.drow .dn{font-size:13.5px;line-height:1.25;color:var(--ink)}
.drow .db{height:19px;width:calc(var(--d) / 4.5 * 100%);min-width:10px;background:var(--ink);border-top-right-radius:4px;border-bottom-left-radius:4px;transition:background .18s ease}
.drow:hover .db,.drow:focus-visible .db{background:var(--signal)}
.drow:hover .drop,.drow:focus-visible .drop{opacity:1}
.drow:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
/* Tall enough for the longest note (Your words, four lines on a phone), so it never runs up over the bars. */
.days-foot{position:relative;margin-top:14px;min-height:5.4em}
.days-total,.drow .drop,.days-foot .drop{position:absolute;left:0;bottom:0;width:100%;margin:0;font-size:14.5px;line-height:1.5;color:var(--body);transition:opacity .18s ease}
.drow .drop,.days-foot .drop{opacity:0;pointer-events:none}
.days:not(.js-days):is(:hover,:focus-within) .days-total{opacity:0}
/* With story.js each part is a button (the note moved under the bars, so the button’s name
   is the part and its days). A press shows its note and keeps it; a mouse over a part shows
   that one while it is there. With nothing chosen the total is shown, never a blank. */
.js-days .drow{cursor:pointer}
.js-days .drow.sel .db{background:var(--signal)}
.js-days .days-foot .drop{visibility:hidden;transition:opacity .18s ease,visibility 0s linear .18s}
.js-days .days-foot .drop.on{visibility:visible;opacity:1;transition:opacity .18s ease}
.js-days.showing .days-total{opacity:0}
@media (max-width:540px){.drow{grid-template-columns:1fr auto;row-gap:5px;padding:7px 0}.drow .dn{grid-area:1/1/2/2}.drow .dd{grid-area:1/2/2/3;text-align:right}.drow .db{grid-area:2/1/3/3}}

.no-narrow{display:inline}
@media (max-width:540px){.no-narrow{display:none}}

/* Paying monthly: a quarter, then the rest spread out. */
.mstrip{display:flex;gap:3px;align-items:flex-end;margin-top:12px}
.mstrip span{flex:1;height:13px;background:var(--rule);border-top-right-radius:3px;border-bottom-left-radius:3px}
.mstrip span:first-child{flex:3.2;height:30px;background:var(--ink)}
.proc-stat{display:flex;gap:clamp(20px,3vw,44px)}
.proc-stat div{text-align:right}
.proc-stat b{display:block;white-space:nowrap;font-family:var(--mono);font-size:clamp(20px,2.4vw,30px);line-height:1;color:var(--signal-dark)}
.proc-stat span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-top:7px}
@media (max-width:820px){.proc-stat{justify-content:flex-start}.proc-stat div{text-align:left}
}

/* The questions, on the white ground now the ink is spent on the steps. Each is a line of
   reading, not a control: a numeral drawn in outline like the steps above, the topic in small
   capitals, then the question. Nothing on them reacts to a pointer. */
.qfive{counter-reset:qf;display:grid;margin-top:22px;max-width:760px}
.qfive li{counter-increment:qf;list-style:none;display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:16px;
  padding:18px 0 19px;border-top:1px solid var(--rule);font-size:clamp(16px,1.6vw,19px);line-height:1.4;color:var(--ink)}
.qfive li:last-child{border-bottom:1px solid var(--rule)}
.qfive li::before{content:counter(qf);grid-row:1/3;font-size:40px;line-height:.9;font-weight:600;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;color:transparent;-webkit-text-stroke:1.5px var(--signal)}
@supports not (-webkit-text-stroke:1px red){.qfive li::before{color:var(--signal)}}
.qfive .qk{display:block;margin:2px 0 6px;font-family:var(--mono);font-size:11px;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;color:var(--slate)}
/* The page opens straight into the steps: the page tab sits at the top of the dark band. */
.story-first{padding-top:clamp(56px,8vw,104px)}
.story-first .htab{margin:0 0 clamp(24px,3.4vw,40px)}
.story-top{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:end;margin-bottom:clamp(20px,3vw,40px)}
.story-top h2{font-size:clamp(30px,4vw,52px);line-height:1.05;letter-spacing:-.02em;max-width:14ch;color:var(--paper)}
@media (max-width:820px){.story-top{grid-template-columns:1fr}.story-top .proc-stat div{text-align:left}}
.story-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,72px);align-items:start}
.story-steps{list-style:none;margin:0;padding:0;counter-reset:none}
.sstep{min-height:88vh;display:flex;flex-direction:column;justify-content:center;padding:6vh 0}
/* The step being played is full strength; the others step back, never below AA contrast. */
.sstep :is(h3,p,.sstep-facts){transition:opacity .35s ease,color .35s ease}
.story.on .sstep:not(.now) :is(p,.sstep-facts){opacity:.62}
.story.on .sstep:not(.now) h3{color:var(--on-ink-dim)}
.sstep:first-child{min-height:70vh;justify-content:flex-start;padding-top:12vh}
.sstep:last-child{min-height:92vh}
.sstep-n{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--signal-dark)}
.sstep-n i{font-style:normal;color:var(--on-ink-dim)}
.sstep h3{font-size:clamp(24px,2.6vw,34px);line-height:1.1;letter-spacing:-.015em;margin:12px 0 14px;color:var(--paper);text-transform:none}
.sstep h3{text-align:left}
.sstep p{color:var(--on-ink);font-size:17px;line-height:1.6;max-width:44ch}
.sstep p a{color:var(--paper)}
.sstep-facts{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px}
.sstep-facts li{display:flex;gap:10px;align-items:baseline;color:var(--paper);font-size:15px}
.sstep-facts li::before{content:"";flex:none;width:9px;height:9px;background:var(--signal-dark);border-top-right-radius:3px;border-bottom-left-radius:3px;transform:translateY(-1px)}
.story-note{margin-top:28px;color:rgba(255,255,255,.6);max-width:70ch}
.story-note a{color:var(--paper)}

.story-stage{position:sticky;top:calc(50vh - 230px);height:460px;min-width:0;overflow:visible}
.story-stage>.sstage{position:absolute;left:0;top:0}
/* The stage and the tall steps are laid out from the start, so nothing moves when story.js
   arrives (the page used to jump as the steps grew). Without JavaScript the plain list is
   restored by the <noscript> style in the page. */
.sstage{--p1:0;--p2:0;--p3:0;--p4:0;--sc:1;position:relative;overflow:clip;overflow-clip-margin:20px;width:520px;height:460px;transform:scale(var(--sc));transform-origin:0 0;font-family:var(--sans)}
.sstage *{box-sizing:border-box}
.st-meter{position:absolute;left:0;right:0;top:0;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.st-meter i{height:4px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden;position:relative}
.st-meter i::after{content:"";position:absolute;inset:0;background:var(--signal-dark);transform-origin:0 50%;transform:scaleX(var(--m,0))}
.st-meter i:nth-child(1){--m:var(--p1)}.st-meter i:nth-child(2){--m:var(--p2)}.st-meter i:nth-child(3){--m:var(--p3)}.st-meter i:nth-child(4){--m:var(--p4)}
.sc{position:absolute;inset:26px 0 0;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s linear .45s}
.sstage[data-at="0"] .sc1,.sstage[data-at="1"] .sc2,.sstage[data-at="2"] .sc3,.sstage[data-at="3"] .sc3,.sstage[data-at="3"] .sc4{opacity:1;visibility:visible;transition:opacity .45s ease,visibility 0s}
.s1-mail,.s1-reply,.s2-doc,.s3-win{background:var(--paper);color:var(--ink);border-top-right-radius:16px;border-bottom-left-radius:16px}
/* A step’s local timing: --t runs 0→1 over its own slice of the scroll. */
.sc [style*="--k"],.sc>*{will-change:transform,opacity}

/* 01: the enquiry is there from the start, so the picture is never empty on arrival */
.s1-mail{position:absolute;left:0;top:14px;width:330px;padding:16px 18px}
.s1-from{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.s1-mail b{display:block;font-size:17px;margin:6px 0 4px}
.s1-line{font-size:14px;color:var(--body)}
.s1-reply{--t:clamp(0,(var(--p1) - .22)*5,1);position:absolute;right:0;top:128px;width:300px;padding:14px 18px;background:var(--signal);color:#fff;opacity:var(--t);transform:translate(calc((1 - var(--t))*60px),0) rotate(calc((1 - var(--t))*4deg))}
.s1-reply .s1-from{color:rgba(255,255,255,.8)}
.s1-reply span:last-child{display:block;font-size:15.5px;font-weight:500;margin-top:5px}
.s1-call{--t:clamp(0,(var(--p1) - .42)*6,1);position:absolute;left:0;top:232px;display:flex;align-items:center;gap:12px;padding:10px 16px 10px 12px;background:var(--ink-hi);border-top-right-radius:12px;border-bottom-left-radius:12px;opacity:var(--t);transform:scale(calc(.85 + var(--t)*.15))}
.s1-dot{width:10px;height:10px;border-radius:50%;background:#3FB26B;box-shadow:0 0 0 4px rgba(63,178,107,.2)}
.s1-time{font-family:var(--mono);font-size:22px;color:var(--paper)}
.s1-m{display:inline-block;min-width:2ch;text-align:right}
.s1-lab{font-size:13px;color:var(--on-ink-dim)}
.s1-qs{list-style:none;margin:0;padding:0;position:absolute;left:0;right:0;top:296px;display:flex;flex-wrap:wrap;gap:8px}
.s1-qs li{--t:clamp(0,(var(--p1) - .5 - var(--k)*.05)*8,1);font-size:13.5px;padding:7px 12px;color:var(--paper);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3);border-top-right-radius:10px;border-bottom-left-radius:10px;opacity:var(--t);transform:translateY(calc((1 - var(--t))*14px))}
.s1-qs li::before{content:"✓ ";color:var(--signal-dark);opacity:clamp(0,(var(--p1) - .6 - var(--k)*.045)*10,1)}
.s1-qs li:nth-child(1){--k:0}.s1-qs li:nth-child(2){--k:1}.s1-qs li:nth-child(3){--k:2}.s1-qs li:nth-child(4){--k:3}.s1-qs li:nth-child(5){--k:4}.s1-qs li:nth-child(6){--k:5}.s1-qs li:nth-child(7){--k:6}

/* 02 */
.s2-doc{--t:clamp(0,var(--p2)*6,1);position:absolute;left:10px;right:40px;top:10px;padding:20px 22px 18px;opacity:var(--t);transform:translateY(calc((1 - var(--t))*40px)) rotate(calc((1 - var(--t))*-3deg))}
.s2-h{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--rule);padding-bottom:10px;margin-bottom:14px}
.s2-h b{font-size:20px;letter-spacing:-.01em}.s2-h span{font-size:12.5px;color:var(--slate)}
.s2-bar{--t:clamp(0,(var(--p2) - .12 - var(--k)*.09)*5,1);display:grid;grid-template-columns:112px 1fr 44px;gap:10px;align-items:center;margin:9px 0;font-size:13.5px;opacity:calc(.2 + var(--t)*.8)}
.s2-bar i{height:14px;background:var(--rule);border-top-right-radius:5px;border-bottom-left-radius:5px;position:relative;overflow:hidden}
.s2-bar i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:calc(var(--d) / 4.5 * 100%);background:var(--ink);transform-origin:0 50%;transform:scaleX(var(--t))}
.s2-bar em{font-style:normal;font-family:var(--mono);font-size:12px;text-align:right;color:var(--slate)}
.s2-tot{--t:clamp(0,(var(--p2) - .6)*6,1);display:flex;gap:12px;align-items:baseline;border-top:1px solid var(--rule);margin-top:14px;padding-top:12px;opacity:var(--t)}
.s2-tot span{font-size:12.5px;color:var(--slate)}.s2-tot s{font-size:13px;color:var(--slate)}
.s2-tot b{margin-left:auto;font-family:var(--mono);font-size:20px}
.s2-stamp{--t:clamp(0,(var(--p2) - .74)*7,1);position:absolute;right:0;top:300px;padding:10px 18px;font-family:var(--mono);font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--signal-dark);box-shadow:inset 0 0 0 2.5px var(--signal-dark);border-top-right-radius:10px;border-bottom-left-radius:10px;opacity:var(--t);transform:rotate(-8deg) scale(calc(1.8 - var(--t)*.8))}

/* 03 */
.s3-pay,.s4-pay{position:absolute;left:0;right:0;top:4px;display:grid;grid-template-columns:70px 1fr 50px;gap:12px;align-items:center;font-size:13px;color:var(--on-ink)}
.s3-pay b,.s4-pay b{font-family:var(--mono);font-size:15px;color:var(--paper);text-align:right}
.s3-track{height:10px;background:rgba(255,255,255,.12);border-top-right-radius:4px;border-bottom-left-radius:4px;overflow:hidden}
.s3-track i{display:block;height:100%;background:var(--signal-dark);transform-origin:0 50%;transform:scaleX(var(--f,0))}
/* --dep: the deposit’s share as set in the staff area (rates.js), half until it arrives. */
.s3-pay .s3-track i{--f:calc(clamp(0,var(--p3)*6,1)*var(--dep,.5))}
.sstage[data-at="3"] .s3-pay{opacity:0}
.s4-pay .s3-track i{--f:calc(var(--dep,.5) + clamp(0,var(--p4)*5,1)*(1 - var(--dep,.5)))}
.s3-win{position:absolute;left:0;right:0;top:34px;height:300px;overflow:hidden;background:var(--white)}
.s3-chrome{display:flex;align-items:center;gap:6px;padding:10px 12px;background:var(--paper);border-bottom:1px solid var(--rule)}
.s3-chrome>i{width:9px;height:9px;border-radius:50%;background:var(--rule)}
.s3-url{margin-left:10px;flex:1;font-family:var(--mono);font-size:11.5px;color:color-mix(in srgb,var(--slate) calc((1 - clamp(0,(var(--p4) - .2)*6,1))*100%),transparent);background:var(--white);padding:5px 10px;border-radius:6px;position:relative}
.s3-url::after{content:"wrenhurstbrass.org.uk";position:absolute;inset:0;padding:5px 10px;background:var(--white);color:var(--ink);border-radius:6px;clip-path:inset(0 calc((1 - clamp(0,(var(--p4) - .2)*4,1))*100%) 0 0)}
.s3-page{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:20px 100px 62px 24px;gap:10px;padding:14px}
.s3-page .nav{--k:0;grid-column:1/-1}
.s3-page .hero{--k:1;grid-column:1/-1;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:0 18px;background:color-mix(in srgb,var(--ink) calc(var(--c)*100%),var(--paper))}
.s3-page .hero span{height:12px;width:58%;background:color-mix(in srgb,var(--paper) calc(var(--c)*100%),#C9C6BE);border-radius:3px}
.s3-page .hero span:nth-child(2){width:38%;height:8px}
.s3-page .hero .cta{width:78px;height:18px;margin-top:4px;background:color-mix(in srgb,var(--signal) calc(var(--c)*100%),#C9C6BE);border-top-right-radius:6px;border-bottom-left-radius:6px}
.s3-page .c1{--k:2;background:color-mix(in srgb,var(--tint) calc(var(--c)*100%),var(--paper))}.s3-page .c2{--k:3}.s3-page .c3{--k:4;background:color-mix(in srgb,var(--tint) calc(var(--c)*100%),var(--paper))}
.s3-page .foot{--k:5;grid-column:1/-1;background:color-mix(in srgb,var(--ink) calc(var(--c)*100%),var(--paper))}
.s3-weeks{position:absolute;left:0;right:0;top:352px;display:grid;grid-template-columns:repeat(6,1fr);font-family:var(--mono);font-size:11px;color:var(--on-ink-dim);transition:opacity .3s}
.sstage[data-at="3"] .s3-weeks{opacity:0}
.s3-line{position:absolute;left:0;right:0;top:22px;height:3px;background:rgba(255,255,255,.12)}
.s3-line i{position:absolute;inset:0;background:var(--paper);transform-origin:0 50%;transform:scaleX(clamp(0,(var(--p3) - .12)*1.25,1))}
.fb{position:absolute;top:15px;width:17px;height:17px;background:var(--signal-dark);border-top-right-radius:6px;border-bottom-left-radius:6px;transform:scale(var(--s,0))}
.fb.f1{left:30%;--s:clamp(0,(var(--p3) - .38)*10,1)}.fb.f2{left:58%;--s:clamp(0,(var(--p3) - .6)*10,1)}.fb.f3{left:90%;--s:clamp(0,(var(--p3) - .86)*10,1)}
.s3-weeks::after{content:"Feedback";position:absolute;right:0;top:40px;color:var(--signal-dark);opacity:clamp(0,(var(--p3) - .4)*6,1)}

/* 04 */
.s4-live{--t:clamp(0,(var(--p4) - .55)*8,1);position:absolute;right:-8px;top:40px;padding:8px 16px 8px 30px;background:#2A8550;color:#fff;font-weight:600;font-size:15px;border-top-right-radius:10px;border-bottom-left-radius:10px;opacity:var(--t);transform:scale(calc(.5 + var(--t)*.5)) rotate(calc((1 - var(--t))*12deg))}
.s4-live i{--b:clamp(0,(var(--p4) - .56)*2.6,1);position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;background:var(--signal-dark);border-top-right-radius:4px;border-bottom-left-radius:4px;opacity:calc(var(--b)*(1 - var(--b))*4);transform:translate(calc(var(--dx)*var(--b)*1.6),calc(var(--dy)*var(--b)*1.6)) rotate(calc(var(--r)*var(--b)))}
.s4-live i:nth-child(even){background:var(--paper)}
.s4-live::before{content:"";position:absolute;left:13px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:#fff}
.s4-after{--t:clamp(0,(var(--p4) - .62)*6,1);position:absolute;left:0;right:0;top:350px;display:grid;grid-template-columns:1fr auto;gap:22px;align-items:end;opacity:var(--t);transform:translateY(calc((1 - var(--t))*14px))}
.s4-snag span,.s4-care span:first-child{display:block;font-size:13px;color:var(--on-ink);margin-bottom:8px}
.s4-snag .s3-track i{--f:clamp(0,(var(--p4) - .66)*3.2,1);background:var(--paper)}
.s4-care{text-align:right}
.s4-tog{display:inline-block;width:42px;height:24px;border-radius:12px;background:rgba(255,255,255,.18);position:relative;transition:background .25s}
.s4-tog i{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .25s}
.sstage.care .s4-tog{background:var(--signal-dark)}.sstage.care .s4-tog i{transform:translateX(18px)}

@media (max-width:860px){
  /* The stage holder’s height, the same sum story.js does (the stage scaled to fit, plus the
     padding), so the page does not move when the script arrives. */
  .story-grid{grid-template-columns:minmax(0,1fr);gap:0;container-type:inline-size}
  .story-stage{order:-1;top:64px;height:calc(min(460px,100cqw*460/520) + 24px);z-index:2;background:var(--ink);padding:10px 0 14px;margin:0 calc(var(--gutter)*-1);padding-left:var(--gutter);padding-right:var(--gutter);box-shadow:0 12px 18px -12px rgba(0,0,0,.6)}
  .story-stage>.sstage{left:var(--gutter);top:10px}
  .sstep,.sstep:first-child,.sstep:last-child{min-height:70vh;justify-content:flex-start;padding:5vh 0 10vh}
  .sstep p{font-size:16px}
}
@media (prefers-reduced-motion:reduce){.sstage *,.sc,.sstep{transition:none!important}}

/* After the story: each section is one of the steps, up close. What the stage did, the
   sections do too as they arrive — the question numbers fill, the days fill, the payment
   splits — driven by --p (0 to 1) as each passes up the screen (story.js). Without the
   script, or with less motion asked for, everything is simply shown done. */
.upclose{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);margin:0 0 14px}
/* Each step link is a full-height target, a line 24px tall (44px on a phone, below). The
   margin takes the extra height back, so the line of type keeps its height, and the line
   under the words is drawn where the border was, thicker on hover like any other link. */
.upclose a{color:var(--signal);text-decoration:none;display:inline-block;line-height:24px;margin-block:-4px;border-bottom:0;background:linear-gradient(currentColor 0 0) 0 20px/100% 1px no-repeat}
@media (hover:hover){.upclose a:hover{box-shadow:none;background-size:100% 2px}}
@media (forced-colors:active){.upclose a{background:none;text-decoration:underline}}
.upclose.on-ink{color:rgba(255,255,255,.6)}
.js-scrub [data-scrub]{--p:0}
/* As the list comes up the screen each numeral fills in turn, ink-light to full. Without the
   script, or with less motion asked for, --t is never set and they are simply shown. */
.qfive li::before{opacity:calc(.28 + var(--t)*.72);transform:translateY(calc((1 - var(--t))*6px))}
.qtopics{max-width:760px;margin-top:clamp(30px,4vw,48px)}
.qtopics-h{font-size:15px;font-weight:600;text-transform:none;letter-spacing:0;margin:0 0 8px;color:var(--ink)}
.qtopic{border-top:1px solid var(--rule)}
.qtopic:last-child{border-bottom:1px solid var(--rule)}
.qtopic summary{display:flex;align-items:center;gap:14px;padding:16px 0;cursor:pointer;list-style:none;font-size:17px;font-weight:500;color:var(--ink)}
.qtopic summary::-webkit-details-marker{display:none}
.qtopic summary em{margin-left:auto;flex:none;white-space:nowrap;font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.qtopic summary::after{content:"";flex:none;width:22px;height:22px;box-shadow:inset 0 0 0 1.5px var(--ink);border-top-right-radius:7px;border-bottom-left-radius:7px;
  background:linear-gradient(var(--ink),var(--ink)) center/10px 2px no-repeat,linear-gradient(var(--ink),var(--ink)) center/2px 10px no-repeat;transition:background-size .2s ease,transform .2s ease}
.qtopic[open] summary::after{background-size:10px 2px,2px 0;background-color:var(--ink);background-image:linear-gradient(var(--paper),var(--paper)),linear-gradient(var(--paper),var(--paper))}
.qtopic summary:hover span{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--rule)}
.qtopic summary:focus-visible{outline:2.5px solid var(--signal);outline-offset:3px}
.qtopic .qs{margin:0 0 16px;padding-left:18px}
.qtopic .qs li{margin:7px 0;font-size:15.5px;line-height:1.5;color:var(--body)}
.qtopic .qnote{margin:0 0 18px;font-size:14px;line-height:1.5;color:var(--slate);max-width:62ch}
.days-rows .drow .db{transform-origin:0 50%;transform:scaleX(clamp(0,(var(--p) - var(--k)*.12)*2.6,1))}
.halves{display:grid;grid-template-columns:minmax(min-content,var(--dep-a,1fr)) minmax(min-content,var(--dep-b,1fr));gap:3px;margin:12px 0 14px}
.halves span{position:relative;height:30px;display:flex;align-items:center;padding:0 10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb,var(--paper) calc(var(--f)*100%),var(--slate));--f:clamp(0,var(--p)*2.2,1);background:var(--rule);overflow:hidden;z-index:0}
.halves span::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);transform-origin:0 50%;transform:scaleX(clamp(0,var(--p)*2.2,1))}
.halves span:last-child{--f:clamp(0,(var(--p) - .45)*2.2,1)}
.halves span::before{transform:scaleX(var(--f))!important}
.halves span:last-child::before{background:var(--signal)}
.halves span:first-child{border-bottom-left-radius:6px}.halves span:last-child{border-top-right-radius:6px}
.story-end{padding-top:0;background:var(--paper)}
#terms+.story-end{padding-top:clamp(40px,6vw,72px)}
.end-card{display:flex;flex-wrap:wrap;gap:24px 40px;align-items:center;justify-content:space-between;background:var(--ink);color:var(--paper);padding:clamp(28px,4vw,48px);border-top-right-radius:var(--r-card);border-bottom-left-radius:var(--r-card)}
.end-card h2{font-size:clamp(26px,3.2vw,40px);line-height:1.08;letter-spacing:-.02em;margin:0 0 12px;color:var(--paper);text-transform:none}
.end-card p{color:var(--on-ink);max-width:52ch;margin:0}
.end-card .btn:hover{background:var(--paper);color:var(--ink)}
.s1-reply .s1-from{color:#fff}
@media (max-width:560px),(pointer:coarse){
  .upclose a{line-height:44px;margin-block:-14px;background-position:0 30px}
}
/* A step link lands on its own step, below the header (the page’s scroll padding allows for
   that). On a phone the picture sits under the header too, so the step stops below it, its
   heading a little under the picture’s edge. */
.sstep{scroll-margin-top:24px}
@media (max-width:860px){
  .sstep{scroll-margin-top:calc(min(460px,100cqw*460/520) + 20px - 5vh)}
}

/* Less motion asked for: nothing plays as you scroll, so the tall steps and the sticky stage
   are put away. Each step shows its own still picture (story.js copies the stage into it,
   finished), beside the words on a wide screen and under them on a phone, and every step
   is at full strength. The room for the picture is kept from the start, so nothing moves
   when the script arrives. */
.sstill{display:none}
@media (prefers-reduced-motion:reduce){
  .story{--still-pad:clamp(32px,4.4vw,56px)}
  .story .story-stage{display:none}
  .story .story-grid{grid-template-columns:minmax(0,1fr)}
  .story .sstep,.story .sstep:first-child,.story .sstep:last-child{min-height:calc(460px + var(--still-pad)*2);padding:var(--still-pad) 0;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-rows:1fr auto auto 1fr;column-gap:clamp(28px,5vw,72px);border-top:1px solid rgba(255,255,255,.12);scroll-margin-top:0}
  .story .sstep:first-child{border-top:0}
  .story .sstep>h3{grid-area:2/1}
  .story .sstep>p{grid-area:3/1}
  .story .sstep:not(:has(.sstill))>*{grid-column:1/-1}
  .sstill{display:block;grid-area:1/2/5/3;position:relative;width:100%;max-width:520px;aspect-ratio:520/460;align-self:center}
  .sstill>.sstage{position:absolute;left:0;top:0}
  .story.on .sstep:not(.now) :is(p,.sstep-facts){opacity:1}
  .story.on .sstep:not(.now) h3{color:var(--paper)}
  .story.on .sstep h3::before{color:var(--signal-dark)}
}
@media (prefers-reduced-motion:reduce) and (max-width:860px){
  /* One column: the words, then the picture the full width of the column. */
  .story .sstep,.story .sstep:first-child,.story .sstep:last-child{display:block;position:relative;min-height:0;padding:var(--still-pad) 0 calc(min(460px,100cqw*460/520) + var(--still-pad) + 24px)}
  .sstill{position:absolute;left:0;bottom:var(--still-pad);max-width:none}
}

/* What we’ll ask on the call: the five that matter on the left, the rest beside them */
@media (min-width:980px){
  .q-cols{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(40px,5vw,72px);align-items:start;margin-top:8px}
  .q-cols .lede{margin-top:0}
  .q-cols .qfive,.q-cols .qtopics{max-width:none}
  .q-cols .qtopics{margin-top:4px;position:sticky;top:110px}
  .q-cols .qtopics-h{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);margin-bottom:12px}
}
.q-cols .qfive{padding-left:0}
main .q-cols .qfive li{text-align:left}
/* Phone type scale: this page’s share. The scale is described at the end of site.css. */
@media (max-width:520px){
  /* labels and tags */
  .halves span{font-size:12px}
  /* secondary text */
  .qtopic .qs li,.qtopic .qnote,.drow .dn,.drow .drop,.days-foot .drop,.days-total{font-size:15px}
  /* body text inside cards and lists */
  .sstep p,.qfive li{font-size:17px}
  /* sub-headings */
  .sstep h3{font-size:22px}
  /* section headings */
  .story-top h2,.end-card h2{font-size:28px}
}

/* Step numbers: written into each heading as a list would be, and named under the four-part bar. */
.story-steps{counter-reset:ss}
.sstep{counter-increment:ss}
.sstep h3{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:.4em;margin-top:0}
.sstep h3::before{content:counter(ss) ".";color:var(--signal-dark);font-variant-numeric:tabular-nums}
.st-mlab{position:absolute;left:0;right:0;top:12px;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;font-family:var(--mono);font-size:11px;line-height:1;letter-spacing:.1em;text-transform:uppercase;color:var(--paper);white-space:nowrap}
.st-mlab span{opacity:calc(.5 + min(var(--m,0),.02)*25)}
.st-mlab span:nth-child(1){--m:var(--p1)}.st-mlab span:nth-child(2){--m:var(--p2)}.st-mlab span:nth-child(3){--m:var(--p3)}.st-mlab span:nth-child(4){--m:var(--p4)}
@media (max-width:560px){.st-mlab{font-size:9.5px;letter-spacing:.06em}}

/* Step numbers: one size and one place for all four. Each sits on its own line above the
   step’s heading, its left edge on the text’s left edge, with the same gap under it every
   time. The step being read has a solid orange number; the others a quieter one. */
.sstep{position:relative}
.sstep h3{display:block;position:static}
.sstep h3::before{content:counter(ss);display:block;width:max-content;margin:0 0 .3em -.055em;font-size:clamp(64px,6.4vw,88px);line-height:.74;font-weight:600;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:rgba(232,89,12,.38);transition:color .35s ease}
.story.on .sstep.now h3::before,.sstep.now h3::before{color:var(--signal-dark)}
@media (max-width:860px){.sstep h3::before{font-size:52px}}
/* Seven questions, so each arrives a little after the one before and the last still lands. */
.qfive li{--t:clamp(0,(var(--p) - var(--k)*.1)*3,1)}
@media (max-width:520px){.qfive li{grid-template-columns:40px minmax(0,1fr);column-gap:12px}.qfive li::before{font-size:32px}.qfive .qk{font-size:12px;letter-spacing:.08em}}

/* On a phone the picture is drawn smaller (--sc), so its words are set larger to match:
   none ends up under 12px on the screen. */
@media (max-width:860px){
  .sstage{--f:calc(12px / var(--sc))}
  .sstage .st-mlab{letter-spacing:.04em}
  .sstage .st-mlab span{font-size:var(--f)!important}
  .sstage .s1-from{font-size:var(--f)!important;letter-spacing:.04em}
  .sstage .s1-line,.sstage .s1-lab,.sstage .s1-qs li,.sstage .s2-h span,.sstage .s2-tot span,.sstage .s2-tot s,.sstage .s3-pay,.sstage .s4-pay,.sstage .s3-url,.sstage .s4-snag span,.sstage .s4-care span:first-child{font-size:max(13px,var(--f))}
  .sstage .s3-weeks span,.sstage .s3-weeks::after{font-size:max(11px,var(--f))!important}
  .sstage .s1-reply span:last-child,.sstage .s3-pay b,.sstage .s4-pay b,.sstage .s4-live,.sstage .s2-stamp{font-size:max(15px,var(--f))}
  .sstage .s1-mail b{font-size:max(17px,var(--f))}
  .sstage .st-mlab{top:10px}
  .sstage .sc{top:34px}
  .sstage .s1-mail{width:440px;top:6px}
  .sstage .s1-reply{width:340px;top:134px}
  .sstage .s1-call{top:226px}
  .sstage .s1-qs{top:286px;gap:7px}
  .sstage .s1-qs li{padding:6px 10px}
  .sstage .s2-stamp{top:368px}
  .sstage .s3-line{top:30px}
  .sstage .fb{top:23px}
  .sstage .s3-weeks::after{top:48px}
  .sstage .s2-h{flex-wrap:wrap;gap:0 12px}
  .sstage .s2-bar{font-size:max(13.5px,var(--f));grid-template-columns:8em 1fr 3em}
  .sstage .s2-bar em{font-size:max(12px,var(--f))}
  .sstage .s3-pay,.sstage .s4-pay{grid-template-columns:4.6em 1fr 3.4em}
}
/* Build: the page is sketched in pencil before it is built. A faint construction line runs
   past each block’s corner, then its outline is drawn on in two uneven passes, one just
   behind the other (story.js makes the paths); the block is hatched in and its measurement
   marked in the margin. At launch the pencil work fades and the blocks take their colours. */
.s3-win{--fade:clamp(0,(var(--p4) - .1)*4,1)}
.s3-page{position:relative;grid-template-rows:18px 76px 54px 22px;padding:30px 32px 20px;background:var(--white)}
.s3-page .b,.s3-sk path,.s3-dims>span{--t:clamp(0,(var(--p3) - .1 - var(--k)*.13)/.13,1);--c:clamp(0,(var(--p4) - .25 - var(--k)*.05)*5,1)}
.s3-page .b{position:relative;opacity:clamp(0,(var(--t) - .82)*6,1);transform:none;clip-path:none;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,#C9C6BE calc(var(--c)*100%),transparent)}
.s3-page .b::after{content:"";position:absolute;inset:0;pointer-events:none;border-top-right-radius:inherit;border-bottom-left-radius:inherit;background:repeating-linear-gradient(135deg,rgba(18,22,27,.16) 0 1px,transparent 1px 6px);opacity:calc(1 - var(--c))}
.s3-sk{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
/* Pencil: graphite, as the other pencil drawings on the site; the measurements stay signal. */
.s3-sk path{fill:none;stroke:#2B3038;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:calc(1 - var(--t));opacity:calc((1 - var(--c))*.85)}
.s3-sk path.o2{stroke-width:1;stroke-dashoffset:calc(1 - clamp(0,(var(--t) - .18)/.82,1));opacity:calc((1 - var(--c))*.45)}
.s3-sk path.g{stroke:#9A9EA5;stroke-width:.8;stroke-dashoffset:calc(1 - min(1,var(--t)*1.6));opacity:calc((1 - var(--c))*.7)}
/* The measurements, in the page’s margins: the width across the top, the hero’s and the
   cards’ heights down the left, each marked once its block is drawn. */
.s3-dims{position:absolute;inset:0;z-index:2;pointer-events:none;font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--signal);opacity:calc(1 - var(--fade))}
.s3-dims>span{position:absolute;display:flex;align-items:center;justify-content:center;opacity:clamp(0,(var(--t) - .7)*4,1)}
.s3-dims>span::before{content:"";position:absolute;background:var(--signal)}
.s3-dims b{position:relative;font-weight:400;background:var(--white);padding:0 5px;line-height:1}
.s3-dims .d-w{left:32px;right:32px;top:10px;height:9px;border-inline:1px solid var(--signal)}
.s3-dims .d-w::before{left:0;right:0;top:4px;height:1px}
.s3-dims .d-h,.s3-dims .d-g{left:10px;width:9px;border-block:1px solid var(--signal)}
.s3-dims .d-h{top:58px;height:76px}.s3-dims .d-g{top:144px;height:54px}
.s3-dims .d-h::before,.s3-dims .d-g::before{top:0;bottom:0;left:4px;width:1px}
.s3-dims .d-h b,.s3-dims .d-g b{transform:rotate(-90deg);padding:0 4px;white-space:nowrap}

@media (max-width:860px){.sstage .s3-dims b{font-size:calc(var(--f) * .85)}}
@media (prefers-reduced-motion:reduce){.s3-sk path{transition:none}}
/* What we talk about on the call: a picture of the call, its topics coming up in turn. */
.q-more{margin-top:14px;color:var(--body);text-align:left}
/* An ink card, like the call in the story above: the one dark thing on the white ground. */
.qcall{margin:0;padding:22px;background:var(--ink);color:var(--paper);border-top-right-radius:var(--r-card);border-bottom-left-radius:var(--r-card)}
.qcall-top{display:flex;align-items:center;gap:10px;font-size:15px}
.qcall-live{width:10px;height:10px;background:var(--signal-dark);border-top-right-radius:3px;border-bottom-left-radius:3px}
.qcall-t{margin-left:auto;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--on-ink-dim)}
.qcall-bar{height:4px;margin:14px 0 16px;background:var(--ink-hi);overflow:hidden}
.qcall-bar i{display:block;height:100%;width:100%;background:var(--signal-dark);transform-origin:0 50%}
.qcall-topics{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.qcall-topics li{display:flex;align-items:center;gap:10px;min-width:0;padding:12px 13px;background:var(--ink-raised);color:var(--paper);font-size:15px;font-weight:500;line-height:1.3;border-top-right-radius:10px;border-bottom-left-radius:10px}
.qcall-topics li:last-child{grid-column:1/-1}
.qcall-topics svg{flex:none;width:22px;height:22px;fill:none;stroke:var(--signal-dark);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.qcall figcaption{margin-top:14px;font-size:14px;color:var(--on-ink-dim);text-align:left}
/* On a wide screen the call runs the width of the page under the words, its topics laid
   along the 20 minutes in the order they usually come up. */
@media (min-width:980px){
  #questions .q-cols{display:block;margin-top:8px}
  #questions .q-main{max-width:720px}
  #questions .qcall{margin-top:clamp(32px,4vw,48px);padding:24px 24px 20px}
  #questions .qcall-topics{grid-template-columns:repeat(7,minmax(0,1fr))}
  #questions .qcall-topics li{flex-direction:column;align-items:flex-start;justify-content:space-between;gap:18px;min-height:96px;padding:14px}
  #questions .qcall-topics li:last-child{grid-column:auto}
  #questions .q-more{max-width:none}
}
.qcall-topics li span{text-align:left;hyphens:manual}
@media (max-width:979px){.qcall{margin-top:28px}}
@media (prefers-reduced-motion:no-preference){
  .rv .qcall:not(.in) .qcall-bar i{transform:scaleX(0)}
  .qcall .qcall-bar i{transition:transform 3s linear .3s}
  .rv .qcall:not(.in) .qcall-topics li{opacity:0;transform:translateY(8px)}
  .qcall .qcall-topics li{transition:opacity .4s ease,transform .4s ease;transition-delay:calc(.35s + var(--k) * .38s)}
}
@media (max-width:520px){.qcall{padding:16px}.qcall-topics{grid-template-columns:minmax(0,1fr)}}
/* The terms in short, as cards: payment across the top with its pictures, then one card each. */
#terms .table-wrap{overflow:visible}
#terms table{display:block;border:0;margin:0}
#terms tbody{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#terms tr{display:flex;flex-direction:column;gap:8px;padding:18px 18px 20px;background:var(--paper);border:0;border-top-right-radius:var(--r-card);border-bottom-left-radius:var(--r-card);min-width:0}
#terms tr:first-child,#terms tr:nth-last-child(2){grid-column:1/-1}
#terms th,#terms td{display:block;padding:0;border:0;text-align:left}
/* Each heading set as a label, as labels are everywhere else on the site. */
#terms th{font-family:var(--mono);font-size:12px;font-weight:400;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
#terms td{font-size:15.5px;line-height:1.55;color:var(--body);hyphens:manual}
.tplans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:12px}
.tplans>span{display:grid;gap:2px;padding:10px 12px;background:var(--white);border-top-right-radius:8px;border-bottom-left-radius:8px}
.tplans small{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.tplans b{font-size:20px;font-weight:600;color:var(--ink)}
.tplans b::after{content:" a month";font-size:12px;font-weight:400;color:var(--slate)}
@media (max-width:620px){#terms tbody{grid-template-columns:minmax(0,1fr)}.tplans b{font-size:18px}}

/* The terms’ after-launch card: the plans start a new line of their own. */
.tp-gap{display:block;height:10px}
/* The call, bolder: a thicker 20-minute bar, the heading at heading size, each topic a
   solid tile with its icon in a signal block, the brand’s corners on every shape. */
.qcall{padding:clamp(20px,2.6vw,32px)}
.qcall-top{font-size:clamp(20px,2vw,26px);font-weight:600;letter-spacing:-.01em}
.qcall-live{width:14px;height:14px;border-top-right-radius:4px;border-bottom-left-radius:4px}
.qcall-t{font-size:clamp(18px,1.8vw,24px);letter-spacing:0;color:var(--signal-dark)}
.qcall-bar{height:10px;margin:18px 0 20px;border-top-right-radius:4px;border-bottom-left-radius:4px}
.qcall-topics{gap:10px}
.qcall-topics li{gap:14px;padding:14px;font-size:17px;font-weight:600;border-top-right-radius:14px;border-bottom-left-radius:14px}
.qcall-topics svg{width:44px;height:44px;padding:10px;background:var(--signal-dark);stroke:var(--paper);stroke-width:2.4;border-top-right-radius:10px;border-bottom-left-radius:10px}
.qcall figcaption{margin-top:18px;font-size:15px}
@media (min-width:980px){
  #questions .qcall{padding:32px 32px 26px}
  #questions .qcall-topics li{gap:22px;min-height:150px;padding:16px}
}
@media (max-width:520px){.qcall{padding:18px}.qcall-topics li{font-size:16px}.qcall-topics svg{width:40px;height:40px;padding:9px}}