/* KeelOps design patterns (owner-approved board, 10-29). Every rule is scoped to a body class
   f-<id> that build.py only sets when features.json has the flag on. Flag off = old markup,
   and none of this applies. Ported from board/<lane>/ours-<n>.html. */

/* ---------- shared: example label, window chrome, replay link ---------- */
.kx-label { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--mut); }
.kx-label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); }
.dark .kx-label { color: rgb(255 255 255 / .55); }
.kx-win { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: 0 24px 60px rgb(0 0 0 / .10); overflow: hidden; }
.kx-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px; background: #f6f4f0; border-bottom: 1px solid var(--line); font: 500 13px var(--mono); color: var(--mut); }
.kx-bar .dots { display: flex; gap: 6px; } .kx-bar .dots i { width: 9px; height: 9px; border-radius: 50%; background: #dcd7cf; }
.kx-replay { font: 600 13px var(--sans); background: none; border: 0; color: var(--head); cursor: pointer; text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: 4px; padding: 0; }
.kx-split { display: grid; grid-template-columns: 5fr 6fr; gap: 64px; align-items: center; }
.kx-split > * { min-width: 0; }
@media (max-width: 900px) { .kx-split { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- motion-3: approval pipeline with a travelling pulse ---------- */
.f-motion-3 .pp-block { margin-top: 56px; }
.f-motion-3 .pp-intro { text-align: center; max-width: 640px; margin: 0 auto; }
.f-motion-3 .pp-intro .eyebrow { justify-content: center; }
.f-motion-3 .pp-intro .eyebrow::after { content: ""; width: 28px; height: 2px; background: var(--yellow); flex: none; }
.f-motion-3 .pp-intro h3 { font-size: 30px; line-height: 1.12; letter-spacing: -.02em; }
.f-motion-3 .pp-intro p { color: var(--mut); margin-top: 10px; }
.f-motion-3 .pipe { position: relative; margin-top: 48px; }
.f-motion-3 .pipe ol { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); position: relative; z-index: 1; }
.f-motion-3 .pipe li { text-align: center; padding: 0 8px; }
.f-motion-3 .pp-node { width: 58px; height: 58px; margin: 0 auto 18px; border-radius: 16px; background: #fff; border: 1.5px solid var(--line); display: grid; place-items: center; position: relative; transition: border-color .3s, background .3s, box-shadow .4s; }
.f-motion-3 .pp-node svg { width: 24px; height: 24px; stroke: var(--mut); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s; }
.f-motion-3 .pp-node::after { content: ""; position: absolute; right: -7px; top: -7px; width: 20px; height: 20px; border-radius: 50%; background: var(--green); transform: scale(0); transition: transform .35s cubic-bezier(.16,1,.3,1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.f-motion-3 .pipe li.lit .pp-node { border-color: var(--ink); background: var(--ink); box-shadow: 0 0 0 6px rgb(255 212 0 / .25); }
.f-motion-3 .pipe li.lit .pp-node svg { stroke: var(--yellow); }
.f-motion-3 .pipe li.done .pp-node::after { transform: scale(1); }
.f-motion-3 .pipe li.done .pp-node { box-shadow: none; }
.f-motion-3 .pipe h4 { font-size: 16.5px; line-height: 1.25; font-weight: 600; color: var(--head); margin-bottom: 4px; }
.f-motion-3 .pipe p { font-size: 14.5px; color: var(--mut); }
.f-motion-3 .pp-meta { display: block; margin-top: 8px; font: 500 12px var(--mono); color: var(--mut); opacity: 0; transition: opacity .4s; }
.f-motion-3 .pipe li.done .pp-meta { opacity: 1; }
.f-motion-3 .pp-track { position: absolute; left: 10%; right: 10%; top: 28px; height: 2px; background: var(--line); }
.f-motion-3 .pp-track i { position: absolute; left: 0; top: 0; height: 2px; width: 0; background: var(--ink); }
.f-motion-3 .pp-track b { position: absolute; top: -5px; left: 0; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 5px rgb(255 212 0 / .3), 0 0 22px rgb(255 212 0 / .9); opacity: 0; }
.f-motion-3 .pp-guard { display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: center; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 15px; color: var(--mut); }
.f-motion-3 .pp-guard span { display: inline-flex; align-items: center; gap: 9px; }
.f-motion-3 .pp-guard span::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--yellow); }
.f-motion-3 .pp-block.compact .pipe { margin-top: 32px; }
@media (max-width: 900px) {
  .f-motion-3 .pipe ol { grid-template-columns: 1fr; gap: 26px; }
  .f-motion-3 .pipe li { display: grid; grid-template-columns: 58px 1fr; gap: 18px; text-align: left; padding: 0; }
  .f-motion-3 .pp-node { margin: 0; }
  .f-motion-3 .pp-track { left: 28px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .f-motion-3 .pp-track i { width: 2px; height: 0; }
  .f-motion-3 .pp-track b { left: -5px !important; margin-left: 0; }
  .f-motion-3 .pp-intro h3 { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) { .f-motion-3 .pp-track b { display: none; } }

/* ---------- motion-5: restore test as an animated checklist ---------- */
.f-motion-5 .rt .pbody { padding: 8px 24px 18px; }
.f-motion-5 .rt-row { display: grid; grid-template-columns: 26px 1fr auto; gap: 14px; align-items: center; padding: 15px 0; border-bottom: 1px dashed var(--line); color: #b3ada4; transition: color .3s; font-size: 16px; line-height: 1.4; }
.f-motion-5 .rt-row:last-child { border-bottom: 0; }
.f-motion-5 .rt-row .ic { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #dcd7cf; position: relative; transition: all .3s; }
.f-motion-5 .rt-row.run { color: var(--head); }
.f-motion-5 .rt-row.run .ic { border-color: var(--yellow); border-top-color: transparent; animation: kx-spin .8s linear infinite; }
.f-motion-5 .rt-row.ok { color: var(--head); }
.f-motion-5 .rt-row.ok .ic { background: var(--green); border-color: var(--green); }
.f-motion-5 .rt-row.ok .ic::after { content: ""; position: absolute; left: 5px; top: 5px; width: 8px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
@keyframes kx-spin { to { transform: rotate(360deg); } }
.f-motion-5 .rt-row em { font: 500 12.5px var(--mono); font-style: normal; color: var(--mut); opacity: 0; transition: opacity .3s; }
.f-motion-5 .rt-row.ok em { opacity: 1; }
.f-motion-5 .rt-row small { display: block; font-size: 13.5px; color: var(--mut); }
.f-motion-5 .rt-result { margin: 4px 24px 22px; padding: 16px 18px; border-radius: 12px; background: var(--soft); border: 1px solid #efe3a8; display: flex; justify-content: space-between; align-items: center; gap: 12px; opacity: 0; transform: translateY(8px); transition: all .5s; }
.f-motion-5 .rt-result.on { opacity: 1; transform: none; }
.f-motion-5 .rt-result b { font-size: 16px; }
.f-motion-5 .rt-result .big { font: 600 28px var(--mono); color: var(--head); white-space: nowrap; }
.f-motion-5 .rt .kx-bar .clock { font-variant-numeric: tabular-nums; color: var(--head); }
.f-motion-5 .guidebody .rt-wrap { margin-top: 28px; }
.f-motion-5 .guidebody .rt-wrap .kx-replay { margin-top: 14px; }
@media (max-width: 640px) { .f-motion-5 .rt .pbody { padding: 4px 16px 12px; } .f-motion-5 .rt-result { margin: 4px 16px 18px; } .f-motion-5 .kx-bar { font-size: 12px; padding: 10px 14px; } }
@media (prefers-reduced-motion: reduce) { .f-motion-5 .rt-row.run .ic { animation: none; } }

/* ---------- motion-6: a month on Watch, as a message thread ---------- */
.f-motion-6 .thread { height: 520px; display: flex; flex-direction: column; }
.f-motion-6 .thread .msgs { flex: 1; overflow: hidden; padding: 20px 22px; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; background: #fcfbf9; }
.f-motion-6 .msg { display: grid; grid-template-columns: 34px 1fr; gap: 12px; animation: kx-msgin .45s cubic-bezier(.2,.7,.2,1) both; }
@keyframes kx-msgin { from { opacity: 0; transform: translateY(12px); } }
.f-motion-6 .av { width: 34px; height: 34px; border-radius: 9px; background: var(--ink); display: grid; place-items: center; }
.f-motion-6 .av svg { width: 22px; height: 22px; }
.f-motion-6 .av.you { background: #e9e5de; color: var(--head); font: 600 13px var(--sans); }
.f-motion-6 .msg .who { font-size: 13.5px; color: var(--mut); margin-bottom: 2px; }
.f-motion-6 .msg .who b { color: var(--head); font-size: 14.5px; margin-right: 6px; }
.f-motion-6 .msg .txt { font-size: 15.5px; color: var(--text); line-height: 1.5; }
.f-motion-6 .msg .acts { display: flex; gap: 8px; margin-top: 10px; }
.f-motion-6 .msg .acts span { font: 600 13.5px var(--sans); padding: 7px 14px; border-radius: 9px; border: 1px solid var(--line); background: #fff; color: var(--head); transition: all .25s; }
.f-motion-6 .msg .acts span.y { background: var(--yellow); border-color: #e0b800; }
.f-motion-6 .msg .acts span.press { transform: scale(.95); box-shadow: 0 0 0 4px rgb(255 212 0 / .35); }
.f-motion-6 .msg .acts.gone span:not(.press) { opacity: .35; }
.f-motion-6 .typing { display: inline-flex; gap: 4px; padding: 10px 12px; border-radius: 10px; background: #efece7; }
.f-motion-6 .typing i { width: 6px; height: 6px; border-radius: 50%; background: #a39d94; animation: kx-tdot 1s infinite; }
.f-motion-6 .typing i:nth-child(2) { animation-delay: .15s; } .f-motion-6 .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes kx-tdot { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.f-motion-6 .thread .composer { padding: 12px 18px; border-top: 1px solid var(--line); font-size: 14px; color: #a39d94; background: #fff; }
.f-motion-6 .daysep { text-align: center; font: 500 12px var(--mono); color: #a39d94; animation: kx-msgin .4s both; }
.f-motion-6 .th-copy .ticks { margin-top: 22px; }
@media (max-width: 900px) { .f-motion-6 .thread { height: 560px; } }
@media (max-width: 640px) { .f-motion-6 .thread { height: 600px; } .f-motion-6 .thread .msgs { padding: 16px 14px; } }
@media (prefers-reduced-motion: reduce) { .f-motion-6 .msg, .f-motion-6 .daysep { animation: none; } }

/* ---------- motion-10: section reveal, decoded headline, card hover ---------- */
.f-motion-10 .rv { opacity: 0; transform: translateY(22px); filter: blur(6px); transition: opacity .7s ease, transform .8s cubic-bezier(.2,.7,.2,1), filter .7s ease; transition-delay: var(--d, 0s); }
.f-motion-10 .rv.in { opacity: 1; transform: none; filter: none; }
.f-motion-10 .dec { font-variant-ligatures: none; }
.f-motion-10 .dec .g { color: #b8b2a8; }
.f-motion-10.f-motion-10 .dark .dec .g { color: rgb(255 255 255 / .38); }
.f-motion-10 .cards .card, .f-motion-10 .hubcard { position: relative; overflow: hidden; transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s, border-color .25s; }
.f-motion-10 .cards .card::before, .f-motion-10 .hubcard::before { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: var(--yellow); transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.f-motion-10 .cards .card:hover, .f-motion-10 .hubcard:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgb(0 0 0 / .08); border-color: #d6d0c6; }
.f-motion-10 .cards .card:hover::before, .f-motion-10 .hubcard:hover::before { transform: scaleX(1); }
.f-motion-10 .cards .card .textlink.arrow::after, .f-motion-10 .hubcard .textlink.arrow::after, .f-motion-10 .guidecard .textlink.arrow::after { display: inline-block; transition: transform .25s; }
.f-motion-10 .cards .card:hover .textlink.arrow::after, .f-motion-10 .hubcard:hover .textlink.arrow::after, .f-motion-10 .guidecard:hover .textlink.arrow::after { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .f-motion-10 .rv { opacity: 1; transform: none; filter: none; transition: none; }
  .f-motion-10 .cards .card:hover, .f-motion-10 .hubcard:hover { transform: none; }
}

/* ---------- style-1: marker highlight, two-tone headings, scroll-lit list ---------- */
.f-style-1 .mk { color: inherit; background: linear-gradient(var(--yellow), var(--yellow)) no-repeat 0 100% / 0% 100%; padding: 0 .1em; margin: 0 -.04em; border-radius: 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size 1s cubic-bezier(.65,.05,.3,1) .25s, color .5s ease .55s; }
.f-style-1 .mk.on { background-size: 100% 100%; color: var(--ink); }
.f-style-1 .mk.low { background-position: 0 82%; background-size: 0% 38%; }
.f-style-1 .mk.low.on { background-size: 100% 38%; color: var(--head); }
.f-style-1 .tt-g { color: #a39d94; font-weight: 600; }
.f-style-1 .dark .tt-g, .f-style-1 .ctaband .tt-g { color: rgb(255 255 255 / .5); }
.f-style-1 .h2tone { font-size: 46px; line-height: 1.1; letter-spacing: -0.022em; max-width: 920px; }
.f-style-1 .head .h2tone + .lede { margin-top: 18px; }
.f-style-1 .head.wide { max-width: 920px; }
.f-style-1 .reveal-list { list-style: none; margin-top: 8px; border-top: 1px solid var(--line); }
.f-style-1 .reveal-list li { display: grid; grid-template-columns: 70px 1fr 170px; gap: 24px; align-items: baseline; padding: 26px 0; border-bottom: 1px solid var(--line); }
.f-style-1 .reveal-list .no { font: 500 14px var(--mono); color: #b9b2a8; }
.f-style-1 .reveal-list h3 { font-size: 32px; line-height: 1.15; letter-spacing: -0.015em; color: var(--head); margin: 0; }
.f-style-1 .reveal-list p { font-size: 16px; color: var(--mut); margin-top: 6px; max-width: 640px; }
.f-style-1 .reveal-list a.textlink { justify-self: end; font-size: 15px; }
.js-scrub.f-style-1 .reveal-list li, .js-scrub .f-style-1 .reveal-list li { --p: 0; }
.js-scrub .f-style-1 .reveal-list h3 { color: color-mix(in srgb, var(--head) calc(18% + var(--p) * 82%), #fff); }
.js-scrub .f-style-1 .reveal-list p, .js-scrub .f-style-1 .reveal-list a.textlink { opacity: calc(.15 + var(--p) * .85); }
.js-scrub .f-style-1 .reveal-list .no { color: color-mix(in srgb, var(--ink) calc(var(--p) * 100%), #d8d2c9); }
@media (max-width: 860px) {
  .f-style-1 .h2tone { font-size: 32px; }
  .f-style-1 .reveal-list li { grid-template-columns: 1fr; gap: 6px; padding: 22px 0; }
  .f-style-1 .reveal-list h3 { font-size: 24px; }
  .f-style-1 .reveal-list a.textlink { justify-self: start; }
}
@media (max-width: 640px) { .f-style-1 .h2tone { font-size: 30px; } }

/* ---------- style-5: plan cards in one tray, raised dark card ---------- */
.f-style-5 .plans5 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; align-items: stretch; background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 10px; box-shadow: 0 30px 60px rgb(22 23 28 / .06); margin-top: 24px; }
.f-style-5 .pc { border-radius: 16px; padding: 30px 28px 26px; display: flex; flex-direction: column; position: relative; min-width: 0; }
.f-style-5 .pc + .pc { border-left: 1px solid var(--line); }
.f-style-5 .pc.feat { background: var(--ink); color: rgb(255 255 255 / .78); border: 0; box-shadow: 0 24px 50px rgb(22 23 28 / .28), inset 0 0 0 1px rgb(255 212 0 / .5); margin: -24px 0; padding-top: 54px; }
.f-style-5 .pc.feat + .pc { border-left: 0; }
.f-style-5 .pc .fl { position: absolute; top: 0; left: 0; right: 0; text-align: center; font: 600 11.5px var(--narrow); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); background: var(--yellow); border-radius: 16px 16px 0 0; padding: 7px 10px; }
.f-style-5 .pc h3 { font-size: 22px; }
.f-style-5 .pc.feat h3 { color: #fff; }
.f-style-5 .pc .for { font-size: 15px; color: var(--mut); margin-top: 6px; min-height: 46px; }
.f-style-5 .pc.feat .for { color: rgb(255 255 255 / .66); }
.f-style-5 .pc .fit { font-size: 14.5px; color: var(--mut); margin-top: 10px; }
.f-style-5 .pc.feat .fit { color: rgb(255 255 255 / .6); }
.f-style-5 .pc .pr { display: flex; align-items: baseline; gap: 8px; margin: 22px 0 4px; }
.f-style-5 .pc .pr b { font: 600 46px/1 var(--sans); letter-spacing: -.03em; color: var(--head); }
.f-style-5 .pc.feat .pr b { color: #fff; }
.f-style-5 .pc .pr span { font: 500 14px var(--mono); color: var(--mut); }
.f-style-5 .pc .su { font: 500 13px var(--mono); color: var(--mut); padding-bottom: 20px; border-bottom: 1px dashed var(--line); }
.f-style-5 .pc.feat .su { border-color: rgb(255 255 255 / .16); color: rgb(255 255 255 / .55); }
.f-style-5 .pc ul { list-style: none; display: grid; gap: 11px; margin: 20px 0 26px; font-size: 15.5px; }
.f-style-5 .pc li { padding-left: 26px; position: relative; }
.f-style-5 .pc li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 11px; height: 6px; border-left: 2px solid var(--head); border-bottom: 2px solid var(--head); transform: rotate(-45deg); }
.f-style-5 .pc.feat li::before { border-color: var(--yellow); }
.f-style-5 .pc.feat li { color: rgb(255 255 255 / .86); }
.f-style-5 .pc.feat .textlink { color: #fff; }
.f-style-5 .pc li.inh { font-weight: 600; color: var(--head); }
.f-style-5 .pc.feat li.inh { color: #fff; }
.f-style-5 .pc .btn { margin-top: auto; width: 100%; }
.f-style-5 .fine { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 30px; margin-top: 54px; font: 500 13px var(--mono); color: var(--mut); }
.f-style-5 .fine span::before { content: "+ "; color: #c9a800; }
@media (max-width: 900px) {
  .f-style-5 .plans5 { grid-template-columns: 1fr; padding: 8px; }
  .f-style-5 .pc + .pc { border-left: 0; border-top: 1px solid var(--line); }
  .f-style-5 .pc.feat { margin: 8px 0; }
  .f-style-5 .pc.feat + .pc { border-top: 0; }
  .f-style-5 .pc .for { min-height: 0; }
  .f-style-5 .fine { justify-content: flex-start; margin-top: 32px; }
}
@media (max-width: 640px) { .f-style-5 .pc { padding: 26px 20px 22px; } .f-style-5 .pc.feat { padding-top: 50px; } }

/* ---------- style-6: numbered FAQ, split layout, animated open ---------- */
.f-style-6 .faqsplit { display: grid; grid-template-columns: 4fr 7fr; gap: 72px; align-items: start; }
.f-style-6 .faqsplit > * { min-width: 0; }
.f-style-6 .faqsplit .side { position: sticky; top: 110px; }
.f-style-6 .faqsplit h2 { font-size: 44px; }
.f-style-6 .faqsplit .side p { color: var(--mut); margin-top: 16px; }
.f-style-6 .faqsplit .side .btn { margin-top: 26px; }
.f-style-6 .nfaq { border-top: 1px solid var(--line); counter-reset: q; }
.f-style-6 .prose .nfaq { margin-top: 8px; }
.f-style-6 .nfaq details { border-bottom: 1px solid var(--line); counter-increment: q; transition: background .3s ease; }
.f-style-6 .nfaq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 44px 1fr 28px; gap: 16px; align-items: center; padding: 24px 6px; font-weight: 600; font-size: 18.5px; line-height: 1.35; color: var(--head); }
.f-style-6 .nfaq summary::-webkit-details-marker { display: none; }
.f-style-6 .nfaq summary::before { content: counter(q, decimal-leading-zero); font: 500 12.5px var(--mono); color: var(--mut); width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: #fff; transition: all .3s ease; }
.f-style-6 .nfaq details[open] summary::before { background: var(--ink); color: var(--yellow); border-color: var(--ink); }
.f-style-6 .nfaq .pl { width: 28px; height: 28px; position: relative; }
.f-style-6 .nfaq .pl::before, .f-style-6 .nfaq .pl::after { content: ""; position: absolute; left: 7px; right: 7px; top: 13px; height: 2px; background: var(--head); border-radius: 2px; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.f-style-6 .nfaq .pl::after { transform: rotate(90deg); }
.f-style-6 .nfaq details[open] .pl::after { transform: rotate(0); }
.f-style-6 .nfaq .ans { overflow: hidden; }
.f-style-6 .nfaq .ans > div { padding: 0 40px 26px 66px; font-size: 16.5px; color: var(--text); }
.f-style-6 .nfaq .ans > div > * + * { margin-top: 12px; }
.f-style-6 .nfaq summary:hover { color: #000; }
.f-style-6 .nfaq summary:hover::before { border-color: var(--head); }
.f-style-6 .sec-b .nfaq summary { font-size: 17.5px; }
@media (max-width: 860px) {
  .f-style-6 .faqsplit { grid-template-columns: 1fr; gap: 28px; }
  .f-style-6 .faqsplit .side { position: static; }
  .f-style-6 .faqsplit h2 { font-size: 34px; }
  .f-style-6 .nfaq summary { grid-template-columns: 38px 1fr 24px; gap: 12px; font-size: 17px; padding: 20px 2px; }
  .f-style-6 .nfaq .ans > div { padding: 0 6px 22px 52px; }
}
@media (max-width: 640px) { .f-style-6 .faqsplit h2 { font-size: 30px; } }

/* ---------- style-7: mesh-glow closing CTA into a giant-wordmark footer ---------- */
.f-style-7 .endmesh { position: relative; overflow: hidden; background: linear-gradient(180deg, #ffd400 0%, #ffc61a 48%, #8a6a10 78%, var(--ink) 100%); color: var(--ink); text-align: center; padding: 130px 0 210px; }
.f-style-7 .endmesh .mesh { position: absolute; inset: -20% -10% 25% -10%; pointer-events: none; filter: blur(70px); }
.f-style-7 .endmesh .mesh i { position: absolute; border-radius: 50%; }
.f-style-7 .endmesh .mesh i:nth-child(1) { width: 52%; height: 70%; left: 8%; top: 0; background: #fff6c2; opacity: .75; animation: kx-m1 18s ease-in-out infinite alternate; }
.f-style-7 .endmesh .mesh i:nth-child(2) { width: 46%; height: 64%; right: 6%; top: 6%; background: #ff9e1b; opacity: .55; animation: kx-m2 22s ease-in-out infinite alternate; }
.f-style-7 .endmesh .mesh i:nth-child(3) { width: 40%; height: 50%; left: 32%; top: 28%; background: #ffe45c; opacity: .6; animation: kx-m3 16s ease-in-out infinite alternate; }
@keyframes kx-m1 { to { transform: translate(12%, 10%) scale(1.1); } }
@keyframes kx-m2 { to { transform: translate(-14%, 6%) scale(.92); } }
@keyframes kx-m3 { to { transform: translate(6%, -12%) scale(1.15); } }
.f-style-7 .endmesh::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, transparent 58%, rgb(22 23 28 / .7) 85%, var(--ink) 100%); pointer-events: none; }
.f-style-7 .endmesh .grain { position: absolute; inset: 0; opacity: .14; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.f-style-7 .endmesh .wrap { position: relative; z-index: 2; }
.f-style-7 .endmesh h2 { color: var(--ink); font-size: 60px; line-height: 1.05; letter-spacing: -.03em; max-width: 860px; margin: 0 auto; }
.f-style-7 .endmesh p { color: rgb(22 23 28 / .78); font-size: 19px; max-width: 600px; margin: 18px auto 0; }
.f-style-7 .endmesh .ctas { justify-content: center; margin-top: 34px; }
.f-style-7 .endmesh .btn.ghost { background: rgb(22 23 28 / .06); border-color: rgb(22 23 28 / .35); color: var(--ink); }
.f-style-7 .endmesh .btn.ghost:hover { background: rgb(22 23 28 / .12); }
.f-style-7 .endmesh .ticks2 { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 26px; margin-top: 26px; font: 500 13px var(--mono); color: rgb(22 23 28 / .7); }
.f-style-7 footer.big { border-top: 0; position: relative; overflow: hidden; }
.f-style-7 footer.big .wordmark { font: 700 clamp(120px, 21vw, 330px)/.78 var(--sans); letter-spacing: -.06em; color: rgb(255 255 255 / .04); -webkit-text-stroke: 1px rgb(255 255 255 / .14); text-align: center; margin: 10px -2vw -0.12em; user-select: none; white-space: nowrap; }
.f-style-7 footer.big.meshed .fcta { display: none; }
.f-style-7 footer.big:not(.meshed) { border-top: 3px solid var(--yellow); }
.f-style-7 footer.big .reply { margin-top: 18px; font: 500 13px var(--mono); color: rgb(255 255 255 / .55); }
.f-style-7 footer.big .reply b { color: var(--yellow); font-weight: 500; }
@media (max-width: 860px) { .f-style-7 .endmesh h2 { font-size: 38px; } .f-style-7 .endmesh { padding: 110px 0 90px; } }
@media (max-width: 640px) { .f-style-7 .endmesh .ctas .btn { width: 100%; } .f-style-7 .endmesh p { font-size: 17px; } }
@media (prefers-reduced-motion: reduce) { .f-style-7 .endmesh .mesh i { animation: none; } }
@media print { .f-style-7 .endmesh, .f-style-7 footer.big .wordmark { display: none !important; } }

/* ---------- style-9: change log in a mono terminal panel ---------- */
.f-style-9 .logsec { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }
.f-style-9 .logsec > * { min-width: 0; }
.f-style-9 .logsec h2 { font-size: 42px; }
.f-style-9 .logsec .prose { margin-top: 16px; }
.f-style-9 .term { background: #0d0e11; border-radius: 16px; border: 1px solid #23242b; box-shadow: 0 40px 80px rgb(22 23 28 / .22), inset 0 1px 0 rgb(255 255 255 / .05); overflow: hidden; }
.f-style-9 .term .tb { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid #1f2026; font: 500 12.5px var(--mono); color: rgb(255 255 255 / .5); }
.f-style-9 .term .tb i { width: 10px; height: 10px; border-radius: 50%; background: #2c2d35; }
.f-style-9 .term .tb i:first-child { background: var(--yellow); }
.f-style-9 .term .tb span { margin-left: 10px; }
.f-style-9 .term .tb em { margin-left: auto; font-style: normal; border: 1px solid #2c2d35; border-radius: 6px; padding: 1px 7px; }
.f-style-9 .log { padding: 18px 20px 22px; font: 500 13.5px/1.95 var(--mono); color: rgb(255 255 255 / .78); min-height: 300px; }
.f-style-9 .log div { display: grid; grid-template-columns: 58px 62px 1fr; gap: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-style-9 .log div > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.f-style-9 .log .t { color: rgb(255 255 255 / .38); }
.f-style-9 .log .a { color: var(--yellow); }
.f-style-9 .log .a.w { color: #fff; }
.js-type .f-style-9 .log div, .f-style-9.js-type .log div { opacity: 0; transform: translateY(4px); transition: opacity .3s ease, transform .3s ease; }
.f-style-9 .log div.on { opacity: 1 !important; transform: none !important; }
.f-style-9 .cursor { display: inline-block; width: 8px; height: 15px; background: var(--yellow); vertical-align: -2px; animation: kx-blink 1s steps(1) infinite; }
@keyframes kx-blink { 50% { opacity: 0; } }
.f-style-9 .legend9 { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 16px; font: 500 12.5px var(--mono); color: var(--mut); }
@media (max-width: 900px) { .f-style-9 .logsec { grid-template-columns: 1fr; gap: 32px; } .f-style-9 .log { font-size: 12px; } .f-style-9 .log div { grid-template-columns: 44px 52px 1fr; gap: 8px; white-space: normal; } }
@media (max-width: 640px) { .f-style-9 .logsec h2 { font-size: 30px; } }
@media (prefers-reduced-motion: reduce) { .f-style-9 .cursor { animation: none; } }

/* ---------- blocks-1: problem to what-we-do tab switcher ---------- */
.f-blocks-1 .sw { display: grid; grid-template-columns: 380px 1fr; gap: 40px; align-items: start; }
.f-blocks-1 .sw > * { min-width: 0; }
.f-blocks-1 .sw-tabs { display: grid; border-top: 1px solid var(--line); }
.f-blocks-1 .sw-tabs button { all: unset; cursor: pointer; display: grid; grid-template-columns: 40px 1fr; align-items: center; padding: 18px 4px 0; border-bottom: 1px solid var(--line); position: relative; }
.f-blocks-1 .sw-tabs .tn { font: 500 13px var(--mono); color: var(--mut); }
.f-blocks-1 .sw-tabs .tt { font-weight: 600; font-size: 17px; line-height: 1.3; color: var(--mut); transition: color .2s ease; }
.f-blocks-1 .sw-tabs .tb { grid-column: 1 / -1; height: 2px; margin-top: 16px; background: transparent; position: relative; overflow: hidden; }
.f-blocks-1 .sw-tabs .tb i { position: absolute; inset: 0; background: var(--yellow); transform: scaleX(0); transform-origin: left; }
.f-blocks-1 .sw-tabs button[aria-selected="true"] .tt, .f-blocks-1 .sw-tabs button[aria-selected="true"] .tn { color: var(--head); }
.f-blocks-1 .sw-tabs button[aria-selected="true"] .tb i { transform: scaleX(var(--p, 1)); }
.f-blocks-1 .sw-tabs button:hover .tt { color: var(--head); }
.f-blocks-1 .sw-tabs button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
.f-blocks-1 .sw-panels [role=tabpanel] { border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; background: #fff; animation: kx-swIn .35s ease; }
.f-blocks-1 .sw-panels [role=tabpanel][hidden] { display: none; }
.f-blocks-1 .pv-photo { height: 220px; background-size: cover; background-position: center; background-color: var(--ink); }
.f-blocks-1 .pv-body { padding: 30px 34px 32px; }
.f-blocks-1 .pv-lab { font-family: var(--narrow); font-weight: 600; font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--mut); margin: 0 0 6px; }
.f-blocks-1 .pv-body p { margin: 0; }
.f-blocks-1 .pv-body p + .pv-lab { margin-top: 22px; }
.f-blocks-1 .pv-risk { font-size: 19px; line-height: 1.5; color: var(--head); }
.f-blocks-1 .pv-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 15px; }
.f-blocks-1 .sw-note { margin-top: 22px; }
@keyframes kx-swIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) {
  .f-blocks-1 .sw { grid-template-columns: 1fr; gap: 20px; }
  .f-blocks-1 .sw-tabs { display: flex; overflow-x: auto; border-top: 0; gap: 22px; scrollbar-width: none; margin: 0 -20px; padding: 0 20px; }
  .f-blocks-1 .sw-tabs::-webkit-scrollbar { display: none; }
  .f-blocks-1 .sw-tabs button { display: block; flex: none; padding: 10px 0 0; border-bottom: 0; }
  .f-blocks-1 .sw-tabs .tn { display: none; }
  .f-blocks-1 .sw-tabs .tt { font-size: 15px; white-space: nowrap; }
  .f-blocks-1 .sw-tabs .tb { margin-top: 10px; background: var(--line); }
  .f-blocks-1 .pv-photo { height: 150px; }
  .f-blocks-1 .pv-body { padding: 22px 20px 24px; }
  .f-blocks-1 .pv-foot { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .f-blocks-1 .sw-panels [role=tabpanel] { animation: none; } }

/* ---------- blocks-3: tickable guide checklist with a live progress ring ---------- */
.f-blocks-3 .guidebody .ck { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; align-items: start; width: min(1100px, calc(min(100vw, 1180px) - 80px)); }
.f-blocks-3 .ck-main > * + * { margin-top: 16px; }
.f-blocks-3 .ck-main .ck-note { color: var(--mut); font-size: 15px; }
.f-blocks-3 .ck .checklist li { transition: background .25s ease; }
.f-blocks-3 .ck .checklist li.just { background: var(--soft); }
.f-blocks-3 .ck-tools { font-size: 15px; color: var(--mut); }
.f-blocks-3 .ck-tools .linkbtn { font-size: 15px; padding: 4px 2px; }
.f-blocks-3 .ck-score { position: sticky; top: 110px; border: 1px solid var(--line); border-radius: var(--r-card); padding: 26px; background: #fff; text-align: center; }
.f-blocks-3 .ck-score .ex { font: 500 12px var(--mono); color: var(--mut); letter-spacing: .02em; margin: 0; }
.f-blocks-3 .ring { position: relative; width: 150px; height: 150px; margin: 12px auto 16px; }
.f-blocks-3 .ring svg { width: 150px; height: 150px; transform: rotate(-90deg); }
.f-blocks-3 .ring circle { fill: none; stroke-width: 10; }
.f-blocks-3 .ring .r0 { stroke: var(--paper); }
.f-blocks-3 .ring .r1 { stroke: var(--yellow); stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: 326.7; transition: stroke-dashoffset .5s cubic-bezier(.2,.8,.2,1); }
.f-blocks-3 .ring-t { position: absolute; inset: 0; display: grid; place-content: center; }
.f-blocks-3 .ring-t b { font-size: 40px; line-height: 1; }
.f-blocks-3 .ring-t span { font-size: 13px; color: var(--mut); }
.f-blocks-3 .ck-msg { font-size: 15.5px; color: var(--text); min-height: 50px; margin: 0; }
.f-blocks-3 .ck-cta { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); text-align: left; font-size: 15px; }
.f-blocks-3 .ck-cta[hidden] { display: none; }
.f-blocks-3 .ck-cta .btn { margin-top: 14px; width: 100%; }
@media (max-width: 900px) {
  .f-blocks-3 .guidebody .ck { grid-template-columns: 1fr; gap: 0; width: auto; }
  .f-blocks-3 .ck-score { position: sticky; top: auto; bottom: 12px; order: 2; display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; text-align: left; padding: 12px 16px; margin-top: 20px; box-shadow: 0 8px 30px rgb(0 0 0 / .12); z-index: 5; }
  .f-blocks-3 .ck-score .ex { display: none; }
  .f-blocks-3 .ring, .f-blocks-3 .ring svg { width: 64px; height: 64px; margin: 0; }
  .f-blocks-3 .ring-t b { font-size: 20px; } .f-blocks-3 .ring-t span { display: none; }
  .f-blocks-3 .ck-msg { min-height: 0; font-size: 14px; }
  .f-blocks-3 .ck-cta { grid-column: 1 / -1; margin-top: 4px; }
}
@media (prefers-reduced-motion: reduce) { .f-blocks-3 .ring .r1, .f-blocks-3 .ck .checklist li { transition: none; } }
@media print { .f-blocks-3 .ck-score, .f-blocks-3 .ck-tools { display: none !important; } .f-blocks-3 .guidebody .ck { display: block; width: auto; } }

/* ---------- blocks-9: guides hub photo cards with topic filter ---------- */
.f-blocks-9 .gf { display: flex; flex-wrap: wrap; gap: 6px 28px; border-bottom: 1px solid var(--line); margin-bottom: 32px; }
.f-blocks-9 .gf button { all: unset; cursor: pointer; font-weight: 600; font-size: 15.5px; color: var(--mut); padding: 10px 0 12px; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.f-blocks-9 .gf button[aria-pressed="true"] { color: var(--head); border-bottom-color: var(--yellow); }
.f-blocks-9 .gf button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.f-blocks-9 .gf .cnt { font: 500 12px var(--mono); color: var(--mut); margin-left: 6px; }
.f-blocks-9 .gg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.f-blocks-9 .gg > * { min-width: 0; }
.f-blocks-9 .gc { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; background: #fff; text-decoration: none; color: inherit; isolation: isolate; transition: border-color .2s ease, transform .3s cubic-bezier(.2,.8,.2,1), opacity .3s ease; }
.f-blocks-9 .gc:hover { border-color: var(--head); }
.f-blocks-9 .gc:hover .gc-img { transform: scale(1.04); }
.f-blocks-9 .gc-img { display: block; height: 190px; background-size: cover; background-position: center; background-color: var(--ink); position: relative; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.f-blocks-9 .gc-cat { position: absolute; left: 14px; bottom: 12px; background: var(--ink); color: #fff; font-family: var(--narrow); font-weight: 600; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; padding: 6px 10px; border-radius: 6px; box-shadow: inset 0 2px 0 var(--yellow); }
.f-blocks-9 .gc-b { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px 24px; flex: 1; }
.f-blocks-9 .gc-t { font-size: 19px; font-weight: 700; color: var(--head); line-height: 1.25; }
.f-blocks-9 .gc-d { font-size: 15.5px; color: var(--mut); flex: 1; line-height: 1.5; }
.f-blocks-9 .gc-m { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); font: 500 12.5px var(--mono); color: var(--mut); }
.f-blocks-9 .gc-cta { background: var(--soft); border-color: #efe3a8; }
.f-blocks-9 .gc-cta .ex { font: 500 12px var(--mono); color: var(--mut); letter-spacing: .02em; }
.f-blocks-9 .gc-cta .btn { align-self: flex-start; margin-top: 10px; }
.f-blocks-9 .gc.hide { display: none; }
.f-blocks-9 .gc.enter { animation: kx-gcIn .35s ease both; }
@keyframes kx-gcIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 1000px) { .f-blocks-9 .gg { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .f-blocks-9 .gg { grid-template-columns: 1fr; }
  .f-blocks-9 .gf { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -20px 24px; padding: 0 20px; }
  .f-blocks-9 .gf::-webkit-scrollbar { display: none; }
  .f-blocks-9 .gf button { white-space: nowrap; }
  .f-blocks-9 .gc-img { height: 150px; }
}
@media (prefers-reduced-motion: reduce) { .f-blocks-9 .gc, .f-blocks-9 .gc-img { transition: none; } .f-blocks-9 .gc.enter { animation: none; } .f-blocks-9 .gc:hover .gc-img { transform: none; } }

/* ---------- photos-heroes: full-bleed photo heroes replace the comic hero cards (board/photos, board/visual ours-1) ---------- */
.f-photos-heroes .ph { position: absolute; inset: 0; overflow: hidden; z-index: 0; background: #0e0f12; }
.f-photos-heroes .ph img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 75% 50%); max-width: none; }
.f-photos-heroes .ph.kb img { animation: kx-kb 26s ease-out both; transform-origin: 70% 50%; }
@keyframes kx-kb { from { transform: scale(1.08); } to { transform: scale(1); } }
.f-photos-heroes .ph::after { content: ""; position: absolute; inset: 0; }
.f-photos-heroes .onphoto { position: relative; z-index: 1; }
.f-photos-heroes .hero.photo { position: relative; background: #0e0f12; min-height: 92vh; display: flex; align-items: center; padding: 176px 0 96px; }
.f-photos-heroes .hero.photo .ph::after { background:
  radial-gradient(ellipse 70% 60% at 50% 48%, rgb(14 15 18 / .62), rgb(14 15 18 / .25) 70%),
  linear-gradient(180deg, rgb(14 15 18 / .55) 0%, rgb(14 15 18 / .15) 35%, rgb(14 15 18 / .85) 100%); }
.f-photos-heroes .hero.photo h1 { text-shadow: 0 2px 30px rgb(0 0 0 / .45); }
.f-photos-heroes .hero.photo .wrap { width: 100%; }
.f-photos-heroes .hero .meta { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 28px; margin-top: 34px; font-size: 14.5px; color: rgb(255 255 255 / .78); }
.f-photos-heroes .hero .meta span { display: inline-flex; align-items: center; gap: 9px; }
.f-photos-heroes .hero .meta span::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--yellow); }
.f-photos-heroes .scrollcue { position: absolute; left: 50%; bottom: 26px; z-index: 1; width: 24px; height: 38px; margin-left: -12px; border: 2px solid rgb(255 255 255 / .45); border-radius: 14px; }
.f-photos-heroes .scrollcue::after { content: ""; position: absolute; left: 50%; top: 7px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--yellow); animation: kx-cue 1.8s ease-in-out infinite; }
@keyframes kx-cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }
.f-photos-heroes .phero.photo { position: relative; background: #0e0f12; padding: 168px 0 112px; min-height: 640px; }
.f-photos-heroes .phero.photo .ph::after { background: linear-gradient(90deg, rgb(14 15 18 / .94) 0%, rgb(14 15 18 / .82) 38%, rgb(14 15 18 / .25) 72%, rgb(14 15 18 / .05) 100%),
  linear-gradient(0deg, rgb(14 15 18 / .7), transparent 30%); }
.f-photos-heroes .phero.photo h1 { max-width: 700px; }
.f-photos-heroes .phero.photo .lede { max-width: 600px; }
.f-photos-heroes .phero.photo .guidetools { color: rgb(255 255 255 / .72); }
.f-photos-heroes .factrow { display: flex; flex-wrap: wrap; gap: 10px 30px; margin-top: 34px; padding-top: 26px; border-top: 1px solid rgb(255 255 255 / .16); max-width: 760px; }
.f-photos-heroes .factrow span { display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; color: rgb(255 255 255 / .82); }
.f-photos-heroes .factrow span::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--yellow); flex: none; }
.f-photos-heroes .factrow b { color: #fff; font-weight: 600; }
.f-photos-heroes .phero.photo.lp .ph::after { background: linear-gradient(90deg, rgb(14 15 18 / .94) 0%, rgb(14 15 18 / .80) 45%, rgb(14 15 18 / .55) 100%),
  linear-gradient(0deg, rgb(14 15 18 / .7), transparent 30%); }
@media (max-width: 640px) {
  .f-photos-heroes .hero.photo { min-height: 0; padding: 132px 0 72px; }
  .f-photos-heroes .ph img { object-position: var(--pos-m, var(--pos, 75% 50%)); }
  .f-photos-heroes .hero.photo .ph::after { background: linear-gradient(180deg, rgb(14 15 18 / .7) 0%, rgb(14 15 18 / .55) 40%, rgb(14 15 18 / .9) 100%); }
  .f-photos-heroes .scrollcue { display: none; }
  .f-photos-heroes .phero.photo { min-height: 0; padding: 120px 0 64px; }
  .f-photos-heroes .phero.photo .ph::after { background: linear-gradient(180deg, rgb(14 15 18 / .82) 0%, rgb(14 15 18 / .72) 45%, rgb(14 15 18 / .92) 100%); }
  .f-photos-heroes .phero.photo.lp .ph::after { background: linear-gradient(180deg, rgb(14 15 18 / .82), rgb(14 15 18 / .92)); }
  .f-photos-heroes .factrow span { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .f-photos-heroes .ph.kb img, .f-photos-heroes .scrollcue::after { animation: none; } }
@media print { .f-photos-heroes .ph, .f-photos-heroes .scrollcue { display: none !important; } .f-photos-heroes .phero.photo, .f-photos-heroes .hero.photo { min-height: 0; } }
.f-motion-5 .kx-h { font-size: 34px; line-height: 1.12; letter-spacing: -.02em; }
@media (max-width: 640px) { .f-motion-5 .kx-h { font-size: 28px; } }
.f-photos-heroes .formcard .textlink { color: var(--head); }

/* ---------- streamline: the free AWS bill check is the center offer (board/STREAMLINE.md) ---------- */
.f-streamline .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* nav: services sit in a quieter group at the end */
.f-streamline .dd.quiet .dd-btn { color: var(--mut); font-weight: 500; }
.f-streamline .dd.quiet .dd-btn:hover { color: var(--head); }
.f-streamline .dd.quiet .dd-menu { left: auto; right: -24px; }
.f-streamline .dd-note { font-size: 14px; color: var(--mut); margin: 4px 12px 10px; max-width: 460px; }
.f-streamline .mgroup.quiet a { font-weight: 500; color: var(--mut); }
/* service pages: one line on where they sit in the ladder */
.f-streamline .upsell { background: var(--soft); border-bottom: 1px solid #efe3a8; padding: 18px 0; font-size: 15.5px; }
.f-streamline .upsell p { max-width: 900px; }
/* ladder: style-5 cards, four steps, step 1 raised */
.f-streamline .plans5.ladder { grid-template-columns: repeat(4, 1fr); margin-top: 20px; }
.f-streamline .ladder .stepn { font: 600 12px var(--narrow); letter-spacing: .2em; text-transform: uppercase; color: var(--mut); margin-bottom: 8px; }
.f-streamline .ladder .pc.feat .stepn { color: rgb(255 255 255 / .6); }
.f-streamline .ladder .pc .pr { flex-wrap: wrap; margin: 18px 0 14px; }
.f-streamline .ladder .pc .pr b { font-size: 40px; }
.f-streamline .ladder .pc .for { min-height: 0; margin-bottom: 24px; }
.f-streamline .ladder .pc.feat .for { color: rgb(255 255 255 / .78); }
@media (max-width: 1100px) {
  .f-streamline .plans5.ladder { grid-template-columns: 1fr 1fr; }
  .f-streamline .ladder .pc.feat { margin: 0; }
  .f-streamline .ladder .pc:nth-child(odd) { border-left: 0; }
  .f-streamline .ladder .pc:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 700px) {
  .f-streamline .plans5.ladder { grid-template-columns: 1fr; }
  .f-streamline .ladder .pc + .pc { border-left: 0; border-top: 1px solid var(--line); }
  .f-streamline .ladder .pc.feat + .pc { border-top: 0; }
}
/* check pipeline: four steps */
.f-streamline .pp-block.n4 { margin-top: 8px; }
.f-streamline .pp-block.n4 .pipe ol { grid-template-columns: repeat(4, 1fr); }
.f-streamline .pp-block.n4 .pp-track { left: 12.5%; right: 12.5%; }
.f-streamline .pp-block.n4 .pipe li { padding: 0 14px; }
.f-streamline .pp-block.n4 .pipe p { color: var(--mut); font-size: 15.5px; margin-top: 6px; }
@media (max-width: 900px) {
  .f-streamline .pp-block.n4 .pipe ol { grid-template-columns: 1fr; }
  .f-streamline .pp-block.n4 .pp-track { left: 28px; right: auto; }
  .f-streamline .pp-block.n4 .pipe li { padding: 0; }
}
/* fee chart (board/savings/ours-1) */
.f-streamline .fee-card { padding: 30px; }
.f-streamline .fee-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 22px; }
.f-streamline .fee-lab { font-family: var(--narrow); font-weight: 600; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--mut); }
.f-streamline .money { font-family: var(--mono); font-weight: 500; }
.f-streamline .fee-bars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: end; height: 260px; margin-bottom: 22px; border-bottom: 1px solid var(--line); padding-bottom: 16px; }
.f-streamline .fee-col { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-width: 0; }
.f-streamline .fee-col p { margin: 0; }
.f-streamline .fee-col .money { margin-top: 10px; color: var(--head); font-size: 16px; }
.f-streamline .fee-bar { border-radius: 8px 8px 2px 2px; background: #d9d4cc; position: relative; overflow: hidden; }
.f-streamline .fee-bar.b1 { height: 180px; }
.f-streamline .fee-bar.b2 { height: 180px; background: none; }
.f-streamline .fee-bar.b2::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 156px; background: #d9d4cc; border-radius: 8px 8px 2px 2px; }
.f-streamline .fee-bar.b2 .drop { position: absolute; left: 0; right: 0; top: 0; height: 24px; border: 2px dashed var(--mut); border-bottom: 0; border-radius: 8px 8px 0 0; }
.f-streamline .fee-bar.b3 { height: 96px; display: flex; flex-direction: column; background: none; }
.f-streamline .fee-bar.b3 .fee { display: block; height: 25%; background: var(--ink); order: 0; border-radius: 8px 8px 0 0; }
.f-streamline .fee-bar.b3 .keep { display: block; height: 75%; background: var(--yellow); order: 1; }
.f-streamline .fee-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 16px; color: var(--head); }
.f-streamline .fee-row span { display: flex; align-items: center; gap: 10px; }
.f-streamline .fee-sw { width: 14px; height: 14px; border-radius: 3px; display: inline-block; flex: none; }
.f-streamline .fee-sw.keep { background: var(--yellow); } .f-streamline .fee-sw.fee { background: var(--ink); }
.f-streamline .fee-row.zero { border-bottom: 0; color: var(--mut); }
.f-streamline .fee-split { align-items: center; }
@media (max-width: 640px) {
  .f-streamline .fee-card { padding: 22px 18px; }
  .f-streamline .fee-bars { height: 220px; gap: 10px; }
  .f-streamline .fee-bar.b1, .f-streamline .fee-bar.b2 { height: 150px; } .f-streamline .fee-bar.b2::before { height: 130px; }
  .f-streamline .fee-bar.b2 .drop { height: 20px; } .f-streamline .fee-bar.b3 { height: 80px; }
  .f-streamline .fee-col .money { font-size: 14px; }
  .f-streamline .fee-row { font-size: 15px; }
}
/* scope: what we read, what we never touch (board/blocks/ours-4) */
.f-streamline .sec.scope .scope-l { position: sticky; top: 110px; }
.f-streamline .sa-h { font-size: 22px; }
.f-streamline .sa-h + .small { margin: 6px 0 18px; }
.f-streamline .sa-list { display: grid; gap: 12px; }
.f-streamline .sa { background: #fff; border: 1px solid var(--line); border-radius: var(--r-ctl); transition: border-color .2s ease; }
.f-streamline .sa.open { border-color: var(--head); }
.f-streamline .sa h3 { margin: 0; font-size: inherit; }
.f-streamline .sa button { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: grid; grid-template-columns: 1fr auto; column-gap: 16px; padding: 20px 22px; }
.f-streamline .sa button:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; border-radius: var(--r-ctl); }
.f-streamline .sa-t { font-weight: 600; color: var(--head); font-size: 18px; }
.f-streamline .sa-s { grid-row: 2; font-size: 15px; color: var(--mut); font-weight: 400; }
.f-streamline .sa-x { grid-row: 1 / 3; grid-column: 2; align-self: center; width: 30px; height: 30px; border-radius: 50%; background: var(--paper); position: relative; }
.f-streamline .sa-x::before, .f-streamline .sa-x::after { content: ""; position: absolute; left: 9px; right: 9px; top: 14px; height: 2px; background: var(--head); transition: transform .25s ease; }
.f-streamline .sa-x::after { transform: rotate(90deg); }
.f-streamline .sa.open .sa-x { background: var(--yellow); }
.f-streamline .sa.open .sa-x::after { transform: rotate(0); }
.f-streamline .sa-p { display: grid; grid-template-rows: 1fr; }
.f-streamline .sa-list.js .sa-p { transition: grid-template-rows .32s cubic-bezier(.2,.8,.2,1); }
.f-streamline .sa-list.js .sa:not(.open) .sa-p { grid-template-rows: 0fr; }
.f-streamline .sa-list.js .sa:not(.open) .sa-in { visibility: hidden; transition: visibility 0s .32s; }
.f-streamline .sa-list:not(.js) .sa-x { display: none; }
.f-streamline .sa-in { overflow: hidden; }
.f-streamline .sa-g { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 28px; border-top: 1px solid var(--line); margin: 0 22px; padding: 18px 0 22px; }
.f-streamline .sa-lab { font-family: var(--narrow); font-weight: 600; font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--mut); margin: 0 0 8px; }
.f-streamline .sa ul { list-style: none; display: grid; gap: 6px; font-size: 15.5px; }
.f-streamline .sa li { padding-left: 24px; position: relative; }
.f-streamline .sa .yes li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 10px; height: 6px; border-left: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(-45deg); }
.f-streamline .sa .no li::before, .f-streamline .sa .no li::after { content: ""; position: absolute; left: 2px; top: 11px; width: 12px; height: 2px; background: var(--red); transform: rotate(45deg); }
.f-streamline .sa .no li::after { transform: rotate(-45deg); }
.f-streamline .sa-f { grid-column: 1 / -1; margin-top: 16px; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; }
.f-streamline .mono-line { font: 500 14.5px/1.5 var(--mono); color: var(--head); }
.f-streamline .sa-f .ex { margin-top: 6px; font: 500 11.5px var(--mono); color: var(--mut); }
@media (max-width: 860px) {
  .f-streamline .sec.scope .scope-l { position: static; }
  .f-streamline .sa-g { grid-template-columns: 1fr; gap: 16px; margin: 0 18px; }
  .f-streamline .sa button { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) { .f-streamline .sa-p, .f-streamline .sa-x::after, .f-streamline .sa-x::before { transition: none !important; } }
/* after the savings: one short band */
.f-streamline .after { display: flex; justify-content: space-between; align-items: center; gap: 40px; }
.f-streamline .after h2 { font-size: 36px; }
.f-streamline .after .prose { margin-top: 12px; max-width: 640px; color: rgb(255 255 255 / .8); }
.f-streamline .after .ctas { flex: none; margin-top: 0; }
@media (max-width: 860px) { .f-streamline .after { flex-direction: column; align-items: flex-start; gap: 26px; } .f-streamline .after h2 { font-size: 30px; } }
@media (max-width: 640px) { .f-streamline .after .ctas { width: 100%; } .f-streamline .after .ctas .btn { width: 100%; } }
/* bill size first: two-step form (board/savings/ours-6) */
.f-streamline .qual { color: rgb(255 255 255 / .82); font-size: 16px; margin-bottom: 18px; max-width: 560px; }
.f-streamline .steps2 .billq { margin: 0; padding: 0; min-width: 0; }
.f-streamline .steps2 legend.q { font-size: 24px; line-height: 1.2; font-weight: 700; color: var(--head); margin: 0; padding: 0; }
.f-streamline .steps2 .billq .small { margin: 6px 0 16px; }
.f-streamline .steps2 .opts { gap: 8px; }
.f-streamline .steps2 .opt { display: flex; align-items: center; gap: 12px; padding: 13px 16px; margin: 0; font-weight: 500; position: relative; }
.f-streamline .steps2 .opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.f-streamline .steps2 .opt span::before { content: ""; display: inline-block; vertical-align: -3px; width: 16px; height: 16px; margin-right: 12px; border: 1.5px solid var(--mut); border-radius: 50%; box-sizing: border-box; }
.f-streamline .steps2 .opt:has(input:checked), .f-streamline .steps2 .opt.on { border-color: var(--ink); background: var(--soft); box-shadow: inset 4px 0 0 var(--yellow); }
.f-streamline .steps2 .opt:has(input:checked) span::before, .f-streamline .steps2 .opt.on span::before { border: 5px solid var(--ink); }
.f-streamline .steps2 .opt:has(input:focus-visible) { outline: 3px solid var(--yellow); outline-offset: 2px; }
.f-streamline .steps2 .route { font-size: 14.5px; color: var(--mut); margin-top: 14px; }
.f-streamline .steps2 .route[hidden] { display: none; }
.f-streamline .steps2 .next { width: 100%; margin-top: 18px; }
.f-streamline .steps2 .fnote { text-align: center; margin-top: 10px; }
.f-streamline .steps2 .s1err { color: var(--red); font-size: 15px; margin-top: 10px; }
.f-streamline .steps2 .fstep { display: grid; gap: 18px; }
.f-streamline .steps2 .fstep[data-step="1"] { display: block; }
.f-streamline .steps2 .fstep + .fstep { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.f-streamline .steps2.js .fstep + .fstep { margin-top: 0; padding-top: 0; border-top: 0; }
.f-streamline .steps2.js .fstep[data-step="2"] { display: none; }
.f-streamline .steps2.js.at2 .fstep[data-step="1"] { display: none; }
.f-streamline .steps2.js.at2 .fstep[data-step="2"] { display: grid; }
.f-streamline .steps2 .qtop .back { font-size: 14px; }
.f-streamline .steps2 .bar-track { margin-bottom: 22px; }
.f-streamline .steps2 .fstep[data-step="2"] .bar-track { margin-bottom: 4px; }
.f-streamline .steps2 .qtop { margin-bottom: 10px; }
.f-streamline .steps2 .fstep[data-step="2"] .qtop { margin-bottom: -8px; }
@media (max-width: 640px) { .f-streamline .steps2 legend.q { font-size: 21px; } .f-streamline .acts .btn.sm { padding: 10px 11px; font-size: 13px; } }
@media (max-width: 380px) { .f-streamline .menu-btn { font-size: 0; gap: 0; } }
.f-streamline .acts .btn.sm, .f-streamline .ladder .pc .btn { white-space: nowrap; }
.f-streamline .ladder .pc .btn { padding-left: 16px; padding-right: 16px; }
.f-streamline .frame h2 + .prose, .f-streamline .after h2 + .prose { margin-top: 14px; }
@media (max-width: 440px) { .f-streamline .menu-btn { font-size: 0; gap: 0; padding: 10px 11px; } .f-streamline .top .bar { gap: 8px; } }
@media (max-width: 640px) { .f-streamline .fee-col .small { font-size: 13px; line-height: 1.3; min-height: 2.6em; margin-top: 2px; } .f-streamline .fee-bars { height: 236px; } }

/* ---------- style-2: announcement bar + grouped mega menu with a featured card (board/style/ours-2) ---------- */
.f-style-2 .announce { background: var(--ink); color: rgb(255 255 255 / .86); font-size: 14.5px; position: relative; z-index: 60; border-bottom: 1px solid rgb(255 255 255 / .08); }
.f-style-2 .announce .wrap { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 44px; padding-top: 6px; padding-bottom: 6px; padding-right: 48px; }
.f-style-2 .announce b { color: #fff; font-weight: 600; }
.f-style-2 .announce .tag { font: 600 11.5px var(--narrow); letter-spacing: .18em; text-transform: uppercase; color: var(--ink); background: var(--yellow); border-radius: 4px; padding: 2px 7px; flex: none; }
.f-style-2 .announce a { color: var(--yellow); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; flex: none; }
.f-style-2 .announce .x { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: rgb(255 255 255 / .55); font-size: 22px; line-height: 1; cursor: pointer; padding: 8px; }
.f-style-2 .announce .x:hover { color: #fff; }
.f-style-2 .dd.quiet { position: static; }
.f-style-2 .top .bar { position: relative; }
.f-style-2 .dd.quiet .dd-menu.mega { left: 50%; right: auto; transform: translateX(-50%); margin-left: 0; top: calc(100% + 10px); width: min(940px, calc(100vw - 40px)); padding: 0; overflow: hidden; }
.f-style-2 .dd-menu.mega::before { top: -30px; height: 30px; }
.f-style-2 .mega .mg { display: grid; grid-template-columns: 1fr 1fr 1fr 270px; }
.f-style-2 .mega .col { padding: 22px 18px 18px; }
.f-style-2 .mega .col + .col { border-left: 1px solid var(--line); }
.f-style-2 .mega .ch { font: 600 11.5px var(--narrow); letter-spacing: .2em; text-transform: uppercase; color: var(--mut); padding: 0 10px 10px; display: flex; align-items: center; gap: 8px; }
.f-style-2 .mega .ch::before { content: ""; width: 16px; height: 2px; background: var(--yellow); }
.f-style-2 .mega .col a { display: grid; grid-template-columns: 22px 1fr; gap: 2px 12px; padding: 10px; border-radius: 10px; text-decoration: none !important; }
.f-style-2 .mega .col a:hover { background: var(--paper); }
.f-style-2 .mega .col svg { width: 20px; height: 20px; stroke: var(--head); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; grid-row: span 2; margin-top: 2px; }
.f-style-2 .mega .col b { font-size: 15px; color: var(--head); }
.f-style-2 .mega .col span { font-size: 13.5px; color: var(--mut); font-weight: 400; }
.f-style-2 .mega .feat { grid-row: span 2; background: var(--ink); color: rgb(255 255 255 / .8); padding: 14px; display: flex; flex-direction: column; }
.f-style-2 .mega .feat .img { height: 128px; border-radius: 10px; overflow: hidden; }
.f-style-2 .mega .feat img { width: 100%; height: 100%; object-fit: cover; }
.f-style-2 .mega .feat .k { font: 500 12px var(--mono); color: var(--yellow); margin: 14px 2px 4px; }
.f-style-2 .mega .feat h4 { color: #fff; font-size: 17px; line-height: 1.3; margin: 0 2px; }
.f-style-2 .mega .feat p { font-size: 13.5px; margin: 6px 2px 14px; }
.f-style-2 .mega .feat .btn { margin-top: auto; }
.f-style-2 .mega .foot { grid-column: 1 / 4; border-top: 1px solid var(--line); padding: 12px 28px; display: flex; justify-content: space-between; gap: 16px; font-size: 14px; background: var(--paper); }
.f-style-2 .mega .foot span { color: var(--mut); }
@media (max-width: 1000px) {
  .f-style-2 .dd-menu.mega { display: none !important; }
  .f-style-2 .announce .wrap { justify-content: flex-start; font-size: 13.5px; }
  .f-style-2 .announce .long { display: none; }
}