/* GTM by Galien — shared robustness layer.
   Loaded AFTER each page's inline <style>. Fixes only: no visual redesign lives here.
   Keep this file linked on every page: <link rel="stylesheet" href="assets/site.css"> */

/* 1. Grid blowout guard. A grid/flex child defaults to min-width:auto, so one wide
      descendant (the 5-stat row on the homepage) could force the whole column, and the
      page, wider than the phone. */
.ed>*,.gc>*,.paths>*,.steps>*,.price>*,.split2>*,.ba>*,.nstats>*,.strip>*,
.pb-intro>*,.pb-req>*,.two-col>*,.sv-stats>*{min-width:0}
body{overflow-wrap:break-word}

/* 2. Images: width/height attributes are now set in the HTML (reserves space, so lazy
      images no longer shift the layout or the anchor position). height:auto keeps the
      ratio; any more specific rule (.strip img{height:130px}, inline heights) still wins. */
img{height:auto}

/* 3. Responsive grids that used to be inline styles (inline styles beat media queries,
      so these never collapsed on phones). */
.pb-intro{display:grid;grid-template-columns:260px 1fr;gap:40px;align-items:start}
.pb-req{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
@media(max-width:760px){.pb-intro,.pb-req{grid-template-columns:1fr;gap:24px}.pb-intro>:first-child{max-width:280px}}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:36px}
@media(max-width:760px){.two-col{grid-template-columns:1fr;gap:24px}}
.two-col.tight{gap:14px}
@media(max-width:760px){.two-col.tight{gap:14px}}
.steps.s2{grid-template-columns:1.4fr 1fr}
.gc.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:920px){.steps.s2,.gc.g3{grid-template-columns:1fr}}
.sv-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:880px){.sv-stats{grid-template-columns:1fr 1fr}}
@media(max-width:420px){.sv-stats{grid-template-columns:1fr}}

