/* Insurance Rise (was Reshapery) v7 (was Live in Thirty v5): an advisory-firm look, deliberately unlike the InsureHiring, state staffing and SF Data Labs
   sites (no pill buttons, no rounded cards, no black or lime, no green) and unlike Claude (no serif, no warm cream,
   no terracotta). Cool white, navy ink, one cobalt accent, Plus Jakarta Sans throughout, square corners, rules. */
:root {
  --bg: #FFFFFF;
  --bg-2: #F2F5F9;
  --line: #DFE4EC;
  --line-2: #C7CFDB;
  --ink: #0B1730;
  --ink-2: #47536B;
  --ink-3: #8592A8;
  --acc: #1F4FD8;
  --acc-2: #163DB0;
  --acc-soft: #E8EEFC;
  --red: #C0392B;
  --serif: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--acc-soft); }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
.wrap { max-width: 1240px; margin: 0 auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 700; letter-spacing: -.03em; text-wrap: balance; }
h1 { font-size: clamp(2.7rem, 6.8vw, 5.8rem); line-height: 1; letter-spacing: -.045em; }
h2 { font-size: clamp(2.2rem, 4.8vw, 3.9rem); line-height: 1.02; letter-spacing: -.03em; }
h3 { font-size: 1.55rem; line-height: 1.15; letter-spacing: -.02em; }
h1 em, h2 em { font-style: normal; color: var(--acc); }
p { margin: 0; text-wrap: pretty; }
.lede { color: var(--ink-2); font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.55; max-width: 46ch; }
section { padding-block: clamp(80px, 11vw, 150px); position: relative; }
.rule { border-top: 1px solid var(--ink); }
.head { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 60px; align-items: end; margin-bottom: clamp(40px, 6vw, 70px); }
.head .lede { justify-self: end; }
@media (max-width: 860px) { .head { grid-template-columns: 1fr; } .head .lede { justify-self: start; } }

