/* Public solution pages (/hoa-maintenance-software, /condo-management-software). Standalone
   static pages: no SPA, no auth, no API calls. Tokens mirror the landing page (index.html :root). */
:root{
  --navy:#080E1A;--navy-2:#0D1426;--navy-card:#111827;--navy-border:#1E2B45;
  --primary:#0F5EFF;--primary-h:#0A4DD8;--blue-l:#60A5FA;--blue-soft:#DCEAFF;
  --ink:#10213D;--steel:#5B7091;--body:#43536B;--line:#D7E0EE;--off:#F6F8FC;--app-bg:#F5F7FB;--white:#FFFFFF;
  --g300:#C0D0EC;--g400:#8FA3C8;--ok:#067647;--ok-bg:#ECFDF3;
  --r:12px;--rx:6px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;background:var(--white);color:var(--ink);font-size:16px;line-height:1.6;-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.wrap{max-width:1160px;margin:0 auto;padding:0 32px}
.skip{position:absolute;left:-9999px;top:8px;background:var(--primary);color:#fff;padding:10px 14px;border-radius:var(--rx);z-index:100}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:4px}

/* Header */
.sh{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.sh-in{max-width:1160px;margin:0 auto;padding:0 32px;height:68px;display:flex;align-items:center;gap:32px}
.sh-logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:16px;letter-spacing:-.3px;color:var(--navy)}
.sh-logo img{width:34px;height:34px;border-radius:50%}
.sh-nav{display:flex;gap:26px;flex:1}
.sh-nav a{font-size:14px;font-weight:500;color:var(--steel)}
.sh-nav a:hover,.sh-nav a[aria-current="page"]{color:var(--navy)}
.sh-nav a[aria-current="page"]{font-weight:600}
.sh-act{display:flex;align-items:center;gap:14px;margin-left:auto}
.sh-signin{display:inline-flex;align-items:center;min-height:40px;font-size:14px;font-weight:600;color:var(--steel);padding:8px 4px}
.sh-signin:hover{color:var(--navy)}
.sh-act .btn{display:inline-block;line-height:20px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;font-weight:700;font-size:14px;border-radius:var(--rx);padding:10px 18px;white-space:nowrap;transition:background .15s,border-color .15s,color .15s;cursor:pointer;border:1px solid transparent}
.btn-p{background:var(--primary);color:#fff}
.btn-p:hover{background:var(--primary-h)}
.btn-lg{padding:15px 26px;font-size:15px;min-height:52px}
.btn-ghost{background:transparent;color:var(--navy);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--navy)}
.dark .btn-ghost{color:#fff;border-color:#33456A}
.dark .btn-ghost:hover{border-color:var(--blue-l)}

/* Type */
.eyebrow{font-size:12px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--primary);margin-bottom:16px}
.dark .eyebrow{color:var(--blue-l)}
.h2{font-size:42px;font-weight:800;letter-spacing:-1.2px;line-height:1.08;color:var(--navy);max-width:780px}
.dark .h2{color:#fff}
.lede{font-size:18px;line-height:1.6;color:var(--steel);max-width:640px;margin-top:16px}
.dark .lede{color:var(--g300)}
.sec{padding:104px 0}
.sec-head{margin-bottom:56px}
.soft{background:var(--off);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.dark{background:var(--navy);color:#fff}
.note{font-size:13px;color:var(--steel);line-height:1.55}
.dark .note{color:var(--g400)}
.inline{color:var(--primary);font-weight:600}
.inline:hover{text-decoration:underline}

/* Product shots */
.shot{margin:0;min-width:0}
.frame{background:var(--app-bg);border:1px solid var(--line);border-radius:12px;overflow:hidden;padding:18px;box-shadow:0 1px 2px rgba(16,33,61,.04),0 24px 56px rgba(16,33,61,.10)}
.frame img{border-radius:6px;width:100%}
.dark .frame{border-color:#26385B;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.shot figcaption{font-size:12.5px;color:var(--steel);margin-top:12px;line-height:1.5}
.shot figcaption strong{color:var(--ink);font-weight:600}
.dark .shot figcaption{color:var(--g400)}
.dark .shot figcaption strong{color:#fff}
.phone{max-width:340px;border-radius:28px;padding:12px;background:var(--navy-2);border:1px solid #26385B;box-shadow:0 30px 70px rgba(8,14,26,.35)}
.phone img{border-radius:18px}

/* Hero: HOA (dark, split) */
.hero{padding:88px 0 0;overflow:hidden}
.hero h1{font-size:60px;font-weight:800;letter-spacing:-2px;line-height:1.03;max-width:900px;margin-bottom:24px}
.hero h1 em{font-style:normal;color:var(--blue-l)}
.hero-sub{font-size:19px;line-height:1.6;color:var(--g300);max-width:640px;margin-bottom:30px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px}
.hero-terms{font-size:14px;color:var(--g400);max-width:640px}
.hero-terms strong{color:#fff}
.hero-stage{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;align-items:end;margin-top:64px;position:relative}
.hero-stage .frame{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:none}
.hero-stage .phone{margin-bottom:-60px;position:relative;z-index:2}
.hero-glow{position:absolute;inset:auto -10% -40% -10%;height:70%;background:radial-gradient(60% 60% at 50% 40%,rgba(15,94,255,.35),transparent 70%);pointer-events:none}

/* Hero: Condo (light, editorial) */
.hero-light{padding:88px 0 96px;background:linear-gradient(180deg,#fff 0%,var(--off) 100%);border-bottom:1px solid var(--line)}
.hero-light h1{font-size:54px;font-weight:800;letter-spacing:-2px;line-height:1.03;color:var(--navy);margin-bottom:24px}
.hero-light h1 em{font-style:normal;color:var(--primary)}
.hero-light .hero-sub{color:var(--steel)}
.hero-light .hero-terms{color:var(--steel)}
.hero-light .hero-terms strong{color:var(--navy)}
.hero-grid{display:grid;grid-template-columns:1.12fr 1fr;gap:56px;align-items:center}
.stack{position:relative;padding-bottom:40px}
.stack .s2{position:absolute;right:-24px;bottom:0;width:58%}

/* Problem */
.pains{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--navy)}
.pain{padding:30px 32px 6px 0}
.pain+.pain{padding-left:32px;border-left:1px solid var(--line)}
.pain .k{font-size:13px;font-weight:800;letter-spacing:1.4px;color:var(--primary);margin-bottom:12px;font-variant-numeric:tabular-nums}
.pain h3{font-size:22px;font-weight:800;letter-spacing:-.4px;line-height:1.22;color:var(--navy);margin-bottom:12px}
.pain p{font-size:15.5px;color:var(--steel);line-height:1.6}
.quote{margin-top:56px;font-size:26px;font-weight:700;letter-spacing:-.5px;line-height:1.35;color:var(--navy);max-width:860px}
.quote span{color:var(--steel);font-weight:500}

/* Workflow */
.flow{list-style:none;display:flex;flex-direction:column;gap:96px;counter-reset:step}
.flow>li{display:grid;grid-template-columns:1fr 1.15fr;gap:64px;align-items:center}
.flow>li:nth-child(even) .flow-text{order:2}
.flow-num{display:block;font-size:13px;font-weight:700;letter-spacing:1.2px;color:var(--steel);margin-bottom:12px}
.flow h3{font-size:30px;font-weight:800;letter-spacing:-.8px;line-height:1.15;color:var(--navy);margin-bottom:14px}
.flow p{font-size:16.5px;color:var(--body);line-height:1.65;max-width:520px}
.flow ul{list-style:none;margin-top:18px;border-top:1px solid var(--line);max-width:520px}
.flow ul li{padding:11px 0 11px 26px;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink);position:relative}
.flow ul li::before{content:'';position:absolute;left:2px;top:19px;width:10px;height:6px;border-left:2px solid var(--primary);border-bottom:2px solid var(--primary);transform:rotate(-45deg)}
.flow-shot{display:flex;flex-direction:column;align-items:center}
.flow-shot .frame{width:100%}
.flow-shot .narrow{max-width:460px}
.flow-shot figcaption{align-self:stretch}

/* Anatomy (request detail with callouts) */
.anatomy{display:grid;grid-template-columns:420px 1fr;gap:72px;align-items:center}
.callouts{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 40px;border-top:1px solid var(--navy-border)}
.callouts li{padding:20px 0;border-bottom:1px solid var(--navy-border)}
.callouts h3{font-size:16px;font-weight:700;color:#fff;margin-bottom:6px}
.callouts p{font-size:14.5px;color:var(--g300);line-height:1.6}

/* Roles */
.roles{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.role{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px 24px}
.role h3{font-size:18px;font-weight:800;letter-spacing:-.2px;color:var(--navy);margin-bottom:6px}
.role .who{font-size:12px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:var(--primary);margin-bottom:14px}
.role ul{list-style:none}
.role li{font-size:14.5px;color:var(--body);line-height:1.55;padding:7px 0;border-top:1px solid var(--line)}

/* Modules (condo) */
.mods{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:2px solid var(--navy)}
.mod{padding:30px 28px 30px 0;border-bottom:1px solid var(--line)}
.mod:not(:nth-child(3n+1)){padding-left:28px;border-left:1px solid var(--line)}
.mod h3{font-size:19px;font-weight:800;letter-spacing:-.3px;color:var(--navy);margin-bottom:8px}
.mod p{font-size:15px;color:var(--steel);line-height:1.6}
.mod .tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--primary);background:var(--blue-soft);border-radius:4px;padding:3px 7px;margin-bottom:12px}

/* Split feature rows (condo) */
.split{display:grid;grid-template-columns:.8fr 1.4fr;gap:56px;align-items:center}
.split.rev{grid-template-columns:1.4fr .8fr}
.split+.split{margin-top:96px}
.split.rev .split-text{order:2}
.split h3{font-size:30px;font-weight:800;letter-spacing:-.8px;line-height:1.15;color:var(--navy);margin-bottom:14px}
.split p{font-size:16.5px;color:var(--body);line-height:1.65}
.split p+p{margin-top:12px}

/* Honest scope */
.scope{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.scope-col{border-radius:var(--r);padding:30px;border:1px solid var(--line);background:#fff}
.scope-col h3{font-size:13px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:14px}
.scope-col.yes h3{color:var(--ok)}
.scope-col.no h3{color:var(--steel)}
.scope-col ul{list-style:none}
.scope-col li{font-size:15px;color:var(--body);line-height:1.55;padding:10px 0;border-top:1px solid var(--line)}
.scope-col li strong{color:var(--navy)}

/* Pricing band */
.price{display:grid;grid-template-columns:1.15fr 1fr;gap:64px;align-items:start}
.price-card{background:var(--navy-card);border:1px solid var(--navy-border);border-radius:var(--r);padding:36px}
.price-amt{font-size:54px;font-weight:800;letter-spacing:-1.6px;line-height:1.05;color:#fff}
.price-amt span{font-size:17px;font-weight:600;letter-spacing:0;color:var(--g300);margin-left:2px}
.price-sub{font-size:14px;color:var(--g300);margin:6px 0 22px}
.price-card .btn{width:100%}
.price-alt{margin-top:22px;padding-top:18px;border-top:1px solid var(--navy-border)}
.price-alt p{font-size:14px;color:var(--g300);margin-bottom:12px}
.final-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:14px}
.final .final-ctas .btn{margin-bottom:0}
.price-terms{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:8px}
.price-terms li{position:relative;padding-left:16px;font-size:14px;line-height:1.5;color:var(--g300)}
.price-terms li::before{content:'';position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--blue-l)}
.facts{list-style:none;border-top:1px solid var(--navy-border)}
.facts li{display:grid;grid-template-columns:200px 1fr;gap:20px;padding:16px 0;border-bottom:1px solid var(--navy-border);font-size:15px;color:var(--g300)}
.facts li strong{color:#fff;font-weight:700}

/* FAQ */
.faq{display:grid;grid-template-columns:1fr 1.8fr;gap:64px;align-items:start}
.faq-side p{font-size:15px;color:var(--steel);margin-top:16px}
.faq-list{border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{padding:20px 0;font-size:16px;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;color:var(--navy)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:'+';font-size:22px;font-weight:400;color:var(--steel);flex-shrink:0;line-height:1;transition:transform .15s}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list p{font-size:15px;color:var(--steel);line-height:1.65;padding-bottom:22px;max-width:660px}

/* Related + final CTA */
.related{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.rel{display:block;border:1px solid var(--line);border-radius:var(--r);padding:28px;background:#fff;transition:border-color .15s,box-shadow .15s}
.rel:hover{border-color:var(--primary);box-shadow:0 10px 30px rgba(15,94,255,.08)}
.rel .eyebrow{margin-bottom:8px}
.rel h3{font-size:20px;font-weight:800;letter-spacing:-.3px;color:var(--navy);margin-bottom:6px}
.rel p{font-size:14.5px;color:var(--steel)}
.rel .go{display:inline-block;margin-top:14px;font-size:14px;font-weight:700;color:var(--primary)}
.final{display:grid;grid-template-columns:1.4fr 1fr;gap:64px;align-items:end}
.final h2{font-size:46px;font-weight:800;letter-spacing:-1.4px;line-height:1.06;color:var(--navy)}
.final .btn{margin-bottom:14px}

/* Footer (same structure as the landing footer) */
.sf{padding:56px 0 28px;background:var(--navy);color:#fff}
.sf-top{display:flex;justify-content:space-between;gap:48px;margin-bottom:40px;flex-wrap:wrap}
.sf-brand{max-width:300px}
.sf-brand-row{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-weight:800;font-size:16px}
.sf-brand-row img{width:30px;height:30px;border-radius:50%}
.sf-brand p{font-size:13px;color:var(--g400);line-height:1.6}
.sf-cols{display:flex;gap:56px;flex-wrap:wrap}
.sf-col{display:flex;flex-direction:column;gap:10px}
.sf-col h3{font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--g400);margin-bottom:4px}
.sf-col a{font-size:13px;color:var(--g300)}
.sf-col a:hover{color:#fff}
.sf-bottom{font-size:12px;color:var(--g400);padding-top:24px;border-top:1px solid var(--navy-border)}
.crumbs{font-size:13px;color:var(--g400);margin-bottom:22px}
.crumbs a:hover{color:#fff}
.hero-light .crumbs{color:var(--steel)}
.hero-light .crumbs a:hover{color:var(--navy)}

@media(max-width:1024px){
  .hero h1,.hero-light h1{font-size:50px}
  .hero-stage{grid-template-columns:minmax(0,1fr) 240px;gap:24px}
  .hero-grid,.flow>li,.split,.split.rev,.anatomy,.price,.faq,.final{grid-template-columns:minmax(0,1fr);gap:40px}
  .flow>li:nth-child(even) .flow-text,.split.rev .split-text{order:0}
  .roles{grid-template-columns:1fr 1fr}
  .mods{grid-template-columns:1fr 1fr}
  .mod,.mod:not(:nth-child(3n+1)){padding:26px 24px 26px 0;border-left:none}
  .mod:nth-child(even){padding-left:24px;border-left:1px solid var(--line)}
  .pains{grid-template-columns:1fr}
  .pain,.pain+.pain{padding:24px 0;border-left:none}
  .pain+.pain{border-top:1px solid var(--line)}
  .anatomy .shot{max-width:440px}
  .stack .s2{right:0}
}
@media(max-width:860px){.sh-nav{display:none}}
@media(max-width:768px){
  .wrap,.sh-in{padding:0 20px}
  .sh-in{height:56px;gap:12px}
  .sh-logo{font-size:15px}
  .sh-logo img{width:28px;height:28px}
  .sh-signin{display:none}
  .sh-act .btn{padding:9px 14px;font-size:13px}
  .sec{padding:64px 0}
  .sec-head{margin-bottom:32px}
  .eyebrow{font-size:11px;letter-spacing:1.4px;margin-bottom:10px}
  .hero{padding-top:40px}
  .hero-light{padding:40px 0 56px}
  .hero h1,.hero-light h1{font-size:clamp(30px,8.4vw,40px);letter-spacing:-1px;line-height:1.07;margin-bottom:16px}
  .hero-sub{font-size:16.5px;margin-bottom:22px}
  .hero-ctas .btn{flex:1 1 100%}
  .hero-stage{grid-template-columns:minmax(0,1fr);margin-top:40px}
  .hero-stage .phone{display:none}
  .hero-stage .frame img{max-height:460px;object-fit:cover;object-position:top}
  .h2{font-size:clamp(26px,7vw,34px);letter-spacing:-.6px;line-height:1.14}
  .lede{font-size:16px}
  .quote{font-size:20px;margin-top:36px}
  .flow{gap:64px}
  .flow h3,.split h3{font-size:24px}
  .flow p,.split p{font-size:16px}
  .split+.split{margin-top:64px}
  .frame{padding:10px}
  .roles,.mods,.scope,.related,.callouts{grid-template-columns:1fr}
  .mod,.mod:nth-child(even),.mod:not(:nth-child(3n+1)){padding:22px 0;border-left:none}
  .stack{padding-bottom:0}
  .stack .s2{position:static;width:80%;margin:-40px 0 0 auto}
  .stack>.shot:first-child .frame img{max-height:420px;object-fit:cover;object-position:top}
  .price-card{padding:26px 22px}
  .price-amt{font-size:clamp(38px,11vw,48px)}
  .facts li{grid-template-columns:1fr;gap:4px}
  .final h2{font-size:clamp(28px,7.4vw,36px)}
  .sf-top{flex-direction:column;gap:32px}
  .sf-cols{gap:32px}
}
@media(max-width:380px){.sh-act .btn .long{display:none}}

/* ── Visual hierarchy refinement ──
   One loud element per screen: the headline and the primary CTA. Section labels, card labels,
   dividers and secondary weights step down a level so they guide the eye instead of competing. */

/* Hero: price line, then a quieter terms line (same facts), then an optional jump link. */
.hero-terms{margin-bottom:6px}
.hero-fine{font-size:13px;line-height:1.55;color:var(--g400);max-width:620px}
.hero-light .hero-fine{color:var(--steel)}
.hero-more{margin-top:14px;font-size:14px;font-weight:600}
.hero-more a{color:var(--blue-l)}
.hero-light .hero-more a{color:var(--primary)}
.hero-more a:hover{text-decoration:underline}

/* Section labels: only the hero keeps the blue uppercase eyebrow. Inside sections the label is
   plain quiet sentence-case text; hierarchy comes from type, spacing and contrast, not ornaments. */
.sec .eyebrow,.rel .eyebrow{font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--steel);margin-bottom:12px}
.sec.dark .eyebrow{color:var(--g400)}

/* Module category tags become plain quiet text instead of filled chips. */
.mod .tag{background:none;padding:0;border-radius:0;color:var(--steel);text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:600;margin-bottom:8px}

/* Role cards: the role is the title; the short phrase supports it instead of competing with it. */
.role .who{font-size:16px;font-weight:800;letter-spacing:-.2px;text-transform:none;color:var(--navy);margin-bottom:4px}
.role h3{font-size:14.5px;font-weight:500;letter-spacing:0;color:var(--steel);margin-bottom:14px}

@media(max-width:768px){
  /* Header: the hero CTA leads; the header keeps sign-up reachable as a quiet outlined button. */
  .sh-act .btn{background:transparent;color:var(--primary);border:1px solid rgba(15,94,255,.35);padding:9px 12px;font-size:13px;font-weight:700}
  .sh-act .btn:hover{background:rgba(15,94,255,.06)}
  .sh-act .btn .long{display:none}

  /* Hero: breadcrumb lives in the structured data; the visual trail is dropped on phones. */
  .crumbs{display:none}
  .hero{padding-top:36px}
  .hero-light{padding:36px 0 48px}
  .hero .eyebrow,.hero-light .eyebrow{margin-bottom:12px}
  .hero-sub{font-size:16px;line-height:1.6;margin-bottom:26px}
  .hero-ctas{gap:4px;margin-bottom:18px}
  .hero-ctas .btn-p{min-height:54px;font-size:16px}
  .hero-ctas .btn-ghost{background:none;border:none;min-height:44px;padding:10px 0;font-size:15px;font-weight:600;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
  .hero .hero-ctas .btn-ghost{color:#fff;text-decoration-color:rgba(255,255,255,.4)}
  .hero-light .hero-ctas .btn-ghost{color:var(--navy);text-decoration-color:rgba(8,14,26,.3)}
  .hero-terms{font-size:14px}
  .hero-fine{font-size:12.5px}
  .hero-more{display:none}
  .hero-stage{margin-top:36px}
  .stack .s2{display:none}

  /* Rhythm: more air between sections, fewer rules inside them. */
  .hero + .sec{padding-top:76px !important}
  .flow-shot .frame img,.split .frame img{max-height:560px;object-fit:cover;object-position:top}
  .sec{padding:76px 0}
  .sec-head{margin-bottom:30px}
  .sec .eyebrow{font-size:12.5px;margin-bottom:12px}
  .lede{color:var(--body)}
  .dark .lede{color:var(--g300)}

  /* Problem: three short statements, no rules between them. */
  .pains{border-top:none;gap:22px}
  .pain,.pain+.pain{padding:0;border:none}
  .pain .k{font-size:12px;color:var(--steel);margin-bottom:6px}
  .pain h3{font-size:18px;font-weight:700;letter-spacing:-.2px;margin-bottom:6px}
  .pain p{font-size:15px}
  .quote{font-size:18px;font-weight:600;line-height:1.5;margin-top:40px}

  /* Workflow: smaller step titles, checklists without dividers, calmer screenshots. */
  .flow{gap:72px}
  .flow-num{font-size:12px;margin-bottom:10px}
  .flow h3,.split h3{font-size:22px;font-weight:700;letter-spacing:-.4px}
  .flow ul{border-top:none;margin-top:14px}
  .flow ul li{border-bottom:none;padding:5px 0 5px 24px;font-size:14.5px;color:var(--body)}
  .flow ul li::before{top:12px}
  .flow-text{margin-bottom:6px}
  .flow-shot .phone{max-width:270px;padding:9px;border-radius:24px}
  .flow-shot .phone img{border-radius:16px}
  .flow-shot .narrow{max-width:290px}

  /* Request anatomy: on phones step 02 already shows this screen, so here only the facts list. */
  .anatomy-shot{display:none}
  .anatomy{gap:0}
  .callouts{border-top:none;gap:0}
  .callouts li{border-bottom:none;padding:10px 0}
  .callouts h3{font-size:15px}
  .callouts p{font-size:14px}

  /* Cards: lighter, no rules inside. */
  .roles{gap:12px}
  .role{padding:20px}
  .role h3{margin-bottom:8px}
  .role li{border-top:none;padding:3px 0;font-size:14px}
  .scope{gap:12px}
  .scope-col{padding:22px}
  .scope-col h3{margin-bottom:6px}
  .scope-col li{border-top:none;padding:7px 0;font-size:14.5px}

  /* Modules: name and one line each; the category tag is dropped on phones. */
  .mods{border-top:none;gap:0}
  .mod,.mod:nth-child(even),.mod:not(:nth-child(3n+1)){padding:0 0 24px;border:none}
  .mod .tag{display:none}
  .mod h3{font-size:17px;font-weight:700;margin-bottom:4px}
  .mod p{font-size:14.5px}
  .split+.split{margin-top:72px}

  /* Pricing: the offer card comes first; the detail table follows with softer rules. */
  .price{display:flex;flex-direction:column;gap:0}
  .price>div:first-child{display:contents}
  .price .eyebrow{order:1}
  .price .h2{order:2}
  .price .lede{order:3;margin-bottom:28px !important}
  .price-card{order:4;margin-bottom:32px}
  .facts{order:5}
  .facts{border-top-color:rgba(255,255,255,.08)}
  .facts li{border-bottom-color:rgba(255,255,255,.08);padding:13px 0;font-size:14.5px}
  .price-terms li{font-size:13px}
  .price-alt{margin-top:20px;padding-top:16px}

  /* Closing: primary CTA full width, quote as a quiet text link under it. */
  .related{gap:12px;margin-bottom:72px !important}
  .rel{padding:22px}
  .rel h3{font-size:18px}
  .final{gap:24px}
  .final-ctas{gap:4px}
  .final-ctas .btn-p{flex:1 1 100%;min-height:54px}
  .final-ctas .btn-ghost{flex:1 1 100%;background:none;border:none;min-height:44px;padding:10px 0;font-weight:600;color:var(--navy);text-decoration:underline;text-underline-offset:5px;text-decoration-color:rgba(8,14,26,.3)}
}

/* A <picture> that swaps to a different screen on phones swaps its caption with it (same 600px breakpoint). */
.cap-narrow{display:none}
@media(max-width:600px){.cap-wide{display:none}.cap-narrow{display:inline}}