/* Pocket Workshop homepage. Scoped to .pw-home so it cannot leak into other pages.
   Uses the design system token names (tokens/colors.css, tokens/typography.css) with the same values as fallbacks.
   If the site already loads those tokens, nothing here needs changing. Do not add new colours. */

.pw-home{
  --h-ink:var(--pw-ink,#221F20);
  --h-magenta:var(--pw-magenta,#FF0050);
  --h-magenta-600:var(--magenta-600,#E50048);
  --h-magenta-text:#D1003C;  /* small magenta text on white or Paper only (Jason, 29 Oct): 5.56:1 on white, 4.97:1 on Paper. Not on ink (2.94:1). Buttons, the mark and "Yes." stay --h-magenta */
  --h-white:var(--pw-white,#FFFFFF);
  --h-paper:var(--pw-paper,#F2F2F2);
  --h-ink-800:var(--ink-800,#383435);
  --h-ink-700:var(--ink-700,#514D4E);
  --h-ink-600:var(--ink-600,#6B6768);
  --h-ink-500:var(--ink-500,#8A8687);
  --h-ink-400:var(--ink-400,#ABA8A9);
  --h-ink-300:var(--ink-300,#C9C7C7);
  --h-line:var(--ink-200,#E1E0E0);
  --h-ink-100:var(--ink-100,#ECEBEB);
  --h-on-ink-line:rgba(255,255,255,.16);
  --h-reel-band:#F3F2F2;  /* the reel's centre row (landing hero brief) */
  --h-reel-far:#BDB9BA;  /* the reel's far rows (landing hero brief); under AA contrast, see the reel */
  --h-font:var(--font-core,"Archivo",Arial,Helvetica,sans-serif);
  --h-pad:clamp(20px,6vw,112px);
  font-family:var(--h-font);
  color:var(--h-ink);
  background:var(--h-white);
}
.pw-home *,.pw-home *::before,.pw-home *::after{box-sizing:border-box}
body.pw-home{margin:0}
/* The sign-in box (header.js) is added to this page but styled by account.css,
   so these resets skip it; :not() sits inside :where() to keep them weightless. */
.pw-home :where(:is(h1,h2,h3,p):not(.aw-signin-box *)){margin:0}
.pw-home :where(img){display:block;max-width:100%;height:auto}
.pw-home :where(a:not(.aw-signin-box *, .pw-act)){color:inherit;text-decoration:none;border-bottom:0}  /* base.css underlines every link; a shared button (.pw-act) keeps its own colours and border */
.pw-home :where(a:not(.aw-signin-box *, .pw-act)):hover{color:inherit}
.pw-home a:focus-visible,.pw-home button:focus-visible{outline:2px solid var(--h-magenta);outline-offset:2px}

.pw-wrap{padding-left:var(--h-pad);padding-right:var(--h-pad)}
.pw-inner{max-width:1320px;margin:0 auto}
.pw-label{font-weight:700;font-size:12px;line-height:1.2;letter-spacing:.16em;text-transform:uppercase}

/* Corner-mark button (home rebuild v4 brief, section 3): the one sign on the page that says "you can press this".
   A 2px ink border and a magenta corner mark at the top right, overhanging the border by 2px. The mark is the
   brief's polygon (331.09,512 512,331.1 512,0 180.91,0 0,180.9 331.09,180.9 on a 512 box) as a clip-path on ::after
   rather than an inline SVG, because header.js swaps the header button's label with textContent and would wipe an
   SVG. The same rule marks the step headers in How it works: one mark for everything you can press.
   48px tall, 56px on touch screens.
   The mark is the brand, not an interaction signal (interaction brief, Stage 3 decision 1). The button's level is the
   shared one in the markup (interaction.css): .pw-act--main (ink), .pw-act--secondary (white, ink border) or
   .pw-act--inverse (white, on the ink band); its colours, hover, pressed, focus and disabled are the shared ones.
   Kept here: the size, padding, type size, the 2px border (the mark sits on it) and the mark, which still lifts on
   hover. Weight 500, as every shared button. */
.pw-home{--h-ease:var(--ease-standard,cubic-bezier(.2,0,.2,1));--h-off-mark:#A3A0A1}
.pw-mark-btn{--mark:22px;position:relative;display:inline-flex;align-items:center;justify-content:flex-start;height:48px;padding:0 40px 0 24px;border-width:2px;border-style:solid;font-family:var(--h-font);font-weight:500;font-size:16px;line-height:1;letter-spacing:.01em;white-space:nowrap;cursor:pointer;transition:background-color 140ms var(--h-ease),border-color 140ms var(--h-ease),color 140ms var(--h-ease),transform 80ms var(--h-ease)}
.pw-mark-btn::after,.pw-step__head::after{content:"";position:absolute;top:-2px;right:-2px;width:var(--mark,22px);height:var(--mark,22px);background:var(--h-magenta);clip-path:polygon(64.666% 100%,100% 64.668%,100% 0,35.334% 0,0 35.332%,64.666% 35.332%);pointer-events:none;transition:transform 140ms var(--h-ease)}
/* The mark lifts on hover, alongside the shared colour change. */
@media (hover:hover){
  .pw-home .pw-mark-btn:not(:disabled):hover::after,.pw-home .pw-step__head:hover::after{transform:translate(4px,-4px)}
}
.pw-home .pw-mark-btn:active::after,.pw-home .pw-step__head:active::after{transform:none}
.pw-mark-btn:disabled::after{background:var(--h-off-mark)}
@media (pointer:coarse){
  .pw-mark-btn{--mark:26px;height:56px;padding:0 46px 0 24px;font-size:17px}
  .aw-header .pw-mark-btn{--mark:22px;height:48px;padding:0 40px 0 24px;font-size:16px}  /* the header keeps 48px on touch too (brief section 4) */
}
@media (prefers-reduced-motion:reduce){
  .pw-mark-btn,.pw-mark-btn::after,.pw-step__head::after,.pw-step__chev{transition:none}
}


/* Header (Jason, 29 Oct): the signed-in pages' shared header (.aw-header in account.css), sticky through
   aw-header--sticky: the shared logo token (144px, 168px from 901px), then Log in / Sign up ("My account" when
   signed in). Its column is the signed-in pages' (1120px; 16px sides, 48px from 901px, as .aw in account.css), so
   the logo sits exactly where it does on /account; only the header reads these, the page below keeps its 1320px.
   --pw-header-h is its height without the notch inset (the poster subtracts that itself): phones 8px + the 48px
   button + 8px + the 1px line = 65px; from 901px the signed-in header's 81px, flush, the logo centred as there.
   Above the reel's spin button. */
.pw-home{--aw-col:1120px;--aw-col-pad:16px;--aw-pad:var(--h-pad);--pw-header-h:65px}
.pw-home .aw-header{min-height:calc(65px + env(safe-area-inset-top,0px));padding-top:calc(8px + env(safe-area-inset-top,0px));padding-bottom:8px;background:var(--h-white)}  /* clear of the notch (viewport-fit=cover) */
.pw-home .aw-brand{align-items:center;min-height:44px}  /* a 44px tap target (brief section 14) */
.aw-header .pw-mark-btn{min-width:185px}  /* fits "Log in / Sign up", so "My account" keeps the same box */
@media (min-width:901px){
  .pw-home{--aw-col-pad:48px;--pw-header-h:81px}
  .pw-home .aw-header{min-height:calc(81px + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px);padding-bottom:0}
}
/* Next moves focus to the following step's header: account.css's scroll padding keeps it below the sticky header;
   this adds room for the focus ring outside it (2px ring, 2px offset) and the notch. */
.pw-home .pw-step__head{scroll-margin-top:calc(8px + env(safe-area-inset-top,0px))}

/* Hero: the poster (the first screen, home rebuild v4 brief section 5). Exactly the visible screen below the header,
   ending on the promise line. The image is the flexible part: it takes the height the text leaves, down to 120px.
   The same visible gap (--g) sits above the department line, between it and the image, between the image and the
   reel's first grey word (less the 5px of empty drum above it) and between "Yes." and the promise line (less the
   14px of empty line box). The text blocks scale together by --z with CSS zoom, so the reel keeps its proportions:
   reel.js works in px. --z and --g go by the window height on every device. */
.pw-home{--z:1;--g:32px}
@media (max-height:699.98px){.pw-home{--z:.8;--g:20px}}
@media (min-height:1200px){.pw-home{--z:1.3;--g:40px}}
.pw-poster{display:flex;flex-direction:column;align-items:center;height:calc(100vh - var(--pw-header-h) - env(safe-area-inset-top,0px));height:calc(100svh - var(--pw-header-h) - env(safe-area-inset-top,0px));padding:var(--g) 0;text-align:center;color:var(--h-ink)}
.pw-poster__z{flex:0 0 auto;zoom:var(--z);max-width:960px;padding:0 24px}
.pw-poster__dept{font-weight:800;font-size:27px;line-height:32px;letter-spacing:-0.3px}
.pw-poster__media{position:relative;align-self:stretch;flex:1 1 auto;min-height:120px;margin:var(--g) 0 calc(var(--g) - 5px * var(--z))}
.pw-poster__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.pw-poster__tag{position:absolute;z-index:1;left:0;bottom:0;padding:7px 10px;background:var(--h-ink);color:var(--h-white);font-weight:700;font-size:12px;line-height:1.2;text-align:left}
.pw-hero__yes{font-weight:900;font-size:108px;line-height:90px;letter-spacing:-4px;color:var(--h-magenta)}  /* no pull-up: the reel's last grey word sits as far above "Yes." as its first sits below "Can you do the" */
.pw-poster__gap{flex:0 0 auto;height:calc(var(--g) - 14px * var(--z))}
.pw-poster__promise{font-weight:700;font-size:25px;line-height:30px}
.pw-reel-on .pw-hero__yes:not(.is-shown){visibility:hidden}  /* space kept, so nothing jumps when it cuts in */

/* The reel (landing hero brief): words on a drum, exactly as wide as its longest word at the centre row's 32px, so
   "too?" never moves. Every word sits in the same grid cell, hidden or not, so the widest one sets the width;
   transforms do not count, so the turning words do not change it. Each word is centred in the wheel. 166px tall
   (five rows) at every size, scaled with the poster by --z; the top and bottom 10px fade, so words leave and arrive
   softly and never touch the line above. Without JavaScript the five faces with data-row show the final image,
   at faceAt's values for REEL.stepDeg and REEL.radiusPx (a test checks); reel.js then places every face each
   frame, with these greys from centre to far.
   The far grey is under AA contrast: the reel is decorative and hidden from screen readers (the h1 says it). */
.pw-reel{position:relative;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.pw-reel ::selection{background:transparent}  /* the reel cannot be selected: a magenta selection mark (base.css ::selection) would ride on the turning words */
.pw-reel__line{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;column-gap:10px;font-weight:800;color:var(--h-ink)}  /* phones: "“Can you do the" on a line of its own */
.pw-reel__lead{font-size:32px;line-height:50px}
.pw-reel__row{display:flex;align-items:center;gap:10px}
.pw-reel__slot{--reel-tone-0:var(--h-ink);--reel-tone-1:var(--h-ink-500);--reel-tone-2:var(--h-reel-far);position:relative;flex:none;height:166px;overflow:hidden;font-size:32px}
.pw-reel__band{position:absolute;left:0;right:0;top:50%;height:50px;margin-top:-25px;background:var(--h-reel-band);border-top:3px solid var(--h-magenta);border-bottom:3px solid var(--h-magenta)}  /* fixed to the window: it does not turn */
.pw-reel__lens{position:relative;display:grid;align-items:center;height:100%;-webkit-mask-image:linear-gradient(transparent,#000 10px,#000 calc(100% - 10px),transparent);mask-image:linear-gradient(transparent,#000 10px,#000 calc(100% - 10px),transparent)}  /* positioned, so the words sit over the band */
.pw-reel__face{grid-area:1/1;height:50px;line-height:50px;text-align:center;white-space:nowrap;visibility:hidden}
.pw-reel__face[data-row]{visibility:visible}
.pw-reel__face[data-row="0"]{color:var(--reel-tone-0)}
.pw-reel__face[data-row="-1"]{transform:translateY(-41.38px) scale(.9316,.829);color:var(--reel-tone-1)}
.pw-reel__face[data-row="1"]{transform:translateY(41.38px) scale(.9316,.829);color:var(--reel-tone-1)}
.pw-reel__face[data-row="-2"]{transform:translateY(-68.61px) scale(.7498,.3746);opacity:.749;color:var(--reel-tone-2)}
.pw-reel__face[data-row="2"]{transform:translateY(68.61px) scale(.7498,.3746);opacity:.749;color:var(--reel-tone-2)}
.pw-reel__tail{font-size:32px;line-height:50px}
@media (min-width:768px){
  .pw-reel__line{flex-wrap:nowrap}  /* iPad and desktop: the reel on one line */
}
/* reel.js places the button over the window plus --reel-hit (0.35em) all round; the focus ring sits 2px outside the window */
.pw-reel__btn{position:absolute;z-index:3;margin:0;padding:0;border:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pw-home .pw-reel__btn:focus-visible{outline:2px solid var(--h-magenta);outline-offset:calc(2px - var(--reel-hit,0px))}
/* How it works (home rebuild v4 brief, section 6). Paper. Phone first: an accordion, each header a white card with a
   2px ink border and the corner mark, the sketch square on the left at half the card's width, then the number and
   heading; its panel hangs under it inside the same border. Cards 12px apart, 16px from the screen edges; from
   768px the accordion sits in a centred 560px column.
   From 1024px (and only with JavaScript, html.pw-js): five cards in a row, 24px apart and joined by a 2px line
   through the sketches, and the open step's panel across all five columns underneath (grid row 2).
   An open header turns ink with white text. Hover (pointer devices): #ECEBEB and the mark lifts.
   The sketches sit on white: the mock-ups' cream (#FBF8F3) is not a token. */
.pw-steps{background:var(--h-paper);padding-top:48px;padding-bottom:56px}
.pw-steps .pw-label{color:var(--h-ink-600)}
.pw-steps .pw-h2{margin-top:16px;max-width:20em}
.pw-steps__sub{margin-top:12px;font-weight:300;font-size:17px;line-height:1.45}
.pw-steps__list{display:flex;flex-direction:column;margin:28px calc(16px - var(--h-pad)) 0}
.pw-step__h{display:flex;margin:12px 0 0;font:inherit}
.pw-step__h:first-child{margin-top:0}
/* Step headers are down-chevron rows (.pw-row): the shared hover, pressed and focus. They sit on the Paper steps band,
   so they hover one step darker than Paper. The chevron flips when the step is open. */
.pw-step__head{position:relative;display:flex;align-items:center;gap:14px;width:100%;margin:0;padding:0 28px 0 0;border:2px solid var(--h-ink);background:var(--h-white);color:var(--h-ink);font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color 140ms var(--h-ease),color 140ms var(--h-ease),transform 80ms var(--h-ease);--act-row-hover:var(--act-row-hover-on-paper)}
.pw-step__head[aria-expanded="true"]{background:var(--h-ink);color:var(--h-white)}
.pw-step__media{position:relative;flex:0 0 min(50%,240px);align-self:stretch;aspect-ratio:1/1;background:var(--h-white);border-right:2px solid var(--h-ink)}
.pw-step__media img{width:100%;height:100%;object-fit:cover}
.pw-step__main{display:flex;flex-direction:column;gap:8px;min-width:0;padding:14px 0}
.pw-step__num{font-weight:700;font-size:28px;line-height:1}
.pw-step__title{font-weight:700;font-size:16px;line-height:1.25}
/* The chevron sits in the 28px gutter at the right (the mark has its top), at the bottom: it takes none of the title's width. */
.pw-step__chev{position:absolute;right:2px;bottom:10px;transition:transform 140ms var(--h-ease)}
.pw-step__head[aria-expanded="true"] .pw-step__chev{transform:rotate(180deg)}

/* Panels: white inside the header's border. Grey notes are Paper; bullets are 8px ink squares; lists have hairlines. */
.pw-step__panel{display:flex;flex-direction:column;gap:14px;padding:20px 16px 18px;border:2px solid var(--h-ink);border-top:0;background:var(--h-white)}
.pw-js .pw-step__panel:not(.is-open){display:none}
.pw-step__col{display:contents}  /* phones: one column, in source order */
.pw-step__lead{font-weight:700;font-size:17px;line-height:1.4}
.pw-step__p{font-weight:300;font-size:16px;line-height:1.5;color:var(--h-ink-800)}
.pw-step__fig{margin:4px 0 0}
.pw-step__fig img{width:100%;height:auto}
.pw-step__fig--sheet img{box-shadow:0 1px 2px rgba(34,31,32,.10),0 10px 28px -8px rgba(34,31,32,.28)}  /* a sheet of paper: no border */
.pw-step__cap{margin-top:8px;font-weight:300;font-size:14px;line-height:1.4;color:var(--h-ink-600)}
.pw-step__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--h-line)}
.pw-step__list li{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--h-line);font-weight:300;font-size:16px;line-height:1.45;color:var(--h-ink-800)}
.pw-step__list li::before{content:"";flex:0 0 8px;height:8px;margin-top:8px;background:var(--h-ink)}
.pw-step__list--num li::before{content:none}
.pw-step__list b{font-weight:700;color:var(--h-ink)}
.pw-step__n{flex:0 0 26px;display:flex;align-items:center;justify-content:center;height:26px;background:var(--h-ink);color:var(--h-white);font-weight:700;font-size:14px;line-height:1}
.pw-step__note{padding:14px 16px;background:var(--h-paper);font-weight:300;font-size:16px;line-height:1.5}
.pw-step__contact{font-weight:300;font-size:14px;line-height:1.5;color:var(--h-ink-600);text-align:center}
.pw-step__panel .pw-mark-btn{width:100%;margin-top:4px}
.pw-step__pack{border:1px solid var(--h-line)}
.pw-step__pack-label,.pw-step__box-label{font-weight:700;font-size:12px;line-height:1.2;letter-spacing:.16em;text-transform:uppercase;color:var(--h-ink-600)}
.pw-step__pack-label{padding:12px 14px;border-bottom:1px solid var(--h-line)}
.pw-step__pack-list{margin:0}
.pw-step__pack-list div{display:flex;justify-content:space-between;gap:12px;padding:11px 14px;border-top:1px solid var(--h-line);font-size:15px;line-height:1.35}
.pw-step__pack-list div:first-child{border-top:0}
.pw-step__pack-list dt{font-weight:700}
.pw-step__pack-list dd{margin:0;font-weight:300;color:var(--h-ink-600);text-align:right}
.pw-step__box{display:flex;flex-direction:column;gap:8px;padding:16px 20px;border:1px solid var(--h-line)}
.pw-step__box-label + .pw-step__p + .pw-step__box-label{margin-top:8px}
.pw-step__strong{font-weight:700;font-size:16px;line-height:1.45}
/* Step 5: the text, then the two photographs (4:3, cropped to cover), stacked on phones, side by side from 768px.
   Their tags match the hero's. */
.pw-step__pair{display:grid;gap:16px}
.pw-step__photo{position:relative;margin:0}
.pw-step__photo img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.pw-step__tag{position:absolute;left:0;bottom:0;padding:7px 12px;background:var(--h-ink);color:var(--h-white);font-weight:700;font-size:13px;line-height:1.2;letter-spacing:.02em}

/* Step 4's illustration: a factory account page on a phone (300px, ink bezel, rounded: the page's one exception to
   square corners). Deliberately unbranded, in a neutral grey and blue that is not ours, so it reads as someone
   else's page. Arial, for the same reason. These colours are used nowhere else. */
.pw-fx{--fx-screen:#F4F5F7;--fx-text:#2B2F36;--fx-muted:#6A707A;--fx-dash:#9AA0AA;--fx-line:#D5D8DE;--fx-tag:#E6ECF5;--fx-blue:#2B4A7A;display:flex;flex-direction:column;align-items:center;gap:12px}
.pw-fx__phone{width:300px;max-width:100%;padding:10px;border-radius:36px;background:var(--h-ink);box-shadow:0 1px 2px rgba(34,31,32,.10),0 12px 30px -10px rgba(34,31,32,.35)}
.pw-fx__screen{display:flex;flex-direction:column;gap:12px;min-height:540px;padding:18px 14px;border-radius:27px;background:var(--fx-screen);font-family:Arial,Helvetica,sans-serif;color:var(--fx-text);text-align:left}
.pw-fx__top{display:flex;align-items:center;justify-content:space-between}
.pw-fx__logo{display:inline-flex;align-items:center;height:26px;padding:0 10px;border:1px dashed var(--fx-dash);font-size:11px;color:var(--fx-muted)}
.pw-fx__acct{font-size:12px;color:var(--fx-muted)}
.pw-fx__tabs{display:flex;border-bottom:1px solid var(--fx-line)}
.pw-fx__tabs span{padding:8px 12px;font-size:13px;color:var(--fx-muted)}
.pw-fx__tabs .is-on{color:var(--fx-text);font-weight:700;box-shadow:inset 0 -2px 0 var(--fx-text)}
.pw-fx__card{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid var(--fx-line);border-radius:6px;background:var(--h-white)}
.pw-fx__card--dim{opacity:.6}
.pw-fx__job{font-size:15px;font-weight:700}
.pw-fx__dl{display:flex;flex-direction:column;gap:5px;margin:0}
.pw-fx__dl div{display:flex;justify-content:space-between;gap:10px;font-size:12px;line-height:1.3}
.pw-fx__dl dt{color:var(--fx-muted)}
.pw-fx__dl dd{margin:0;font-weight:700;text-align:right}
.pw-fx__tag{display:inline-block;padding:2px 6px;border-radius:3px;background:var(--fx-tag);color:var(--fx-blue);font-size:11px}
.pw-fx__hide{display:inline-block;width:64px;height:10px;border-radius:2px;background:var(--fx-line);vertical-align:middle}  /* the total: a grey bar, never a figure */
.pw-fx__link{font-size:12px;color:var(--fx-blue);text-decoration:underline}
.pw-fx .pw-step__cap{max-width:320px;text-align:center}

@media (max-width:1023.98px){
  .pw-step__panel--fig-first .pw-step__lead,.pw-step__panel--fig-first .pw-step__lead + .pw-step__p{order:-2}
  .pw-step__panel--fig-first .pw-step__fig{order:-1}  /* the accordion: steps 2 and 4 put the picture under the intro, before the list */
}
@media (prefers-reduced-motion:reduce){
  .pw-step__head{transition:none}
}

@media (min-width:768px){
  .pw-steps{padding-top:96px;padding-bottom:96px}
  .pw-steps .pw-h2{margin-top:20px}
  .pw-steps__sub{margin-top:16px;font-size:19px;line-height:1.5}
  .pw-steps__list{margin:48px 0 0}
}
/* 768 to 1023px (Jason, 29 Oct): still the accordion, in a centred column, so the half-width sketch stays small */
@media (min-width:768px) and (max-width:1023.98px){
  .pw-steps .pw-inner{max-width:560px}
}
/* From 1024px (Jason, 29 Oct; the brief says 768px, where the cards were 116px wide and the headings spilled out):
   five cards in a row and the open panel across all five columns */
@media (min-width:1024px){
  .pw-js .pw-steps__list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}
  .pw-js .pw-step__h{margin:0}
  .pw-js .pw-step__head{flex-direction:column;align-items:stretch;gap:0;padding:0}
  .pw-js .pw-step__media{flex:none;align-self:auto;border-right:0;border-bottom:2px solid var(--h-ink)}
  .pw-js .pw-step__h:nth-of-type(-n+4) .pw-step__media::after{content:"";position:absolute;top:50%;left:calc(100% + 2px);width:24px;height:2px;background:var(--h-ink-300)}  /* the line to the next card */
  .pw-js .pw-step__main{gap:10px;padding:18px 44px 22px 20px}
  .pw-js .pw-step__chev{position:absolute;right:14px;bottom:20px}
  .pw-js .pw-step__title{font-size:17px;line-height:1.3}
  .pw-js .pw-step__panel{grid-column:1/-1;grid-row:2;border-top:2px solid var(--h-ink)}
  .pw-step__panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:56px;padding:40px}
  .pw-step__col{display:flex;flex-direction:column;gap:16px}
  .pw-step__lead{font-size:26px;line-height:1.2;letter-spacing:-0.01em}
  .pw-step__p{font-size:18px;line-height:1.55}
  .pw-step__cap{font-size:15px}
  .pw-step__list li{gap:14px;font-size:17px}
  .pw-step__list li::before{margin-top:9px}
  .pw-step__note{padding:16px 20px;font-size:18px}
  .pw-step__contact{font-size:15px;text-align:left}
  .pw-step__panel .pw-mark-btn{align-self:flex-start;width:auto;margin-top:8px}
  .pw-step__pack-label{padding:12px 16px}
  .pw-step__pack-list div{gap:16px;padding:11px 16px;font-size:16px}
  .pw-step__fig--sheet img{width:auto;max-width:100%;max-height:560px;margin:0 auto}  /* capped, so step 2 opens to about the others' height */
  .pw-step__strong{font-size:18px}
  .pw-step__panel--stack{grid-template-columns:minmax(0,1fr);gap:28px}
  .pw-step__text{max-width:44em}
  .pw-step__pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
}

/* How it works' phone and wide copy (below and from 1024px) */
@media (max-width:1023.98px){.pw-home .pw-steps-wide{display:none}}
@media (min-width:1024px){.pw-home .pw-steps-narrow{display:none}}

/* Section headings: 30px on phones, up to 48px */
.pw-h2{font-weight:700;font-size:clamp(30px,3.4vw,48px);line-height:1.04;letter-spacing:-0.015em}

/* Information sections (home rebuild v4 brief, sections 7 to 9): Who uses us, About us, When you create an account.
   A label, heading and subheading, then cards in a hairline grid (1px #E1E0E0 lines through a 1px gap). They are
   information, not links: no corner marks and no hover state. Phone first; from 768px the brief's desktop sizes. */
.pw-info{padding-top:56px;padding-bottom:64px}
.pw-info--paper{background:var(--h-paper)}
.pw-info .pw-label{color:var(--h-ink-600)}
.pw-info .pw-h2{margin-top:16px;max-width:18em}
.pw-info__sub{margin-top:12px;font-weight:300;font-size:17px;line-height:1.45;color:var(--h-ink-800)}
.pw-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;margin-top:28px;background:var(--h-line);border:1px solid var(--h-line)}

/* Who uses us. The labels are the darker text magenta: #FF0050 at 12px is only 3.91:1 on white. */
.pw-who__card{display:flex;flex-direction:column;gap:8px;padding:22px 20px;background:var(--h-white)}
.pw-who__for{font-weight:700;font-size:12px;line-height:1.2;letter-spacing:.16em;text-transform:uppercase;color:var(--h-magenta-text)}
.pw-who__t{font-weight:700;font-size:22px;line-height:1.15;letter-spacing:-0.01em}
.pw-who__dep{display:block;margin-top:4px;font-weight:300;font-size:15px;letter-spacing:0;color:var(--h-ink-600)}  /* "(factory-dependent)", on a line of its own */
.pw-who__p{font-weight:300;font-size:16px;line-height:1.5;color:var(--h-ink-800)}
.pw-who__note{margin-top:20px;padding:14px 16px;background:var(--h-paper);font-weight:300;font-size:15px;line-height:1.5;color:var(--h-ink-800)}  /* phones: a grey box */

/* About us: the picture with the paper shadow, then the four cells */
.pw-about__fig{margin:24px 0 0}
.pw-about__fig img{width:100%;height:auto;box-shadow:0 1px 2px rgba(34,31,32,.10),0 8px 20px -6px rgba(34,31,32,.26)}
.pw-about__cap{margin-top:10px;font-weight:300;font-size:14px;line-height:1.4;color:var(--h-ink-600)}
.pw-about__cells{margin-top:24px}
.pw-about__cell{display:flex;flex-direction:column;gap:8px;padding:20px;background:var(--h-white)}
.pw-about__t{font-weight:700;font-size:20px;line-height:1.2}
.pw-about__p{font-weight:300;font-size:16px;line-height:1.5;color:var(--h-ink-800)}

/* When you create an account: phones, rows with a 32px icon beside the text; 16px from the screen edges */
.pw-acct{margin-left:calc(16px - var(--h-pad));margin-right:calc(16px - var(--h-pad))}
.pw-acct__card{display:flex;align-items:flex-start;gap:16px;padding:18px 16px;background:var(--h-white);color:var(--h-ink)}
.pw-acct__icon{flex:0 0 32px;width:32px;height:32px;margin-top:2px}
.pw-acct__body{display:flex;flex-direction:column;gap:4px}
.pw-acct__t{font-weight:700;font-size:18px;line-height:1.2}
.pw-acct__d{font-weight:300;font-size:15px;line-height:1.4;color:var(--h-ink-800)}

@media (min-width:768px){
  .pw-info{padding-top:96px;padding-bottom:96px}
  .pw-info .pw-h2{margin-top:20px}
  .pw-info__sub{margin-top:16px;font-size:19px;line-height:1.5}
  .pw-grid{margin-top:48px}
  .pw-who{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pw-who__card{gap:12px;padding:32px 32px 36px}
  .pw-who__t{font-size:28px;line-height:1.14}
  .pw-who__p{font-size:18px;line-height:1.55}
  .pw-who__note{margin-top:28px;padding:0;background:none;font-weight:700;font-size:19px;line-height:1.45;color:var(--h-ink)}  /* a bold line */
  .pw-about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start;margin-top:48px}
  .pw-about__fig{margin:0}
  .pw-about__fig img{box-shadow:0 1px 2px rgba(34,31,32,.10),0 10px 28px -8px rgba(34,31,32,.28)}
  .pw-about__cap{margin-top:12px;font-size:15px}
  .pw-about__cells{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:0}
  .pw-about__cell{gap:10px;min-height:170px;padding:26px 28px}
  .pw-acct{grid-template-columns:repeat(3,minmax(0,1fr));margin-left:0;margin-right:0}
  .pw-acct__card{flex-direction:column;gap:18px;padding:30px 30px 34px}
  .pw-acct__icon{flex:none;width:40px;height:40px;margin-top:0}
  .pw-acct__body{gap:6px}
  .pw-acct__t{font-size:20px}
  .pw-acct__d{font-size:16px}
}

/* Closing band (home rebuild v4 brief, section 10): ink; the lockup and the heading, the brand's sign-off (its button
   and eligibility line were removed 9 Nov 2026: the sticky header has the button). One column at every size; from
   768px the lockup and heading keep the half width they had beside the button, so the heading wraps as before. */
.pw-close{background:var(--h-ink);color:var(--h-white);padding-top:64px;padding-bottom:64px}
.pw-close__inner{display:flex;flex-direction:column;gap:36px}
.pw-close__logo{display:block;width:200px;height:auto;margin-bottom:28px}
.pw-close__h2{font-weight:700;font-size:40px;line-height:1;letter-spacing:-0.02em}
@media (min-width:768px){
  .pw-close{padding-top:96px;padding-bottom:96px}
  .pw-close__brand{width:calc((100% - 48px) / 2)}
  .pw-close__logo{width:243px;margin-bottom:40px}
  .pw-close__h2{font-size:64px;max-width:10em}
}

/* Footer (home rebuild v4 brief, section 11): the home page's own (pw-foot), so SITE_FOOTER's .pw-footer rules in
   account.css, which this page also loads, do not reach it. Ink, a hairline on top; grey text, white contact links. */
.pw-foot{background:var(--h-ink);color:var(--h-ink-400);border-top:1px solid var(--h-on-ink-line);padding-top:28px;padding-bottom:36px;font-weight:300;font-size:13px;line-height:1.6}
.pw-foot ul{list-style:none;margin:0;padding:0}
.pw-foot a{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--h-ink-300)}
.pw-foot a:hover{color:var(--h-white)}
.pw-home .pw-foot a:focus-visible{outline:2px solid var(--h-magenta);outline-offset:2px}
.pw-foot__contact{display:flex;flex-direction:column}
.pw-foot__contact a{font-weight:400;font-size:15px;color:var(--h-white)}
.pw-foot__icon{flex:0 0 20px;width:20px;height:20px}
.pw-foot__note{margin:4px 0 16px;color:var(--h-ink-500)}
.pw-foot__links{display:flex;flex-direction:column;margin-bottom:16px;padding:12px 0;border-top:1px solid var(--h-on-ink-line);border-bottom:1px solid var(--h-on-ink-line)}
.pw-foot__legal{color:var(--h-ink-500)}
.pw-foot__copy{white-space:nowrap}  /* the copyright never splits from its year */
@media (min-width:768px){
  .pw-foot__contact{flex-direction:row;flex-wrap:wrap;gap:0 36px}
  .pw-foot__note{margin:0 0 12px}
  .pw-foot__links{flex-direction:row;flex-wrap:wrap;gap:0 28px;margin-bottom:8px;padding:4px 0;border-bottom:0}
}

/* Visually hidden helper */
.pw-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Small phones (under 390px wide): the logo stays 144px, so the header button's side padding and the gap narrow
   just enough to fit "Log in / Sign up" without sideways scrolling at 360 (gap 16 to 8px, padding 24/40 to 14/26px;
   "My account" keeps the same box). Its label, colours, 48px height and
   corner mark are unchanged. */
@media (max-width:389.98px){
  .pw-home .aw-header{gap:8px}
  .aw-header .pw-mark-btn{min-width:160px;padding:0 26px 0 14px}  /* 144 + 8 + 160.6 = 312.6px, inside the 328px at 360 */
}