/* =============================================================================
   PARTNERS — additive stylesheet for /partners/.

   This file is ADDITIVE ONLY. It never redefines anything /styles/home.css
   already ships, so it can be uploaded without touching the live stylesheet.

   Everything here is built from home.css's own tokens and card language:
     surface   #fafafa            (matches .impact-live)
     card      #fff / 1.5px rgba(0,0,0,.055) / 20px / 0 1px 2px rgba(0,0,0,.04)
     hover     translateY(-4px)  / rgba(0,0,0,.1) / 0 14px 34px rgba(0,0,0,.08)
     icon      46px / 13px radius / #f1f1ea
     eyebrow   600 13px/18px var(--font-nav), .16em, #9b9b92
     h2        600 44px/47.52px var(--font-display), -1.584px, #16160f
     body      400 15px/23.25px var(--font-body), #6f6f66

   The partner enquiry modal deliberately reuses home.css's .flow-modal /
   .flow-form classes verbatim so it is pixel-identical to the Transact modal.
   The only two things home.css has no rule for are added at the bottom:
   a <textarea>, and a four-up role grid.
   ========================================================================== */

/* ---------- shared section shell ---------- */
.pn-section{padding:96px 24px 104px;background:#fafafa;color:#16160f}
.pn-section--dark{background:#080808;color:#fff}
.pn-eyebrow{
  margin:0;height:18px;color:#9b9b92;
  font:600 13px/18px var(--font-nav);letter-spacing:2.08px;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:10px;
}
.pn-eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green)}
.pn-section--dark .pn-eyebrow{color:#8f8f88}
/* Section eyebrows that match the metal page's "What's on the Marketplace" label:
   Kode Mono, weight 500, -.6px tracking, deep-green — and no leading dot. On dark
   sections the metal design uses mint instead of deep-green, so it stays readable. */
.pn-eyebrow--catalog{
  display:inline-block;height:auto;
  color:#00573F;
  font:500 13px/18px var(--font-eyebrow);letter-spacing:-.6px;
}
.pn-eyebrow--catalog::before{display:none}
.pn-eyebrow--catalog-dark,
.pn-section--dark .pn-eyebrow--catalog{color:#D9E8E2}
/* home.css states this as 44px/47.52px with letter-spacing:-1.584px. The ratios
   are kept (1.08 leading, -.036em tracking) rather than the absolute px, so the
   tracking stays proportional when the clamp shrinks the heading below 44px. */
.pn-h2{
  margin:14px 0 0;color:#16160f;
  font:600 clamp(32px,3.4vw,44px)/1.08 var(--font-display);letter-spacing:-.036em;
}
.pn-section--dark .pn-h2{color:#fff}
.pn-sub{margin:15px 0 0;color:#6f6f66;font:400 18px/27px var(--font-body)}
.pn-section--dark .pn-sub{color:#a7a7a0}
.pn-head{max-width:760px}
.pn-head--center{margin-inline:auto;text-align:center}
.pn-head--center .pn-eyebrow{justify-content:center}

/* ---------- section connector (uses home.css .section-pin, drawn by home.js) ---------- */
.pn-connector{height:126px}
.pn-connector.section-pin{--pin-inset:17px;background:#fafafa!important}
.pn-connector--dark.section-pin{background:#080808!important}
.pn-connector--dark.section-pin::before{background:rgba(255,255,255,.22)}
.pn-connector--dark.section-pin>i{background:#28c46a!important}

/* =============================== HERO =============================== */
/* One full viewport, matching /plastic/ and /electronics/, whose #hero measures
   exactly 1.00vh. This was content-driven padding before (150px/96px), which
   came out at 0.94vh — close enough to look like a mistake rather than a
   choice. min-height rather than height so the copy can never be clipped on a
   short window; the top padding clears the 64px fixed header. */
.pn-hero{
  position:relative;overflow:hidden;
  min-height:100vh;min-height:100svh;
  display:flex;align-items:center;
  padding:64px 0 0;
  background:radial-gradient(circle at 72% 38%,#fff 0,#fbfbf8 46%,var(--paper) 80%);
}
/* The hero photograph sits behind the copy rather than beside it: the art is
   built with its own cream fade across the left third, so a two-column layout
   would have wasted that half of the frame on empty background. Anchored right
   so the laptop and the four service cards stay in view as the column narrows. */
.pn-hero-media{position:absolute;inset:0;z-index:0;pointer-events:none}
.pn-hero-media img{
  position:absolute;top:0;right:0;height:100%;width:min(78%,1320px);
  object-fit:cover;object-position:62% 50%;
}
/* Extends the artwork's own fade in CSS. Without it the copy column would lose
   contrast on wide screens, where the image is scaled up and its baked-in fade
   no longer reaches far enough across. Ends before the laptop so the product
   detail is never dulled. */
.pn-hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,
    var(--paper) 0%,
    rgba(247,247,244,.94) 24%,
    rgba(247,247,244,.55) 42%,
    rgba(247,247,244,0) 60%);
}
.pn-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,640px);gap:48px;align-items:center}
.pn-hero h1{
  margin:20px 0 0;max-width:13ch;color:#16160f;
  font:600 clamp(42px,5.4vw,80px)/.98 var(--font-display);letter-spacing:-.05em;
}
.pn-hero-lead{margin:28px 0 0;max-width:540px;color:#3d3d38;font:400 clamp(16px,1.55vw,19px)/1.55 var(--font-body)}
.pn-hero-lead strong{font-weight:600;color:var(--ink)}
.pn-cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:34px}
.pn-textcta{display:inline-flex;align-items:center;gap:12px;font-weight:600;font-size:15px;color:var(--ink)}
.pn-textcta svg{width:15px;height:15px;transition:transform .25s var(--ease)}
.pn-textcta:hover svg{transform:translateY(3px)}
.pn-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:38px}
.pn-chip{
  display:inline-flex;align-items:center;gap:8px;padding:8px 15px;
  border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.65);
  font:400 12.5px/1 var(--font-control);color:#4a4a45;
}
.pn-chip i{width:6px;height:6px;border-radius:50%;background:var(--green)}
/* Below 1024px the photo cannot sit behind the copy — the crop gets too tight
   for the laptop to read and the fade no longer clears the headline. It returns
   to the flow instead, as a rounded 16:9 card under the chips, where the whole
   composition is visible. .pn-hero becomes a flex column purely to order it
   after the copy; the media div precedes .shell in the markup. */
@media (max-width:1023px){
  /* align-items reverts to stretch: in a column flex it controls the horizontal
     axis, so the centre value inherited from the desktop rule would shrink
     .shell and the photo card to their content width. */
  .pn-hero{display:flex;flex-direction:column;align-items:stretch;justify-content:center;padding:118px 0 64px}
  /* Width comes from --shell, the same token .shell uses, so the photo card and
     the copy above it always share one gutter. It was calc(100% - 32px), which
     only coincided with the shell when no scrollbar was present — with one the
     two diverged by 7px and the card sat visibly inset from the headline. */
  .pn-hero-media{
    position:static;order:2;width:var(--shell);margin:36px auto 0;
    aspect-ratio:16/9;border-radius:18px;overflow:hidden;
  }
  .pn-hero-media img{position:relative;width:100%;height:100%;object-position:60% 50%}
  .pn-hero-media::after{display:none}
}

/* The scrolling material ticker that used to sit between the hero and the
   opportunity section has been removed, along with its .pn-ticker markup and
   the pnTicker keyframes. The hero now hands straight to .pn-section. */

/* =============================== HEADLINE SWEEP =============================== */
/* Lifted verbatim from the category pages' base.css so every heading on the site
   animates identically: each character fades in while cooling from Recykal red
   to the heading's own colour. Partners previously ran only home.css's
   .word-reveal — a word-level blur-up with no colour shift at all — which is why
   its headings read as a different effect.
   `inherit` is what makes this work on both bands: ink on the light sections,
   white on .pn-section--dark, and an <em> keeps its own accent, all for free.
   Only headings are marked, exactly as the category pages do it; eyebrows and
   subs stay on the word-level reveal. */
[data-split] .chw{display:inline-block;white-space:nowrap}
[data-split] .ch{
  opacity:0;color:#a51c30;
  transition:opacity .45s linear,color .45s linear;
}
[data-split].is-in .ch{opacity:1;color:inherit}
@media (prefers-reduced-motion:reduce){
  [data-split] .ch{opacity:1!important;color:inherit!important;transition:none!important}
}

/* =============================== OPPORTUNITY =============================== */
/* minmax(0,1fr) rather than 1fr: long labels ("Transportation", "Working
   capital") raise the min-content floor and make plain 1fr tracks uneven. */
.pn-needs{margin-top:54px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.pn-need{padding:24px 22px 28px;border-right:1px solid var(--line)}
.pn-need:last-child{border-right:0}
.pn-need span{color:#8a8a84;font:400 14px/1.4 var(--font-body)}
.pn-need strong{
  display:block;margin-top:8px;color:#16160f;
  font:500 clamp(20px,2vw,26px)/1.15 var(--font-display);letter-spacing:-.02em;
}
.pn-stats{margin-top:26px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pn-stat{padding:34px 22px 38px;border-right:1px solid var(--line)}
.pn-stat:last-child{border-right:0}
.pn-stat strong{
  display:block;color:#16160f;
  font:500 clamp(30px,3.2vw,50px)/1 var(--font-display);letter-spacing:-.05em;
}
.pn-stat span{display:block;margin-top:10px;color:#77776f;font:400 13.5px/1.4 var(--font-body)}

/* =============================================================================
   PARTNER TRACKS — image-on-top cards.

   Ported from /plastic/'s "Why Recykal.Market" (.feature-blocks) so the two
   sections read as the same component. That page lives in a different codebase
   with its own tokens, so those are mapped onto home.css's here:

     --ink-warm  -> #16160f      --ink-56   -> #6f6f66
     --white     -> #fff         --fs-small -> 15px
     --font-mono -> var(--font-eyebrow)   --grid-margin -> .shell

   Geometry kept identical to plastic: 4-up, 1.25rem gap, 16px radius, 1px
   line border, 1959/2267 media ratio, .55s track transition.
   ========================================================================== */
.pn-tracks{position:relative;margin-top:56px}
.pn-tracks__viewport{overflow:hidden}
.pn-tracks__track{display:flex;gap:1.25rem;position:relative;transition:transform .55s var(--ease);will-change:transform}

/* Shell matches home.css's .impact-live-card rather than plastic's 1px/16px
   card, since this page renders inside the home.css system: 1.5px hairline at
   5.5% black, 20px radius, and the same lift on hover. */
.pn-track{
  flex:0 0 auto;width:calc((100% - 3.75rem) / 4);
  background:#fff;border:1.5px solid rgba(0,0,0,.055);border-radius:20px;overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  display:flex;flex-direction:column;
}
.pn-track:hover{border-color:rgba(0,0,0,.1);box-shadow:0 14px 34px rgba(0,0,0,.08)}
/* 4:3, not the old portrait 1959/2267 that the placeholder illustrations used.
   All four photographs are landscape (two are exactly 4:3, the others 3:2 and
   16:9), so a portrait frame cropped away up to half the width — the logistics
   truck and the credit desk both lost their subject. 4:3 fits two of the four
   with no crop at all and trims the rest modestly. */
.pn-track__media{position:relative;aspect-ratio:4/3;background:#eeeeea}
.pn-track__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pn-track__body{padding:1.15rem 1.2rem 1.4rem;display:flex;flex-direction:column;flex:1;gap:.3rem}
.pn-track__idx{font:400 12px/1 var(--font-eyebrow);letter-spacing:.1em;color:var(--green)}
.pn-track__cat{margin:.5rem 0 0;color:#93938c;font:400 11px/1.4 var(--font-control);text-transform:uppercase;letter-spacing:.08em}
/* Weight and tracking taken from home.css's own card rules (.impact-live-card
   h3 / p): display 600 at -.025em, body 400 at -.008em on a 23.25px leading.
   These were 500 / -.02em / 1.5 before the audit and did not match. */
.pn-track__title{
  margin:.1rem 0 .15rem;color:#16160f;
  font:600 20px/24px var(--font-display);letter-spacing:-.025em;
}
.pn-track__desc{margin:0;color:#6f6f66;font:400 15px/23.25px var(--font-body);letter-spacing:-.008em}

/* No margin-top:auto here any more. partners.js equalises the category, title,
   description and benefit blocks to their tallest instance across the row, so
   every card shares the same internal rhythm and the CTAs, dividers and bullets
   all line up. Anchoring this block to the bottom would fight that. */
.pn-gains{margin:0;padding:1rem 0 0;border-top:1px solid var(--line);display:grid;gap:10px;list-style:none;align-content:start}
.pn-gains li{display:flex;gap:10px;align-items:flex-start;color:#2f2f2b;font:400 14px/1.45 var(--font-body)}
.pn-gains li svg{flex:0 0 auto;width:16px;height:16px;margin-top:2px;color:var(--green)}

/* The CTA is home.css's own .pill/.pill-dark — the same button the header's
   Transact and the hero's "Become a Partner" use — so the card matches every
   other call to action on the site rather than inventing a text link. */
/* The CTA now sits above the divider, so it no longer needs margin-top:auto to
   push itself down — .pn-gains owns that job instead. */
.pn-track__cta{padding:1.15rem 0 .35rem}
.pn-track__cta .pill{align-self:flex-start;font-size:14px}

/* Arrows flank the row, matching plastic: prev left, next right, centred. */
.pn-tracks__arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:46px;height:46px;border-radius:50%;border:1px solid var(--line);
  background:#fff;color:var(--ink);display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.14);
  transition:color .15s ease,border-color .15s ease,opacity .15s ease;
}
.pn-tracks__arrow:hover:not(:disabled){color:var(--green);border-color:var(--green)}
.pn-tracks__arrow:disabled{opacity:.3;cursor:default}
.pn-tracks__arrow--prev{left:10px}
.pn-tracks__arrow--next{right:10px}
/* With exactly four tracks everything fits one page, so both arrows would sit
   permanently disabled. partners.js sets this when there is nothing to page. */
.pn-tracks[data-pn-single] .pn-tracks__arrow{display:none}

@media(prefers-reduced-motion:reduce){.pn-tracks__track{transition:none}}

/* Card entrance mirrors home.css's .impact-live-card.motion-card exactly, so
   the tracks arrive with the same easing and travel as the homepage's impact
   cards. partners.js assigns the stagger delays. */
.pn-track.motion-card{
  opacity:0;transform:translateY(22px);
  transition:opacity .6s cubic-bezier(.16,.84,.44,1),transform .6s cubic-bezier(.16,.84,.44,1),
             box-shadow .28s,border-color .28s;
}
.pn-track.motion-card.is-visible{opacity:1;transform:none}
.pn-track.motion-card.is-visible:hover{transform:translateY(-4px)}
@media(prefers-reduced-motion:reduce){
  .word-reveal,.pn-track.motion-card{opacity:1;filter:none;transform:none}
}

/* =============================== WHY (dark) =============================== */
.pn-why{margin-top:56px;border-top:1px solid #242424}
.pn-why-row{
  display:grid;grid-template-columns:64px 1fr 2fr;gap:30px;align-items:baseline;
  padding:30px 0;border-bottom:1px solid #242424;transition:padding-left .3s var(--ease);
}
.pn-why-row:hover{padding-left:12px}
.pn-why-row .n{color:#28c46a;font:400 13px/1 var(--font-eyebrow);letter-spacing:.1em}
.pn-why-row h3{margin:0;color:#fff;font:500 clamp(22px,2.2vw,30px)/1.2 var(--font-display);letter-spacing:-.02em}
.pn-why-row p{margin:0;color:#9a9a94;font:400 15.5px/1.55 var(--font-body)}

/* =============================== HOW IT WORKS =============================== */
/* Rebuilt as the conventional progress tracker: one continuous rule carrying a
   numbered marker per step. It replaces two 96px stubs that were vertically
   centred against the tallest column, so they floated at an arbitrary height
   beside the headings and read as decoration rather than as progression. */
.pn-steps{
  position:relative;margin-top:60px;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:clamp(20px,3.4vw,64px);
}
/* The rule sits behind the markers and fades at both ends so it stops at the
   row rather than colliding with the section's padding. 21px is the marker's
   vertical centre (44px tall, 1px border). */
.pn-steps::before{
  content:"";position:absolute;top:21px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,
    rgba(207,207,201,0) 0,#cfcfc9 15%,#cfcfc9 85%,rgba(207,207,201,0) 100%);
}
.pn-step{position:relative;text-align:center;padding:0 clamp(6px,1.4vw,26px)}
/* Filled with the section's own #fafafa so the rule appears to pass behind it
   rather than through it. */
.pn-step__no{
  position:relative;z-index:1;
  display:grid;place-items:center;width:44px;height:44px;margin:0 auto;
  border:1px solid #d7d7d1;border-radius:50%;background:#fafafa;
  color:var(--green);font:500 13px/1 var(--font-eyebrow);letter-spacing:.06em;
}
/* Uppercase mono to match .pn-eyebrow, which is the label voice everywhere else
   on this page. The step number moved out of this line into the marker. */
.pn-step .num{
  margin:20px 0 0;color:#8b8b85;
  font:400 12px/1 var(--font-eyebrow);letter-spacing:.14em;text-transform:uppercase;
}
/* Two lines are reserved whether the title needs them or not, so every
   description begins on the same line across the row. Without this, "Tell us
   about you" fits one line and pulled its description 41px above the other two,
   which is what made the row read as ragged. 2.24em = 2 x the 1.12 line-height. */
.pn-step h3{
  margin:14px 0 0;min-height:2.24em;color:#16160f;
  font:500 clamp(24px,2.3vw,34px)/1.12 var(--font-display);
  letter-spacing:-.03em;text-wrap:balance;
}
.pn-step p:not(.num){margin:12px auto 0;max-width:264px;color:#6f6f66;font:400 15px/23.25px var(--font-body)}

/* =============================== FINAL CTA =============================== */
/* No overrides here on purpose. home.css centres .final-cta__content in the
   photo's top 35% sky band, which is sized for exactly three children — the
   heading, the sub and the button. This page used to carry a fourth "Partner
   Type: Credit · Insurance · Logistics · Compliance" line, and the band was
   stretched to 44% (52% on phones) to fit it. That pushed the whole block down
   out of the sky and onto the building and the reflections below, where the
   copy lost its contrast. The fourth line is gone, so the band is back to the
   height the composition was built around. The four partner types are already
   named in the hero chips, the four track cards and the modal's own selector. */

/* =============================================================================
   PARTNER MODAL — the only rules home.css has no equivalent for.
   Everything else (.flow-modal, .flow-modal-panel, .flow-form, .flow-phone,
   .flow-role, .flow-label, .flow-req, .flow-opt) is inherited untouched.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   FIX: invisible modal headings.

   home.js reveals 'section h2', and .flow-modal-panel IS a <section>, so every
   modal <h2> is given .reveal (opacity:0) and then waits for an
   IntersectionObserver hit that never lands — the element is display:none at
   observe time and the observer unobserves on its first intersecting entry.
   The result is a modal whose heading never appears.

   This is NOT specific to this page: it reproduces on the live homepage today
   (open Transact — "Buy and Sell with us" renders at opacity 0). The rule below
   fixes it here for both modals; the same one-liner belongs in home.css so the
   rest of the site picks it up. Scoped to modals so no other reveal changes.
   -------------------------------------------------------------------------- */
.flow-modal h2.reveal{opacity:1;transform:none}

/* home.css styles input+select but never a textarea. */
.flow-form textarea{
  width:100%;min-height:92px;padding:14px;resize:vertical;
  border:1px solid #cecec8;border-radius:10px;background:#fff;color:#111;outline:none;
  font:400 14px/1.45 var(--font-body);
}
.flow-form textarea:focus{border-color:#007554;box-shadow:0 0 0 3px rgba(0,117,84,.12)}
.flow-form textarea[aria-invalid=true]{border-color:#c93640}

/* Four partner types will not fit home.css's three-up role grid. */
.pn-role-4 .flow-role-options{grid-template-columns:repeat(2,1fr)}

/* =============================== RESPONSIVE =============================== */
:where(html[data-view="mobile"]) .pn-hero{padding:118px 0 64px}
:where(html[data-view="mobile"]) .pn-hero-grid{grid-template-columns:1fr;gap:20px}
/* The old .pn-hero-visual square held the placeholder network SVG. The hero is
   a photograph now and is sized by the max-width:1023px block above. */
:where(html[data-view="mobile"]) .pn-section{padding:72px 16px 80px}
:where(html[data-view="mobile"]) .pn-connector{height:96px}
:where(html[data-view="mobile"]) .pn-needs,
:where(html[data-view="mobile"]) .pn-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
/* The phone override for the old four-line band is gone with it — three
   children fit home.css's 35% sky band at this width without help. */
:where(html[data-view="mobile"]) .pn-need:nth-child(2n){border-right:0}
:where(html[data-view="mobile"]) .pn-stat{border-bottom:1px solid var(--line)}
:where(html[data-view="mobile"]) .pn-stat:nth-child(2n){border-right:0}
/* The track carousel is width-driven, not tier-driven, so it uses plastic's own
   1023px breakpoint rather than html[data-view]. Between 600 and 1023 the page
   is still "desktop", but a 4-up row there would be unreadably narrow. */
@media (max-width:1023px){
  .pn-tracks__arrow{display:none}
  .pn-tracks__viewport{
    overflow-x:auto;overflow-y:visible;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .pn-tracks__viewport::-webkit-scrollbar{display:none}
  .pn-tracks__track{transform:none!important;gap:1rem}
  .pn-track{width:86%;scroll-snap-align:start}
}
@media (min-width:1024px) and (max-width:1200px){
  .pn-track{width:calc((100% - 2.5rem) / 3)}
}
:where(html[data-view="mobile"]) .pn-why-row{grid-template-columns:44px 1fr;gap:16px}
:where(html[data-view="mobile"]) .pn-why-row p{grid-column:1/-1;margin-top:6px}
/* The hero art is 16:9 with its left 44% deliberately faded to flat cream, so
   the desktop headline can sit on it. A 16:9 card is the image's own ratio, so
   cover crops nothing and that empty 44% was being rendered at full size — the
   photo looked inset and off-centre against copy that was in fact flush with it.
   A square card crops to 56% of the width; anchored hard right that window
   starts at 43.7%, which is exactly where the artwork's content begins. */
/* Portrait only. The view resolver returns "mobile" for any phone whatever the
   width (isPhone || w < 600), so a landscape handset would otherwise get a
   square card as wide as the viewport and far taller than it. Landscape keeps
   the 16:9 card from the block above. */
@media (orientation:portrait){
  :where(html[data-view="mobile"]) .pn-hero-media{aspect-ratio:1;border-radius:16px}
  :where(html[data-view="mobile"]) .pn-hero-media img{object-position:100% 50%}
}

/* Stacked: the rule turns to run down through the markers instead of across
   them, and the reserved two-line title height is released — with one step per
   row there is no neighbouring description to line up with. */
/* Mobile: a left-rail timeline. Stacked and centred, the single container rule
   ran down x=50% — the very axis the centred label, title and paragraph sit on —
   so it drew a line straight through the middle of every step's text, and it
   carried on past the last marker to the bottom of that step's copy. The marker
   now takes its own 44px column and the rule is drawn per step, spanning only
   the gap between one marker and the next, so it connects markers and crosses
   nothing. Desktop is untouched — every rule here is inside the mobile branch. */
:where(html[data-view="mobile"]) .pn-steps{grid-template-columns:1fr;row-gap:44px}
:where(html[data-view="mobile"]) .pn-steps::before{display:none}
:where(html[data-view="mobile"]) .pn-step{
  display:grid;grid-template-columns:44px 1fr;column-gap:18px;
  align-items:start;text-align:left;padding:0;
}
:where(html[data-view="mobile"]) .pn-step__no{grid-column:1;grid-row:1;margin:0}
:where(html[data-view="mobile"]) .pn-step .num{grid-column:2;grid-row:1;margin:14px 0 0}
:where(html[data-view="mobile"]) .pn-step h3{grid-column:2;grid-row:2;margin:6px 0 0;min-height:0}
:where(html[data-view="mobile"]) .pn-step p:not(.num){grid-column:2;grid-row:3;margin:8px 0 0;max-width:none}
/* From this marker's bottom edge to the next marker's top edge — the -44px
   reach is the row-gap above, so the segment lands exactly on the next marker. */
:where(html[data-view="mobile"]) .pn-step:not(:last-child)::before{
  content:"";position:absolute;left:22px;top:44px;bottom:-44px;
  width:1px;background:#cfcfc9;
}
:where(html[data-view="mobile"]) .pn-role-4 .flow-role-options{grid-template-columns:1fr 1fr}

/* Safety net for the no-JS case, where html[data-view] never leaves "desktop". */
@media (max-width:600px){
  .pn-hero-grid{grid-template-columns:1fr}
  .pn-needs,.pn-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Same left-rail timeline as the data-view rule above — see the note there. */
  .pn-steps{grid-template-columns:1fr;row-gap:44px}
  .pn-steps::before{display:none}
  .pn-step{
    display:grid;grid-template-columns:44px 1fr;column-gap:18px;
    align-items:start;text-align:left;padding:0;
  }
  .pn-step__no{grid-column:1;grid-row:1;margin:0}
  .pn-step .num{grid-column:2;grid-row:1;margin:14px 0 0}
  .pn-step h3{grid-column:2;grid-row:2;margin:6px 0 0;min-height:0}
  .pn-step p:not(.num){grid-column:2;grid-row:3;margin:8px 0 0;max-width:none}
  .pn-step:not(:last-child)::before{
    content:"";position:absolute;left:22px;top:44px;bottom:-44px;
    width:1px;background:#cfcfc9;
  }
}
/* Same square crop as the data-view rule above — see the note there. */
@media (max-width:600px) and (orientation:portrait){
  .pn-hero-media{aspect-ratio:1;border-radius:16px}
  .pn-hero-media img{object-position:100% 50%}
}