/* buttons: square, oxblood */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 56px; padding: 0 28px; border-radius: 2px; border: 0; font: 500 1rem/1 var(--sans); cursor: pointer; white-space: nowrap; transition: background .2s, color .2s; }
.btn-primary { background: var(--acc); color: #fff; }
.btn-primary:hover { background: var(--acc-2); }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.btn-ghost:hover { background: var(--ink); color: #fff; }
.btn-sm { height: 42px; padding: 0 18px; font-size: .92rem; }
.btn .arr { transition: transform .2s; }
.btn:hover .arr { transform: translateX(4px); }

/* nav */
.nav { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.nav-inner { max-width: 1240px; margin: 0 auto; padding: 0 24px; height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.logo { display: inline-flex; align-items: baseline; gap: 6px; font: 700 1.35rem/1 var(--serif); letter-spacing: -.03em; }
.logo i { font-style: normal; color: var(--acc); }
.nav-links { display: flex; align-items: center; gap: 30px; font-size: .95rem; color: var(--ink-2); }
.nav-links a:hover, .nav-links .cur { color: var(--acc); }
.nav-links .tag { font-style: normal; font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--acc); background: var(--acc-soft); padding: 3px 6px; margin-left: 4px; vertical-align: 2px; }
/* use cases menu: opens on hover or keyboard focus */
.dd { position: relative; }
.dd-b { appearance: none; border: 0; background: transparent; font: inherit; color: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 26px 0; }
.dd-b i { font-style: normal; font-size: .7rem; transition: transform .2s; }
.dd-b:hover { color: var(--acc); }
.dd-m { position: absolute; top: 100%; left: -22px; width: 560px; display: none; grid-template-columns: 1fr 1fr; background: #fff; border: 1px solid var(--line); border-top: 2px solid var(--acc); box-shadow: 0 24px 48px -24px rgba(11,23,48,.3); padding: 10px; }
.dd:hover .dd-m, .dd:focus-within .dd-m { display: grid; }
.dd:hover .dd-b i, .dd:focus-within .dd-b i { transform: rotate(180deg); }
.dd-m a { display: grid; gap: 3px; padding: 12px 14px; }
.dd-m a:hover { background: var(--bg-2); }
.dd-m b { color: var(--ink); font-weight: 600; }
.dd-m span { font-size: .85rem; color: var(--ink-3); line-height: 1.4; }
@media (max-width: 960px) { .nav-links { display: none; } }

/* hero */
.hero { padding-top: clamp(70px, 9vw, 120px); padding-bottom: clamp(56px, 7vw, 90px); }
.kicker { font-size: .95rem; color: var(--ink-2); display: flex; align-items: center; gap: 12px; }
.kicker::before { content: ""; width: 28px; height: 1px; background: var(--acc); }
.hero h1 { margin-top: 26px; max-width: 15ch; }
.hero-row { margin-top: 40px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: end; }
@media (max-width: 900px) { .hero-row { grid-template-columns: 1fr; } }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.modes { border-top: 1px solid var(--ink); }
.mode { display: grid; grid-template-columns: 46px 1fr; gap: 6px 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.mode span { font: 700 1.6rem/1 var(--serif); color: var(--acc); grid-row: span 2; }
.mode b { font-weight: 600; font-size: 1.05rem; }
.mode small { color: var(--ink-2); font-size: .95rem; }

/* credibility */
.proof { padding-block: 0; }
.pf-row { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.pf { padding: 30px 26px 30px 0; }
.pf + .pf { padding-left: 26px; border-left: 1px solid var(--line); }
@media (max-width: 900px) { .pf-row { grid-template-columns: 1fr 1fr; } .pf:nth-child(3) { border-left: 0; padding-left: 0; } .pf:nth-child(n+3) { border-top: 1px solid var(--line); } }
.pf b { display: block; font: 700 clamp(2.4rem, 4.4vw, 3.6rem)/1 var(--serif); letter-spacing: -.045em; white-space: nowrap; }
.pf span { display: block; margin-top: 10px; color: var(--ink-2); font-size: .95rem; max-width: 24ch; }
.ams { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 0; padding: 20px 0; border-bottom: 1px solid var(--line); font-size: .95rem; color: var(--ink-2); }
.ams b { color: var(--ink); font-weight: 600; margin-right: 14px; }
.ams span + span::before { content: "·"; margin: 0 12px; color: var(--ink-3); }

/* services: numbered areas */
.areas { border-top: 1px solid var(--ink); }
.area { display: grid; grid-template-columns: 90px 1fr 1.6fr; gap: 20px 40px; padding: 38px 0; border-bottom: 1px solid var(--line); }
@media (max-width: 900px) { .area { grid-template-columns: 1fr; gap: 14px; } }
.area-n { font: 700 2.6rem/1 var(--serif); color: var(--acc); }
.area-t h3 { font-size: clamp(1.8rem, 2.8vw, 2.3rem); }
.area-t p { margin-top: 10px; color: var(--ink-2); }
.area-t a { display: inline-flex; gap: 8px; margin-top: 16px; font-weight: 500; color: var(--acc); border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.area-s { display: grid; }
.svc { display: grid; grid-template-columns: 1fr 1.2fr; gap: 4px 24px; padding: 16px 0; border-top: 1px solid var(--line); }
.svc:first-child { border-top: 0; padding-top: 4px; }
@media (max-width: 560px) { .svc { grid-template-columns: 1fr; } }
.svc b { font-weight: 600; font-size: 1.05rem; }
.svc span { color: var(--ink-2); font-size: .97rem; }

/* guide, implement, both */
.ways { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); }
@media (max-width: 900px) { .ways { grid-template-columns: 1fr; } }
.way { padding: 34px 30px 36px 0; display: grid; gap: 14px; align-content: start; }
.way + .way { padding-left: 30px; border-left: 1px solid var(--line); }
@media (max-width: 900px) { .way + .way { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); } }
.way .n { font: 700 1.2rem/1 var(--serif); color: var(--acc); }
.way h3 { font-size: 2.2rem; }
.way p { color: var(--ink-2); }
.way ul { list-style: none; margin: 6px 0 0; padding: 0; }
.way li { padding: 10px 0; border-top: 1px solid var(--line); font-size: .97rem; display: flex; gap: 10px; }
.way li::before { content: "—"; color: var(--acc); }
.way.hl { background: var(--acc); color: #fff; padding: 34px 30px 36px; border-left: 0; }
.way.hl .n, .way.hl li::before { color: #BFD0FF; }
.way.hl p { color: rgba(255,255,255,.8); }
.way.hl li { border-color: rgba(255,255,255,.2); }
@media (max-width: 900px) { .way.hl { padding: 30px 24px; } }

/* questions agencies bring */
.qlist { border-top: 1px solid var(--ink); display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 860px) { .qlist { grid-template-columns: 1fr; } }
.q { display: grid; grid-template-columns: 1fr; gap: 10px; align-content: start; padding: 24px 30px 24px 0; border-bottom: 1px solid var(--line); }
.q:nth-child(even) { padding-left: 30px; padding-right: 0; border-left: 1px solid var(--line); }
@media (max-width: 860px) { .q:nth-child(even) { padding-left: 0; border-left: 0; } }
.q p { font: 500 clamp(1.3rem, 2vw, 1.6rem)/1.3 var(--serif); letter-spacing: -.01em; }
.q span { font-size: .85rem; color: var(--acc); white-space: nowrap; }

/* the call */
.call-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
@media (max-width: 960px) { .call-grid { grid-template-columns: 1fr; } }
.call-grid h2 { margin-bottom: 18px; }
.steps { margin-top: 36px; border-top: 1px solid var(--ink); }
.st { display: grid; grid-template-columns: 120px 1fr; gap: 6px 24px; padding: 22px 0; border-bottom: 1px solid var(--line); }
@media (max-width: 560px) { .st { grid-template-columns: 1fr; } }
.st-t { font: 700 1.25rem/1.2 var(--serif); color: var(--acc); grid-row: span 2; }
.st b { font-weight: 600; font-size: 1.1rem; }
.st p { color: var(--ink-2); }
.memo { background: var(--bg-2); border: 1px solid var(--line); padding: 32px; position: relative; }
.memo::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--acc); }
.memo-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line-2); }
.memo-h b { font: 700 1.5rem/1.1 var(--serif); }
.memo-h span { font-size: .82rem; color: var(--ink-3); text-align: right; }
.tk { display: grid; grid-template-columns: 30px 1fr; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.tk i { font: 700 1.3rem/1 var(--serif); color: var(--acc); font-style: normal; }
.tk b { display: block; font-weight: 600; }
.tk small { display: block; margin-top: 4px; color: var(--ink-2); font-size: .94rem; line-height: 1.45; }
.memo-f { padding-top: 16px; font-size: .88rem; color: var(--ink-3); }

/* safe AI */
.safe { background: var(--bg-2); border-block: 1px solid var(--line); }
.safe-row { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); }
@media (max-width: 900px) { .safe-row { grid-template-columns: 1fr 1fr; } }
.sf { padding: 26px 24px 26px 0; display: grid; gap: 10px; }
.sf + .sf { padding-left: 24px; border-left: 1px solid var(--line); }
@media (max-width: 900px) { .sf:nth-child(3) { border-left: 0; padding-left: 0; } .sf:nth-child(n+3) { border-top: 1px solid var(--line); } }
.sf .n { font: 700 1.2rem/1 var(--serif); color: var(--acc); }
.sf b { font-weight: 600; font-size: 1.05rem; line-height: 1.35; }

/* service detail (area pages) */
.sds { border-top: 1px solid var(--ink); }
.sd { display: grid; grid-template-columns: 90px 1fr 1fr 1fr; gap: 20px 36px; padding: 40px 0; border-bottom: 1px solid var(--line); }
@media (max-width: 1000px) { .sd { grid-template-columns: 1fr; gap: 16px; } }
.sd .n { font: 700 2.4rem/1 var(--serif); color: var(--acc); }
.sd h3 { font-size: clamp(1.7rem, 2.6vw, 2.2rem); }
.sd-h p { margin-top: 10px; color: var(--ink-2); }
.sd ul { list-style: none; margin: 0; padding: 0; }
.sd li { padding: 10px 0; border-top: 1px solid var(--line); display: flex; gap: 10px; font-size: .97rem; }
.sd li:first-child { border-top: 0; padding-top: 2px; }
.sd li::before { content: "—"; color: var(--acc); }
.sd-q { font: 500 1.35rem/1.3 var(--serif); }
.sd-q span { display: block; font: 500 .85rem/1 var(--sans); font-style: normal; color: var(--acc); margin-bottom: 12px; }
.also { margin-top: 26px; color: var(--ink-2); }
.also a { color: var(--acc); border-bottom: 1px solid currentColor; }
.also a + a { margin-left: 18px; }

/* faq */
.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
@media (max-width: 860px) { .faq-grid { grid-template-columns: 1fr; } }
.faq { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 24px 0; display: flex; justify-content: space-between; align-items: center; gap: 24px; font: 600 1.3rem/1.3 var(--serif); letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font: 300 1.8rem/1 var(--sans); color: var(--acc); transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--ink-2); padding: 0 40px 24px 0; }

/* form */
.cta { padding-top: 0; }
.cta-card { border-top: 4px solid var(--acc); background: var(--bg-2); padding: clamp(28px, 5vw, 64px); display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
@media (max-width: 900px) { .cta-card { grid-template-columns: 1fr; } }
.cta-card .lede { margin-top: 20px; }
.points { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--line-2); }
.points li { padding: 12px 0; border-bottom: 1px solid var(--line-2); display: flex; gap: 10px; }
.points li::before { content: "—"; color: var(--acc); }
form { background: #fff; border: 1px solid var(--line); padding: clamp(20px, 3vw, 32px); display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
form .full { grid-column: 1 / -1; }
@media (max-width: 560px) { form { grid-template-columns: 1fr; } }
label.f, .f { display: grid; gap: 7px; font-size: .86rem; font-weight: 500; color: var(--ink-2); }
.f.big { font: 700 1.25rem/1.2 var(--serif); color: var(--ink); }
input, select, textarea { width: 100%; font: 400 1rem/1.3 var(--sans); color: var(--ink); background: #fff; border: 1px solid var(--line-2); border-radius: 2px; padding: 13px 14px; transition: border-color .2s, box-shadow .2s; }
select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%23514C55' stroke-width='1.4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 12px; padding-right: 34px; cursor: pointer; }
input::placeholder, textarea::placeholder { color: var(--ink-3); }
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft); }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 6px; }
.form-foot small { color: var(--ink-3); font-size: .84rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.done-msg { display: none; grid-column: 1 / -1; padding: 50px 10px; }
.done-msg h3 { font-size: 2rem; }
.done-msg p { color: var(--ink-2); margin-top: 10px; }
form.sent > *:not(.done-msg) { display: none; }
form.sent .done-msg { display: block; }
.err { grid-column: 1 / -1; color: var(--red); font-size: .9rem; display: none; margin: 0; }

footer { border-top: 1px solid var(--ink); padding: 34px 0 calc(34px + env(safe-area-inset-bottom, 0px)); color: var(--ink-3); font-size: .88rem; }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
footer .logo { color: var(--ink); font-size: 1.25rem; }
.foot-links { display: flex; flex-wrap: wrap; gap: 20px; }
.foot-links a:hover { color: var(--acc); }

.reveal { opacity: 0; transform: translateY(14px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } * { scroll-behavior: auto; } }

/* AMS product logos, shown in greyscale so no single brand dominates */
.logos { padding: 30px 0 34px; border-bottom: 1px solid var(--line); }
.logo-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 28px; align-items: center; justify-items: center; }
@media (max-width: 760px) { .logo-row { grid-template-columns: repeat(3, 1fr); gap: 26px 18px; } }
.logo-row img { height: 30px; width: auto; max-width: 100%; object-fit: contain; filter: grayscale(1) contrast(1.15); opacity: .72; transition: filter .2s, opacity .2s; }
.logo-row img.tall { height: 46px; }
.logo-row img:hover { filter: none; opacity: 1; }

