/*
 * PRODUCT SECTIONS — the Hui Mode stages, the governance grid, the Security & Data strip, the role
 * columns and the pricing cards' homepage furniture.
 *
 * Shared by the home page and the Te Wairoa page (rebuilt to Mayana's mockups, 23 Sep 2026; the
 * features page was retired the same evening). Lifted out the moment a second
 * page needed them, for the same reason as pricing-cards.css: two copies of a layout drift, and
 * these pages look like Tohu precisely because they do not re-implement Tohu.
 *
 * Depends on the variables the site stylesheet defines, so it is linked after it.
 */
  /* =====================================================================================
     THE REBUILT SECTIONS — Mayana's "Homepage updates" brief, 23 Sep 2026, to her six mockups.
     Linked AFTER each page's own stylesheet so the hero and section overrides win the cascade.
     Stage / feature accents are the four brand colours: Pounamu (--green), Kōwhai (--gold),
     Whenua (--terra), Deep teal (--blue). Each card sets --c once and everything reads it.
     ===================================================================================== */
  .hero{min-height:auto;padding:132px 0 64px}
  .hero-grid{grid-template-columns:minmax(0,560px) minmax(0,420px);gap:clamp(48px,8vw,116px);justify-content:center}
  .hero .eyebrow{display:block;letter-spacing:.14em;font-weight:600}
  .hero h1{font-size:clamp(2.3rem,4.9vw,3.7rem);line-height:1.08;margin:.35em 0 .5em;max-width:none}
  .hero p.lead{font-size:1.14rem;max-width:none;color:#46535d}
  .hero .cta{margin-top:30px}
  .btn-outline{border-color:var(--blue);color:var(--blue);background:transparent}
  .btn-outline:hover{background:rgba(31,78,95,.06)}
  .hero-visual{max-width:420px;justify-self:end}
  @media(max-width:860px){.hero{padding:110px 0 48px}.hero-grid{grid-template-columns:1fr}.hero-visual{justify-self:center;max-width:280px}}
  /* statement strip — centred, shallow, one statement */
  .cred{text-align:center;padding:38px 0 42px}
  .cred .eyebrow{display:block;margin-bottom:12px;letter-spacing:.16em}
  .cred p{margin:0 auto;max-width:820px;font-size:clamp(1.2rem,2.2vw,1.7rem);line-height:1.38}
  /* shared section furniture */
  .sec{position:relative;overflow:hidden}
  .sec .wm{position:absolute;top:-140px;right:-160px;width:640px;height:640px;opacity:.06;pointer-events:none}
  .sec .wm .mark{animation-duration:180s}
  .sec .section-head{max-width:52rem}
  .sec .section-head .eyebrow{display:block;color:var(--gold);margin-bottom:6px}
  .sec .section-head p{font-size:1.15rem;line-height:1.55;max-width:46em}
  .sec .cta-row{display:flex;justify-content:center;margin-top:44px}
  .sec .tag{display:block;text-align:center;margin-top:16px;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:#8a929a;font-weight:600}
  /* Hui Mode — four numbered stages, one continuous workflow */
  .stages{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:46px;align-items:stretch}
  @media(max-width:1080px){.stages{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:600px){.stages{grid-template-columns:1fr;max-width:30rem;margin-inline:auto}}
  .stage{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-top:3px solid var(--c);border-radius:16px;padding:22px 22px 20px}
  .stage-head{display:flex;align-items:center;gap:12px}
  .stage-num{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--c);color:#fff;font-family:var(--serif);font-weight:600;font-size:1.05rem}
  .stage h3{font-size:1.25rem;line-height:1.15}
  .stage p{margin-top:12px;font-size:.95rem;color:#4f5b63;min-height:4.5em}
  .shot{margin-top:16px;border-radius:12px;padding:10px;background:color-mix(in srgb,var(--c) 9%,#fff)}
  .shot img{display:block;width:100%;height:auto;border-radius:8px;cursor:zoom-in;transition:transform .35s ease}
  .shot img:hover,.shot img:focus-visible{transform:scale(1.02)}
  .shot img:focus-visible{outline:2px solid var(--c);outline-offset:3px}
  .stage-foot{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:18px}
  .stage-foot .ic{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 14%,#fff);color:var(--c)}
  .stage-foot span{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#3a4650}
  /* Governance administration — an unnumbered 3 × 2 grid */
  .admin{background:var(--cream)}
  .fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 18px;margin-top:46px}
  @media(max-width:1000px){.fgrid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:600px){.fgrid{grid-template-columns:1fr;max-width:30rem;margin-inline:auto}}
  .fcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-top:3px solid var(--c);border-radius:16px;padding:22px 22px 18px}
  .fcard-head{display:flex;gap:14px;align-items:flex-start}
  .fcard-head .ic{flex:none;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 14%,#fff);color:var(--c)}
  .fcard h3{font-size:1.3rem;line-height:1.15}
  .fcard-head p{margin-top:4px;font-size:.94rem;color:#4f5b63}
  .fcard .shot{margin-top:auto;padding-top:10px}
  /* Security & Data — teal strip, four open columns */
  .secdata{background:var(--strip-bg);color:#fff}
  .secdata .section-head h2,.secdata .section-head p{color:#fff}
  .secdata .section-head p{color:rgba(255,255,255,.86)}
  .secdata .wm{opacity:.08}
  .cols4{display:grid;grid-template-columns:repeat(4,1fr);margin-top:52px}
  .cols4 > div{padding:6px 30px 6px 0;border-right:1px solid rgba(255,255,255,.16)}
  .cols4 > div + div{padding-left:30px}
  .cols4 > div:last-child{border-right:0;padding-right:0}
  .cols4 .ic{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--c);color:#fff;margin-bottom:16px}
  .cols4 h3{font-size:1.3rem;line-height:1.15;color:#fff}
  .cols4 p{margin-top:10px;font-size:.95rem;line-height:1.55;color:rgba(255,255,255,.86)}
  @media(max-width:940px){.cols4{grid-template-columns:1fr 1fr;gap:34px 0}.cols4 > div:nth-child(2){border-right:0}.cols4 > div:nth-child(3){padding-left:0}}
  @media(max-width:560px){.cols4{grid-template-columns:1fr;gap:30px}.cols4 > div{border-right:0;padding:0}}
  .btn-cream{background:var(--cream);color:var(--blue)}
  .btn-cream:hover{background:#fff}
  /* Entity & role access — five open columns */
  .cols5{display:grid;grid-template-columns:repeat(5,1fr);margin-top:56px}
  .cols5 > div{padding:0 22px;border-right:1px solid var(--line);text-align:center}
  .cols5 > div:first-child{padding-left:0}
  .cols5 > div:last-child{border-right:0;padding-right:0}
  .cols5 .ic{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:var(--c);color:#fff;margin:0 auto 16px}
  .cols5 h3{font-size:1.3rem;line-height:1.15}
  .cols5 .lead-role{margin-top:8px;font-weight:600;font-size:.96rem;color:#2c3a44}
  .cols5 p.desc{margin-top:8px;font-size:.9rem;line-height:1.5;color:#54606a}
  .pill-access{display:inline-block;margin-top:16px;padding:6px 12px;border-radius:999px;font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;background:color-mix(in srgb,var(--c) 13%,#fff);color:var(--c)}
  @media(max-width:1000px){.cols5{grid-template-columns:repeat(2,1fr);gap:36px 0}.cols5 > div{border-right:0;padding:0 18px}}
  @media(max-width:560px){.cols5{grid-template-columns:1fr;gap:32px}.cols5 > div{padding:0}}
  /* Pricing — the shared cards, compact, with a cycle toggle and entity tooltips */
  .cycle-toggle{display:inline-flex;margin-top:28px;border:1px solid var(--line);border-radius:999px;padding:4px;background:#fff}
  .cycle-toggle button{font:inherit;font-weight:600;font-size:.9rem;padding:.5em 1.2em;border-radius:999px;border:0;background:transparent;color:#54606a;cursor:pointer}
  .cycle-toggle button[aria-pressed="true"]{background:var(--blue);color:#fff}
  .cycle-toggle button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
  .home-pricing .wprice{margin-top:32px}
  .home-pricing .pplan{padding:24px;border-top:3px solid var(--c)}
  .home-pricing .pplan h3{display:flex;align-items:center;gap:8px;font-size:1.7rem}
  .home-pricing .pplan .now{font-size:2.2rem;margin-top:14px}
  .home-pricing .pplan ul{margin-top:16px;gap:7px;font-size:.92rem}
  .home-pricing .pplan .trial{padding-top:14px}
  .home-pricing .pplan .btn{margin-top:12px}
  .home-pricing .pplan.soon .soonline{margin-top:14px}
  .home-pricing .pplan.soon .desc + .soonline + p{margin-top:12px;font-size:.93rem;color:#54606a}
  .compare{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:34px}
  .compare::before,.compare::after{content:"";height:1px;width:min(160px,20vw);background:var(--line)}
  .compare a{font-weight:600;color:var(--blue)}
  .compare a:hover{text-decoration:underline}
  .home-pricing .terms{text-align:center;max-width:none;margin-top:14px}
  /* ⓘ tooltip: a button, a floating panel, closes on outside click and Esc */
  .tip{position:relative;display:inline-flex}
  .tip > button{font:inherit;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--c);color:var(--c);background:#fff;display:grid;place-items:center;font-size:.72rem;font-weight:700;cursor:pointer;line-height:1}
  .tip > button:focus-visible{outline:2px solid var(--c);outline-offset:2px}
  .tip-panel{position:absolute;z-index:20;top:calc(100% + 8px);left:0;width:min(280px,72vw);background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:.86rem;line-height:1.45;color:#3a4650;box-shadow:0 18px 40px -22px rgba(34,48,58,.45);font-family:var(--sans);font-weight:400;text-align:left}
  .tip-panel[hidden]{display:none}
  .tip.flip .tip-panel{left:auto;right:0}
  /* the reveal never hides a whole section on a screen without the observer */
  .stage.reveal:nth-child(2),.fcard.reveal:nth-child(2){transition-delay:.08s}
  .stage.reveal:nth-child(3),.fcard.reveal:nth-child(3){transition-delay:.16s}
  .stage.reveal:nth-child(4){transition-delay:.24s}
  @media(prefers-reduced-motion:reduce){.shot img{transition:none}}