/* 4. Anchors: every in-page target clears the sticky header. */
[id]{scroll-margin-top:84px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* 5. "On this page": readable tap targets, and the mobile dropdown. */
.chapnav .cn-links{display:flex;flex-wrap:wrap;gap:4px 18px}
.chapnav a[aria-current="true"]{color:var(--ink);font-weight:600}
@media(max-width:640px){.chapnav .cn-links{display:none}.chapnav>.w>b{display:none}
 .chapnav summary{list-style-position:inside}
 .chapnav details a{padding:12px 0}}

/* 6. Budget frame on a phone: each line's label sits above its three fields, so the fields are
      wide enough for 16px text (anything smaller makes iPhone Safari zoom the page on focus). */
@media(max-width:640px){
 .bud-body{padding:14px}
 table.bt,table.bt tbody,table.bt thead{display:block}
 table.bt tr{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 8px;padding:10px 0;border-bottom:1px solid var(--border)}
 table.bt tr>:first-child{grid-column:1/-1;text-align:left}
 table.bt th,table.bt td{border:0;padding:0}
 table.bt th:first-child{display:none}
 table.bt tr:first-child{padding:0 0 6px;border-bottom:2px solid var(--ink)}
 table.bt input{width:100%;min-width:0;min-height:44px;font-size:16px;padding:9px 8px}
 table.bt tr.tot{border-bottom:0;border-top:2px solid var(--ink)}
 table.bt tr.tot td{border:0;padding:0;font-size:15px;white-space:nowrap}
 .bud-tab{min-width:50%;min-height:48px}
}
.bud-tab:focus-visible,.opt:focus-visible,.qa-q:focus-visible,.art-back:focus-visible,
.ins-c:focus-visible,.ins-feat:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* 7. Back-to-top no longer sits underneath the chat launcher pill. */
.btt{right:auto;left:20px}

/* 8. Mobile menu can never stay stuck on a desktop-width window. */
@media(min-width:901px){.mob,.mob.on{display:none}}

/* 9. Insights: the article title is an <h2> (one <h1> per page); style it as intended. */
.art>h2{font-family:var(--sans);font-weight:800;font-size:clamp(26px,3.6vw,38px);line-height:1.14;letter-spacing:-.02em;margin-bottom:12px}
.ins-c h3 a,.ins-feat h2 a{color:inherit;text-decoration:none}

/* 10. Playbook request: inline confirmation state. */
.form-err{display:none;font-family:var(--sans);font-size:13px;color:var(--accent);margin-top:8px}
.form-err.on{display:block}
.done.on{display:block}

/* 11. Nav CTA: ".nl a" (grey, 12.5px) out-ranked ".cta-b" (white, bold), so "Book a meeting"
       rendered grey on blue. Restore the intended button. */
.nl a.cta-b,.nl a.cta-b:hover{color:#fff;font-size:13.5px;font-weight:700}
.cta-b{display:inline-flex;align-items:center;gap:8px;border-radius:6px;padding:9px 16px;letter-spacing:.01em;
 box-shadow:0 1px 2px rgba(26,29,35,.12);transition:background .15s ease,box-shadow .15s ease}
.cta-b::before{content:"";width:7px;height:7px;border-radius:50%;background:#7CD4A3;flex:none}   /* "available" dot */
.cta-b:hover{box-shadow:0 3px 10px rgba(36,67,155,.28)}

/* 12. Phones. iPhone Safari is the reference device. */
h1,h2,h3{text-wrap:balance}              /* no one-word last line in headings; older browsers ignore it */
html{-webkit-text-size-adjust:100%}      /* no surprise font inflation in landscape */
@media(max-width:900px){
 .burger{padding:15px 13px;margin-right:-7px}   /* 44x44 tap target; the icon itself does not move */
}
@media(max-width:760px){
 /* Safari zooms on any field under 16px and leaves the page zoomed */
 .fcard-form input,.fcard-form select,.fcard-form textarea,.sim select{font-size:16px}
 .fcard-form input,.fcard-form select,.sim select{min-height:46px}
 .fcard-form .btn{min-height:48px}
 .fcard-form .legal{font-size:12px}
 /* comfortable tap targets, same look */
 .door-subs a{padding:13px 14px}
 .opt{min-height:44px;padding:10px 14px}
 .chapnav summary{padding:12px 0}
 details>summary{padding-top:8px;padding-bottom:8px}
 .card .rf{align-items:center}
 .card .rf a{padding:12px 0 12px 14px;margin:-12px 0}
 .ins-c .cat{font-size:11px}
 /* footer: tappable links, and room so the chat button never covers them */
 footer{padding-bottom:88px}
 footer .fl{flex-wrap:wrap;gap:0 18px}
 footer .fl a{display:inline-block;padding:12px 0}
}

/* 13. Homepage cards: ".path-b a" (13.5px) also hit the link inside each card title, so
       "Work with me / Go to US / My journey" rendered smaller than the text under them. */
.path-b h3 a{font-size:inherit;font-weight:inherit;color:inherit}
/* Price line: on a narrow phone the unit goes under the amount instead of breaking mid-phrase */
@media(max-width:480px){.unit{display:block;margin-top:2px}}

/* 14. Funding estimate (Offer page). Reuses the .sim box; only the result list is new. */
.fsim .fs-q{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.fsim .fs-q>div{min-width:0}
.fs-list{list-style:none;margin:16px 0 0;padding:0}
.fs-r{display:grid;grid-template-columns:118px 1fr auto;gap:6px 14px;align-items:start;padding:12px 0;border-top:1px solid var(--border)}
.fs-r:first-child{border-top:0}
.fs-b{font-family:var(--sans);font-size:11px;font-weight:600;padding:3px 8px;border-radius:2px;justify-self:start;white-space:nowrap}
.fs-b.likely{color:#1D6B4A;background:#E8F5EE}
.fs-b.check{color:var(--blue);background:#EEF1FA}
.fs-b.later{color:var(--mid);background:var(--bg2)}
.fs-n b{display:block;font-family:var(--sans);font-size:14.5px;font-weight:700;color:var(--ink);margin-bottom:2px}
.fs-n span{display:block;font-size:13.5px;color:var(--mid);line-height:1.55}
.fs-a{font-family:var(--sans);font-size:13.5px;font-weight:700;color:var(--ink);text-align:right;white-space:nowrap}
.fs-foot{font-size:12.5px;color:var(--light);line-height:1.6;margin-top:16px;padding-top:12px;border-top:1px solid var(--border)}
@media(max-width:760px){
 .fsim .fs-q{grid-template-columns:1fr}
 .fs-r{grid-template-columns:1fr auto}
 .fs-r .fs-b{grid-column:1/-1}
 .fs-n{grid-column:1/-1}
 .fs-a{grid-column:1/-1;text-align:left;white-space:normal}
 .fsim .out .amt{font-size:22px;line-height:1.25}
}

/* 15. Phones: the fixed back-to-top button sat over the text while reading.
       iPhone Safari already scrolls to the top with a tap on the status bar. */
@media(max-width:760px){.btt{display:none !important}}

/* 16. Insights: the date opens every article */
.art-date{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:4px 0 8px}

/* 17. Mobile menu: "Book a meeting" is a real button, not one more list row,
       and the chat bubble steps aside while the menu is open. */
.mob a[href*="calendly.com"]{margin-top:10px;border:0;border-radius:6px;background:var(--blue);color:#fff;
 text-align:center;font-weight:700;font-size:16px;padding:15px 18px;display:flex;align-items:center;justify-content:center;gap:8px}
.mob a[href*="calendly.com"]::before{content:"";width:7px;height:7px;border-radius:50%;background:#7CD4A3}
.mob a[href*="calendly.com"]:active{background:var(--blue-d)}
body:has(.mob.on) .ag-launcher,body:has(.mob.on) .ag-invite{display:none !important}

/* 18. Track record: organizations shown as tags */
.trust-row{gap:8px;border:0;padding:6px 0 0}
.trust-row span{display:inline-block;font-size:13.5px;font-weight:600;color:var(--ink);background:var(--white);
 border:1px solid var(--border);border-radius:999px;padding:7px 14px;line-height:1.2}
@media(max-width:760px){.trust-row span{font-size:13px;padding:7px 12px}}

/* 19. Simulator badge and callouts (Offer, homepage, Decision tools) */
.sim-badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.06em;
 text-transform:uppercase;color:#1D6B4A;background:#E8F5EE;border-radius:999px;padding:6px 12px;margin:0 0 12px}
.sim-badge span{width:7px;height:7px;border-radius:50%;background:#2E9E62}
.sim-call{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:26px;padding:20px 22px;
 background:var(--white);border:1px solid var(--border);border-left:4px solid #2E9E62;border-radius:8px}
.sim-call .t{font-family:var(--sans);font-weight:800;font-size:18px;color:var(--ink);margin:6px 0 4px}
.sim-call p{font-size:15px;color:var(--mid);margin:0;max-width:560px;line-height:1.6}
.sim-call .btn{white-space:nowrap}
@media(max-width:640px){.sim-call{padding:18px}.sim-call .btn{width:100%;text-align:center}}

/* 20. Offer: the network section */
.net-band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:28px;margin-top:22px;padding:26px;background:var(--white);
 border:1px solid var(--border);border-radius:10px}
.net-num .n{font-family:var(--sans);font-size:clamp(48px,7vw,72px);font-weight:800;color:var(--blue);line-height:1;letter-spacing:-.03em}
.net-num .l{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--mid);margin-top:8px}
.net-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.net-tag{font-family:var(--sans);font-size:12.5px;color:var(--ink);background:var(--bg2);border:1px solid var(--border);border-radius:999px;padding:6px 12px}
.net-use{display:grid;gap:16px;align-content:start}
.net-use b{display:block;font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:4px}
.net-use p{font-size:16px;color:var(--mid);line-height:1.6;margin:0}
.net-foot{font-size:14.5px;color:var(--mid);line-height:1.7;max-width:880px;margin-top:16px}
@media(max-width:760px){.net-band{grid-template-columns:1fr;padding:20px;gap:22px}}
.sim-call .sim-badge{color:#1D6B4A;font-size:12px;line-height:1.2;max-width:none}

/* 21. Track record: tags that link to the organization's site */
.trust-row a{display:inline-block;font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--ink);background:var(--white);
 border:1px solid var(--border);border-radius:999px;padding:7px 14px;line-height:1.2;text-decoration:none;
 transition:border-color .15s ease,background .15s ease}
.trust-row a::after{content:" \2197";color:var(--light);font-weight:400}
.trust-row a:hover{border-color:var(--ink);background:var(--bg2)}
.trust-row a:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media(max-width:760px){.trust-row a{font-size:13px;padding:9px 12px}}

/* 22. Homepage: the two-window method and the fit blocks */
.tw-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
.tw-card{background:var(--white);border:1px solid var(--border);border-radius:10px;padding:22px}
.tw-card h3{font-family:var(--sans);font-size:19px;font-weight:800;margin:6px 0 8px;color:var(--ink)}
.tw-card p{font-size:16px;line-height:1.65;color:var(--mid);margin:0}
.tw-card .tw-k{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.fit-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:40px}
.fit-yes,.fit-no{list-style:none;margin:14px 0 0;padding:0}
.fit-yes li,.fit-no li{position:relative;padding:12px 0 12px 30px;border-top:1px solid var(--border);font-size:16.5px;line-height:1.6;color:var(--ink)}
.fit-yes li::before{content:"\2713";position:absolute;left:4px;top:12px;color:#2E9E62;font-weight:700}
.fit-no li{color:var(--mid)}
.fit-no li::before{content:"\2715";position:absolute;left:4px;top:12px;color:var(--accent);font-weight:700}
@media(max-width:760px){.tw-grid,.fit-grid{grid-template-columns:1fr}.fit-grid{gap:28px}.tw-card{padding:18px}}

/* 23. Track record: case notes. Placeholders show on previews only (see site.js). */
.case-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
.case{background:var(--white);border:1px solid var(--border);border-radius:10px;padding:22px}
.case-tag{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin:0 0 10px}
.case dl{margin:0}
.case dt{font-family:var(--sans);font-size:13px;font-weight:700;color:var(--ink);margin-top:12px}
.case dd{margin:4px 0 0;font-size:15.5px;line-height:1.65;color:var(--mid)}
.case-quotes{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.todo{background:#FFF6D6;border:1px dashed #C9A227;color:#6B5600;font-family:var(--sans);font-size:13px;padding:2px 6px;border-radius:4px}
blockquote.todo{margin:0;padding:16px}
html:not(.is-preview) [data-todo]{display:none !important}
@media(max-width:760px){.case-grid,.case-quotes{grid-template-columns:1fr}.case{padding:18px}}

/* 24. Insights: article tables scroll inside their box on narrow phones instead of widening the page */
.art,.art-body{min-width:0;max-width:100%}
.art-body .tbl{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:420px){.art-body .tb{font-size:13px}.art-body .tb th,.art-body .tb td{padding:8px 8px}}
/* 25. Insights: an odd card at the end takes the full row instead of leaving an empty slot */
.ins-grid>.ins-c:last-child:nth-child(odd){grid-column:1/-1}

/* 26. "Read more": long text is folded, never removed. The toggle sits under the text it opens. */
details.more{display:flex;flex-direction:column;margin:0 0 14px}
details.more>summary{order:2;list-style:none;cursor:pointer;align-self:flex-start;font-family:var(--sans);font-size:14px;font-weight:600;
 color:var(--blue);padding:6px 0;min-height:32px;display:inline-flex;align-items:center;gap:6px}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .15s ease}
details.more[open]>summary::after{transform:rotate(-135deg) translateY(-1px)}
details.more>summary:hover{text-decoration:underline}
details.more>summary:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px}
details.more .m-c,details.more[open] .m-o{display:none}
details.more[open] .m-c{display:inline}
details.more>:not(summary){order:1}
@media(max-width:760px){details.more>summary{min-height:44px}}
@media print{details.more>*{display:block !important}details.more>summary{display:none !important}}