/* Applied Epic: Applied's mark beside the product name */
.lockup { display: inline-flex; align-items: center; gap: 10px; font: 600 1.25rem/1 var(--serif); letter-spacing: -.02em; color: #555; filter: grayscale(1); opacity: .8; white-space: nowrap; }
.lockup img { height: 26px; width: auto; }

/* examples of the work */
.ex-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); }
@media (max-width: 900px) { .ex-grid { grid-template-columns: 1fr; } }
.ex-c { padding: 28px 28px 30px 0; border-bottom: 1px solid var(--line); display: grid; gap: 10px; align-content: start; }
.ex-c:not(:nth-child(3n+1)) { padding-left: 28px; border-left: 1px solid var(--line); }
@media (max-width: 900px) { .ex-c:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; } }
.ex-t { font-size: .82rem; font-weight: 600; color: var(--acc); }
.ex-c h3 { font-size: 1.3rem; }
.ex-c p { color: var(--ink-2); font-size: .98rem; }

/* AI safety: risks vs what we set up */
.risk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 860px) { .risk-grid { grid-template-columns: 1fr; } }
.risks, .fixes { background: #fff; border: 1px solid var(--line); padding: 28px; }
.fixes { border-top: 4px solid var(--acc); }
.risks { border-top: 4px solid var(--red); }
.risks h3, .fixes h3 { font-size: 1.3rem; margin-bottom: 8px; }
.rk, .fx { padding: 14px 0; border-top: 1px solid var(--line); display: grid; gap: 4px; }
.rk b, .fx b { font-weight: 600; }
.rk span, .fx span { color: var(--ink-2); font-size: .96rem; }

/* v6: how a deployment works (5 steps) and size segments (4 cards) */
.how { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--ink); }
.hw { padding: 26px 22px 28px 0; display: grid; gap: 10px; align-content: start; }
.hw + .hw { padding-left: 22px; border-left: 1px solid var(--line); }
.hw .n { font: 700 1.1rem/1 var(--serif); color: var(--acc); }
.hw b { font-size: 1.15rem; letter-spacing: -.01em; }
.hw p { color: var(--ink-2); font-size: .95rem; }
@media (max-width: 960px) { .how { grid-template-columns: 1fr; } .hw + .hw { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); } }
.sizes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--ink); }
.sz { padding: 28px 24px 30px 0; display: grid; gap: 10px; align-content: start; }
.sz + .sz { padding-left: 24px; border-left: 1px solid var(--line); }
.sz:last-child { background: var(--ink); color: #fff; padding: 28px 24px 30px; }
.sz:last-child p { color: rgba(255,255,255,.75); }
.sz:last-child .sz-n { color: #BFD0FF; }
.sz-n { font-size: .85rem; font-weight: 700; color: var(--acc); }
.sz p { color: var(--ink-2); font-size: .97rem; }
@media (max-width: 960px) { .sizes { grid-template-columns: 1fr 1fr; } .sz:nth-child(3) { padding-left: 0; border-left: 0; } .sz:nth-child(n+3) { border-top: 1px solid var(--line); } }
@media (max-width: 560px) { .sizes { grid-template-columns: 1fr; } .sz + .sz { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); } .sz:last-child { padding-left: 24px; } }

/* v7: framework (4 steps with what you get) and the example estimate */
.how.fw { grid-template-columns: repeat(4, 1fr); }
.how.fw .hw b { font-size: 1.45rem; }
.how.fw .hw small { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); font-size: .9rem; font-weight: 600; color: var(--acc); }
@media (max-width: 960px) { .how.fw { grid-template-columns: 1fr; } }
.est-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
@media (max-width: 960px) { .est-grid { grid-template-columns: 1fr; } }
.est-grid h2 { margin-bottom: 18px; }
.est { border: 1px solid var(--line-2); background: #fff; padding: 26px 28px; box-shadow: 0 1px 0 var(--line); }
.es-h { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.es-h b { font-size: 1.2rem; }
.es-h span { font-size: .8rem; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .08em; }
.es-who { margin: 12px 0 4px; font-size: .9rem; color: var(--ink-3); }
.es-r { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.es-r b { display: block; font-size: 1rem; font-weight: 600; }
.es-r span { font-size: .85rem; color: var(--ink-3); }
.es-r em { font-style: normal; font-weight: 700; font-size: 1.05rem; color: var(--acc); white-space: nowrap; }
.es-note { margin-top: 14px; font-size: .85rem; color: var(--ink-2); }
@media (max-width: 480px) { .es-r { flex-direction: column; align-items: flex-start; gap: 6px; } .est { padding: 22px 18px; } }

/* v7.1: the framework as a visual. Four cards on a connecting line, each with a small illustration. */
.fw2 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; position: relative; }
.fw2::before { content: ""; position: absolute; left: 22px; right: 22px; top: 22px; height: 2px; background: linear-gradient(90deg, var(--acc), var(--acc-soft)); }
.fs { position: relative; display: grid; grid-template-rows: auto 1fr; gap: 18px; }
.fs-top { height: 44px; display: flex; align-items: center; }
.fs-dot { position: relative; z-index: 1; width: 44px; height: 44px; display: grid; place-items: center; background: var(--acc); color: #fff; font-weight: 700; font-size: .95rem; box-shadow: 0 0 0 6px #fff; }
.fs:nth-child(4) .fs-dot { background: var(--ink); }
.fs-card { border: 1px solid var(--line); background: #fff; padding: 22px 22px 24px; display: grid; gap: 10px; align-content: start; height: 100%; transition: border-color .2s, transform .2s; }
.fs-card:hover { border-color: var(--acc); transform: translateY(-2px); }
.fs-viz { background: var(--bg-2); padding: 14px 12px; margin-bottom: 8px; }
.fs-viz svg { display: block; width: 100%; height: auto; }
.fs-card h3 { font-size: 1.35rem; }
.fs-card p { color: var(--ink-2); font-size: .96rem; }
.fs-get { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); font-size: .9rem; font-weight: 600; color: var(--acc); display: flex; gap: 8px; }
.fs-get i { font-style: normal; }
@media (max-width: 1060px) { .fw2 { grid-template-columns: 1fr 1fr; gap: 28px 20px; } .fw2::before { display: none; } }
@media (max-width: 620px) { .fw2 { grid-template-columns: 1fr; } }
/* illustration parts */
.v-box { fill: #fff; stroke: var(--line-2); stroke-width: 1.5; }
.v-hot { fill: var(--acc); stroke: var(--acc); }
.v-t { font: 600 12px var(--sans); fill: var(--ink); text-anchor: middle; }
.v-tw { fill: #fff; }
.v-arr { fill: none; stroke: var(--ink-3); stroke-width: 1.5; }
.v-s { font: 500 11px var(--sans); fill: var(--ink-3); text-anchor: middle; }
.v-l { text-anchor: start; }
.v-pin { fill: #fff; stroke: var(--acc); stroke-width: 1.5; }
.v-pinl { fill: none; stroke: var(--acc); stroke-width: 1.5; stroke-linecap: round; }
.v-n { font: 700 13px var(--sans); fill: var(--acc); }
.v-bar { fill: var(--acc); }
.v-b2 { fill: #5B7FE6; } .v-b3 { fill: #A9BDF2; }
.v-tb { font: 600 11px var(--sans); fill: #fff; } .v-tb3 { fill: var(--ink); }
.v-big { font: 700 34px var(--sans); fill: var(--ink); letter-spacing: -1px; }
.v-scale { stroke: var(--line-2); stroke-width: 2; }
.v-range { fill: var(--acc-soft); stroke: var(--acc); stroke-width: 1.5; }
.v-mid { fill: var(--acc); }
.v-ck { fill: var(--acc); } .v-ck2 { fill: var(--ink); }
.v-tick { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.v-tl { font: 600 12px var(--sans); fill: var(--ink); }

/* v7.2: hero opportunity map */
.om { border: 1px solid var(--line-2); background: #fff; padding: 22px 22px 20px; box-shadow: 0 24px 48px -28px rgba(11,23,48,.35); }
.om-h { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 10px; border-bottom: 1px solid var(--ink); }
.om-h b { font-size: 1.15rem; }
.om-h span, .mk-ex { font-size: .74rem; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .08em; }
.om-who { margin: 10px 0 14px; font-size: .88rem; color: var(--ink-3); }
.om-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.om-t { padding: 12px 12px 10px; background: var(--bg-2); display: grid; gap: 8px; }
.om-t b { font-size: .9rem; font-weight: 600; }
.om-t small { font-size: .75rem; color: var(--ink-3); }
.om-m { display: flex; gap: 3px; }
.om-m i { flex: 1; height: 6px; background: var(--line); }
.om-3 { background: var(--acc-soft); outline: 1.5px solid var(--acc); }
.om-3 .om-m i, .om-2 .om-m i:nth-child(-n+2), .om-1 .om-m i:first-child { background: var(--acc); }
.om-3 small { color: var(--acc); font-weight: 600; }
.om-pick { margin-top: 14px; padding: 14px 16px; background: var(--ink); color: #fff; display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; align-items: baseline; }
.om-pick span { grid-row: span 2; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #BFD0FF; }
.om-pick b { font-size: 1.05rem; }
.om-pick em { font-style: normal; font-size: .9rem; color: rgba(255,255,255,.75); }
@media (max-width: 480px) { .om-grid { grid-template-columns: 1fr 1fr; } .om { padding: 18px 16px; } }

/* v7.2: six area tiles */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 960px) { .tiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .tiles { grid-template-columns: 1fr; } }
.at { border: 1px solid var(--line); padding: 26px 24px 24px; display: grid; gap: 10px; align-content: start; transition: border-color .2s, transform .2s, box-shadow .2s; }
.at:hover { border-color: var(--acc); transform: translateY(-3px); box-shadow: 0 18px 36px -24px rgba(31,79,216,.45); }
.at-i { width: 48px; height: 48px; display: grid; place-items: center; background: var(--acc-soft); margin-bottom: 6px; }
.at-i svg { width: 26px; height: 26px; fill: none; stroke: var(--acc); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.at h3 { font-size: 1.4rem; }
.at p { color: var(--ink-2); font-size: .97rem; }
.at-ex { font-size: .85rem; color: var(--ink-3); }
.at-go { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); font-size: .92rem; font-weight: 600; color: var(--acc); }
.at-go i { font-style: normal; display: inline-block; transition: transform .2s; }
.at:hover .at-go i { transform: translateX(4px); }

/* v7.2: result mock in each landing page hero */
.mk { border: 1px solid var(--line-2); background: #fff; padding: 20px 22px 16px; box-shadow: 0 24px 48px -28px rgba(11,23,48,.35); }
.mk-h { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.mk-h b { font-size: 1.1rem; }
.mk-tag { font-size: .78rem; font-weight: 700; color: var(--acc); background: var(--acc-soft); padding: 4px 10px; }
.mk-r { margin: 0; }
.mk-r > div { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: .93rem; }
.mk-r dt { color: var(--ink-3); }
.mk-r dd { margin: 0; font-weight: 500; }
.mk-mark { background: #FFF6E5; margin: 0 -10px; padding-left: 10px !important; padding-right: 10px !important; }
.mk-mark dd { color: #8A5300; }
.mk-t { width: 100%; border-collapse: collapse; font-size: .92rem; font-variant-numeric: tabular-nums; }
.mk-t th { text-align: left; font-size: .78rem; font-weight: 600; color: var(--ink-3); padding: 10px 6px 8px 0; }
.mk-t td { padding: 10px 6px 10px 0; border-top: 1px solid var(--line); }
.mk-t td:first-child { color: var(--ink-2); }
.mk-t tr.fl td { background: #FFF6E5; }
.mk-t tr.fl td:last-child { color: #8A5300; font-weight: 700; }
.mk-s { margin: 4px 0 0; padding: 0; list-style: none; counter-reset: s; }
.mk-s li { counter-increment: s; display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: .93rem; }
.mk-s li::before { content: counter(s); width: 22px; height: 22px; flex: none; display: grid; place-items: center; background: var(--acc); color: #fff; font-size: .78rem; font-weight: 700; }
.mk-f { margin-top: 14px; padding: 11px 14px; font-size: .9rem; font-weight: 600; }
.mk-ok { background: var(--acc-soft); color: var(--acc-2); }
.mk-warn { background: #FFF6E5; color: #8A5300; }
.mk-ex { margin-top: 10px; text-align: right; }
@media (max-width: 480px) { .mk { padding: 16px 14px 12px; } .mk-r > div { grid-template-columns: 1fr; gap: 2px; } .mk-t { font-size: .82rem; } }

/* v7.3 case studies: homepage cards and the /case-studies page */
.cs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1100px) { .cs-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .cs-grid { grid-template-columns: 1fr; } }
.cs { border: 1px solid var(--line); padding: 26px 24px 24px; display: flex; flex-direction: column; gap: 10px; transition: border-color .2s, transform .2s, box-shadow .2s; }
.cs:hover { border-color: var(--acc); transform: translateY(-3px); box-shadow: 0 18px 36px -24px rgba(31,79,216,.45); }
.cs-tag { font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--acc); }
.cs-n { font-size: 3rem; line-height: 1; font-weight: 800; letter-spacing: -.04em; margin-top: 8px; }
.cs-nl { color: var(--ink-2); font-size: .9rem; line-height: 1.4; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.cs h3 { font-size: 1.2rem; margin-top: 6px; }
.cs p { color: var(--ink-2); font-size: .95rem; flex: 1; }
.cs .at-go { margin-top: 6px; }
.cd-toc { display: grid; border-top: 1px solid var(--ink); align-self: start; }
.cd-toc a { display: grid; grid-template-columns: 40px 1fr; gap: 8px; padding: 16px 0; border-bottom: 1px solid var(--line); font-weight: 600; line-height: 1.35; }
.cd-toc a span { color: var(--acc); font-size: .9rem; }
.cd-toc a:hover { color: var(--acc); }
.cd { padding-block: clamp(56px, 7vw, 96px); border-top: 1px solid var(--line); scroll-margin-top: 80px; }
.cd-top { display: grid; gap: 14px; max-width: 900px; }
.cd-top h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); }
.cd-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 40px 0; border-top: 1px solid var(--ink); }
.cd-stats div { padding: 22px 24px 22px 0; display: grid; gap: 6px; }
.cd-stats div + div { border-left: 1px solid var(--line); padding-left: 24px; }
.cd-stats b { font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1; font-weight: 800; letter-spacing: -.04em; }
.cd-stats span { color: var(--ink-2); font-size: .95rem; line-height: 1.4; }
@media (max-width: 760px) { .cd-stats { grid-template-columns: 1fr; } .cd-stats div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); } }
.cd-body { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 60px; }
@media (max-width: 860px) { .cd-body { grid-template-columns: 1fr; } }
.cd-body h3 { font-size: 1.05rem; margin-bottom: 10px; }
.cd-body p, .cd-body li { color: var(--ink-2); }
.cd-body ol { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; }
.cd-m { background: var(--bg-2); padding: 22px 24px; }
.cd-m p { font-size: .95rem; }
.cd-next { display: grid; gap: 18px; border-top: 1px solid var(--ink); padding-top: 48px; }
.dd-m.dd-m1 { width: 340px; grid-template-columns: 1fr; }