.cfd main {font-family: var(--cf-font);color:var(--cf-color-text-primary)}
.cfd main *, .cfd main *::before, .cfd main *::after {box-sizing:border-box}
.cfd main p, .cfd main li {font-size:17px;line-height:1.6;overflow-wrap:anywhere}
.cfd main h2 {font-size:clamp(26px,3.4vw,40px);line-height:1.15;font-weight:700;letter-spacing:-.02em;color:var(--cf-color-primary-900);margin:0 0 var(--cf-space-4)}
.cfd main h3 {font-weight:600;letter-spacing:-.01em;color:var(--cf-color-primary-900);margin:0 0 var(--cf-space-2);line-height:1.3}
.cfd main img {display:block;width:100%;height:auto}
.cfd main a:not(:where(.cf-btn)):focus-visible, .cfd main button:focus-visible, .cfd main summary:focus-visible, .cfd main [tabindex]:focus-visible {outline:3px solid var(--cf-color-focus);outline-offset:3px}
.cfd .sec {position:relative;overflow:clip;padding:clamp(56px,8vw,120px) 20px}
@media (min-width:720px) {.cfd .sec {padding-left:32px;padding-right:32px}}
.cfd .wrap {max-width:var(--cf-max-width);margin:0 auto;min-width:0}
.cfd .bg-white {background:var(--cf-color-background-page)}
.cfd .bg-blue {background:var(--cf-color-background-blue)}
.cfd .bg-navy {background:var(--cf-color-primary-900);color:var(--cf-color-text-inverse)}
.cfd .bg-navy h2, .cfd .bg-navy h3 {color:var(--cf-color-text-inverse)}
.cfd .bg-navy .cf-lead, .cfd .bg-navy p {color:var(--cf-color-primary-100)}
.cfd .cf-lead {max-width:60ch;color:var(--cf-color-text-secondary)}
.cfd .head {max-width:68ch;margin-bottom:var(--cf-space-10)}
.cfd main .cf-actions>.cf-btn {width:100%;justify-content:center;text-align:center}
@media (min-width:720px) {.cfd main .cf-actions>.cf-btn {width:auto}}
.cfd .bg-navy a:not(:where(.cf-btn)):focus-visible, .cfd .bg-navy button:focus-visible {outline-color:var(--cf-color-primary-100)}
.cfd .mono {font-family: var(--cf-font)}
.cfd .sr {position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cfd .hero {min-height:calc(100svh - 60px);display:flex;align-items:center;padding-top:clamp(40px,6vw,88px);padding-bottom:clamp(48px,7vw,96px)}
.cfd .hero .wrap {max-width:1320px;width:100%;display:grid;gap:var(--cf-space-12);position:relative}
@media (min-width:1080px) {.cfd .hero .wrap {grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--cf-space-16);align-items:center}}
.cfd .hero-copy {min-width:0}
.cfd .hero h1 {font-size:clamp(38px,5vw,66px);line-height:1.06;font-weight:700;letter-spacing:-.03em;color:var(--cf-color-text-inverse);margin:0 0 var(--cf-space-6);max-width:14ch;text-wrap:balance}
.cfd .hero h1 .hl {background:linear-gradient(90deg,var(--cf-color-primary-100),var(--cf-color-cta));-webkit-background-clip:text;background-clip:text;color:transparent}
.cfd .hero .cf-lead {color:var(--cf-color-primary-100);margin:0 0 var(--cf-space-8);max-width:44ch}
.cfd .trust {list-style:none;margin:var(--cf-space-4) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--cf-space-2) var(--cf-space-5)}
.cfd .trust li {display:inline-flex;align-items:center;gap:var(--cf-space-2);font-size:15px;line-height:1.4;color:var(--cf-color-primary-100)}
.cfd .trust i, .cfd .trust svg {width:16px;height:16px;display:inline-flex;color:var(--cf-color-success-500)}
.cfd .hero-visual {position:relative;min-width:0}
.cfd .hero-glow {position:absolute;inset:8% 6%;border-radius:50%;background:radial-gradient(closest-side,var(--cf-color-cta),transparent);filter:blur(50px);opacity:.45;pointer-events:none}
.cfd .mk-frame {container-type:inline-size;width:100%;position:relative;margin:0}
.cfd .mk-box {--k:.4;width:calc(760px * var(--k));height:calc(600px * var(--k));margin:0 auto;position:relative}
@container (min-width:340px) {.cfd .mk-box {--k:.44}}
@container (min-width:380px) {.cfd .mk-box {--k:.5}}
@container (min-width:440px) {.cfd .mk-box {--k:.57}}
@container (min-width:520px) {.cfd .mk-box {--k:.68}}
@container (min-width:600px) {.cfd .mk-box {--k:.78}}
@container (min-width:680px) {.cfd .mk-box {--k:.89}}
@container (min-width:760px) {.cfd .mk-box {--k:1}}
.cfd .mk-stage {position:absolute;top:0;left:0;width:760px;height:600px;transform:scale(var(--k));transform-origin:top left}
.cfd .mk-win {width:760px;height:600px;background:var(--cf-color-surface);border-radius:20px;box-shadow:var(--cf-shadow-large),0 40px 80px rgba(0,0,0,.28);display:flex;flex-direction:column;overflow:hidden;color:var(--cf-color-text-primary)}
.cfd .mk-bar {height:52px;flex:0 0 52px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--cf-space-6);border-bottom:1px solid var(--cf-color-border);background:var(--cf-color-background-soft)}
.cfd .mk-dots {display:flex;gap:var(--cf-space-2);align-items:center}
.cfd .mk-dots i {display:block;width:12px;height:12px;border-radius:50%;background:var(--cf-color-border-strong)}
.cfd .mk-title {font-size:14px;font-weight:600;color:var(--cf-color-text-secondary);margin-left:var(--cf-space-4)}
.cfd .mk-left {display:flex;align-items:center}
.cfd .mk-chip {display:inline-flex;align-items:center;gap:var(--cf-space-2);font-size:14px;font-weight:600;color:var(--cf-color-primary-700);background:var(--cf-color-primary-050);border:1px solid var(--cf-color-primary-100);border-radius:var(--cf-radius-small);padding:var(--cf-space-1) var(--cf-space-3)}
.cfd .mk-chip b {width:8px;height:8px;border-radius:50%;background:var(--cf-color-success-500)}
.cfd .mk-body {flex:1;padding:22px 28px 0;display:flex;flex-direction:column;gap:14px;overflow:hidden}
.cfd .mk-user {align-self:flex-end;max-width:520px;background:var(--cf-color-primary-100);color:var(--cf-color-text-primary);border-radius:16px 16px 4px 16px;padding:var(--cf-space-3) var(--cf-space-5);font-size:17px;line-height:1.4;min-height:48px}
.cfd .mk-row {display:flex;gap:var(--cf-space-3);align-items:flex-start}
.cfd .mk-av {flex:0 0 34px;height:34px;border-radius:50%;background:var(--cf-color-primary-050);border:1px solid var(--cf-color-primary-100);display:flex;align-items:center;justify-content:center;color:var(--cf-color-primary-700)}
.cfd .mk-av i {width:18px;height:18px;display:inline-flex}
.cfd .mk-av svg {width:18px;height:18px}
.cfd .mk-col {flex:1;display:flex;flex-direction:column;gap:12px;min-width:0}
.cfd .mk-status {display:flex;align-items:center;gap:var(--cf-space-2);font-size:16px;color:var(--cf-color-text-muted);margin:0;line-height:1.4}
.cfd .mk-status i {display:inline-flex;width:18px;height:18px}
.cfd .mk-status svg {width:18px;height:18px}
.cfd .mk-text {font-size:17px;line-height:1.45;margin:0;color:var(--cf-color-text-primary)}
.cfd .mk-card {border:1px solid var(--cf-color-border);border-radius:var(--cf-radius-large);box-shadow:var(--cf-shadow-small);padding:var(--cf-space-4) 18px;display:grid;grid-template-columns:360px 1fr;gap:var(--cf-space-5);width:620px}
.cfd .mk-card-head {grid-column:1/-1;display:flex;justify-content:space-between;align-items:baseline}
.cfd .mk-card-head strong {font-size:16px;color:var(--cf-color-primary-900)}
.cfd .mk-tag {font-size:14px;color:var(--cf-color-text-muted)}
.cfd .mk-vals {display:flex;flex-direction:column;justify-content:center;gap:var(--cf-space-2)}
.cfd .mk-val {display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--cf-color-border);padding-bottom:var(--cf-space-1)}
.cfd .mk-val:last-child {border-bottom:0}
.cfd .mk-val span {font-size:14px;color:var(--cf-color-text-secondary)}
.cfd .mk-val b {font-size:26px;color:var(--cf-color-primary-900);letter-spacing:-.02em}
.cfd .mk-val b.up {color:var(--cf-color-success-700)}
.cfd .mk-suggest {align-self:flex-start;display:inline-flex;align-items:center;gap:var(--cf-space-2);background:var(--cf-color-primary-700);color:var(--cf-color-text-inverse);border-radius:var(--cf-radius-button);padding:10px var(--cf-space-5);font-size:16px;font-weight:600}
.cfd .mk-suggest i, .cfd .mk-suggest svg {width:18px;height:18px;display:inline-flex}
.cfd .mk-comp {margin:var(--cf-space-3) 28px 18px;height:50px;flex:0 0 50px;border:1px solid var(--cf-color-border-strong);border-radius:14px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--cf-space-4);font-size:16px;color:var(--cf-color-text-muted)}
.cfd .mk-send {width:32px;height:32px;border-radius:50%;background:var(--cf-color-background-soft);display:flex;align-items:center;justify-content:center;color:var(--cf-color-text-secondary)}
.cfd .mk-send i, .cfd .mk-send svg {width:16px;height:16px;display:inline-flex}
.cfd .mk--play [data-mk-step] {opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s ease}
.cfd .mk--play [data-mk-step].is-in {opacity:1;transform:none}
.cfd .ba-photo {border-radius:var(--cf-radius-large);overflow:hidden;margin:0 0 var(--cf-space-8)}
.cfd .ba-photo img {aspect-ratio:4/3;object-fit:cover}
@media (min-width:720px) {.cfd .ba-photo img {aspect-ratio:21/9}}
.cfd .ba {display:grid;gap:var(--cf-space-6)}
@media (min-width:720px) {.cfd .ba {grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.cfd .ba-panel {min-width:0;border:1px solid var(--cf-color-border);border-radius:var(--cf-radius-large);padding:var(--cf-space-8);background:var(--cf-color-surface)}
.cfd .ba-panel h3 {font-size:22px}
.cfd .ba-panel p {color:var(--cf-color-text-secondary);margin:0 0 var(--cf-space-4)}
.cfd .ba-panel--with {box-shadow:var(--cf-shadow-medium);border-color:var(--cf-color-primary-100)}
.cfd .ba-ask {font-size:19px;color:var(--cf-color-primary-900);font-weight:500}
.cfd .ba-note {font-size:16px;color:var(--cf-color-success-700);font-weight:600;margin:0}
.cfd .groups {display:grid;gap:var(--cf-space-8);grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
@media (min-width:1080px) {.cfd .groups {grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--cf-space-6)}}
.cfd .group {min-width:0;display:flex;flex-direction:column;gap:var(--cf-space-4)}
.cfd .group h3 {font-size:16px;color:var(--cf-color-primary-700);margin:0}
.cfd .req {background:var(--cf-color-surface);border-radius:var(--cf-radius-large);box-shadow:var(--cf-shadow-small);padding:var(--cf-space-6);display:flex;flex-direction:column;gap:var(--cf-space-5);flex:1;transition:transform .2s ease,box-shadow .2s ease}
.cfd .req:hover {transform:translateY(-3px);box-shadow:var(--cf-shadow-medium)}
.cfd .req .q {margin:0;font-family: var(--cf-font);font-size:18px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--cf-color-primary-900)}
.cfd .req .q::before {content:"\201C"}
.cfd .req .q::after {content:"\201D"}
.cfd .req-foot {margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--cf-space-3)}
.cfd .copy {display:inline-flex;align-items:center;gap:var(--cf-space-2);min-height:40px;padding:0 var(--cf-space-3);background:var(--cf-color-surface);color:var(--cf-color-primary-700);border:1px solid var(--cf-color-border-strong);border-radius:var(--cf-radius-button);font:600 16px var(--cf-font);cursor:pointer}
.cfd .copy:hover {border-color:var(--cf-color-primary-700)}
.cfd .copy i, .cfd .copy svg {width:18px;height:18px;display:inline-flex}
.cfd .open {display:inline-flex;align-items:center;gap:var(--cf-space-1);font-size:16px;font-weight:600;color:var(--cf-color-link);text-decoration:none}
.cfd .open:hover {color:var(--cf-color-link-hover);text-decoration:underline}
.cfd .open i, .cfd .open svg {width:18px;height:18px;display:inline-flex}
.cfd .after {margin-top:var(--cf-space-12)}
.cfd .how {display:grid;gap:var(--cf-space-10)}
@media (min-width:1080px) {.cfd .how {grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--cf-space-16);align-items:center}}
.cfd .how-photo {margin:0;border-radius:var(--cf-radius-large);overflow:hidden;min-width:0}
.cfd .how-photo img {aspect-ratio:4/3;object-fit:cover}
@media (min-width:1080px) {.cfd .how-photo img {aspect-ratio:3/4}}
.cfd .how-copy {min-width:0}
.cfd .loop {list-style:none;margin:var(--cf-space-8) 0 0;padding:0;position:relative;display:flex;flex-direction:column;gap:var(--cf-space-8)}
.cfd .loop-line {position:absolute;left:27px;top:28px;bottom:28px;width:2px;height:calc(100% - 56px)}
.cfd .loop li {position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);gap:var(--cf-space-5);align-items:start}
.cfd .tile {width:56px;height:56px;border-radius:var(--cf-radius-medium);background:var(--cf-color-surface);border:1px solid var(--cf-color-primary-100);box-shadow:var(--cf-shadow-small);display:flex;align-items:center;justify-content:center;color:var(--cf-color-primary-700);position:relative}
.cfd .tile i, .cfd .tile svg {width:24px;height:24px;display:inline-flex}
.cfd .loop h3 {font-size:20px;margin:var(--cf-space-1) 0 var(--cf-space-1)}
.cfd .loop p {margin:0;color:var(--cf-color-text-secondary)}
.cfd .loop .ex {margin-top:var(--cf-space-2);font-size:16px;color:var(--cf-color-success-700);font-weight:600}
.cfd .ini {width:36px;height:36px;border-radius:var(--cf-radius-small);background:var(--cf-color-background-soft);color:var(--cf-color-text-secondary);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:17px}
.cfd .ini i, .cfd .ini svg {width:18px;height:18px;display:inline-flex}
.cfd .req-note {display:flex;gap:var(--cf-space-3);align-items:flex-start;background:var(--cf-color-primary-050);border-radius:var(--cf-radius-medium);padding:var(--cf-space-3) var(--cf-space-4);margin:0 0 var(--cf-space-6);color:var(--cf-color-text-primary)}
.cfd .req-note i, .cfd .req-note svg {flex:0 0 20px;width:20px;height:20px;color:var(--cf-color-primary-700);margin-top:3px;display:inline-flex}
.cfd .steps {list-style:none;counter-reset:s;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--cf-space-5)}
.cfd .steps li {counter-increment:s;display:grid;grid-template-columns:44px minmax(0,1fr);gap:var(--cf-space-3);align-items:baseline}
.cfd .steps li::before {content:counter(s);font-size:34px;font-weight:700;color:var(--cf-color-primary-700);line-height:1;letter-spacing:-.03em}
.cfd main code {font-family: var(--cf-font);font-size:.95em;overflow-wrap:anywhere;background:var(--cf-color-background-soft);color:var(--cf-color-text-primary);padding:0 var(--cf-space-1);border-radius:var(--cf-radius-small)}
.cfd .cc {display:grid;gap:var(--cf-space-6)}
@media (min-width:720px) {.cfd .cc {grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.cfd .cc-card {min-width:0;background:var(--cf-color-surface);border:1px solid var(--cf-color-border);border-radius:var(--cf-radius-large);padding:var(--cf-space-8);box-shadow:var(--cf-shadow-small)}
.cfd .cc-card h3 {font-size:22px;margin-bottom:var(--cf-space-5)}
.cfd .cc-card ul {list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--cf-space-4)}
.cfd .cc-card li {display:grid;grid-template-columns:28px minmax(0,1fr);gap:var(--cf-space-3);color:var(--cf-color-primary-900);align-items:start}
.cfd .cc-card li i, .cfd .cc-card li svg {width:24px;height:24px;display:inline-flex;margin-top:2px}
.cfd .yes {color:var(--cf-color-success-700)}
.cfd .no {color:var(--cf-color-accent-700)}
.cfd .pillars {display:grid;gap:var(--cf-space-5);grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
@media (min-width:720px) {.cfd .pillars {grid-template-columns:repeat(2,minmax(0,1fr))}}
.cfd .pillar {min-width:0;background:var(--cf-color-surface);border-radius:var(--cf-radius-large);padding:var(--cf-space-8);box-shadow:var(--cf-shadow-small)}
.cfd .pillar h3 {display:flex;align-items:center;gap:var(--cf-space-3);font-size:21px}
.cfd .pillar h3 i, .cfd .pillar h3 svg {width:24px;height:24px;color:var(--cf-color-primary-700);display:inline-flex}
.cfd .pillar p {margin:0;color:var(--cf-color-text-secondary)}
.cfd .pillar a:not(:where(.cf-btn)) {color:var(--cf-color-link);font-weight:600}
.cfd .disc {margin:var(--cf-space-8) 0 0;max-width:68ch;display:flex;gap:var(--cf-space-3);color:var(--cf-color-text-secondary)}
.cfd .disc i, .cfd .disc svg {flex:0 0 22px;width:22px;height:22px;color:var(--cf-color-primary-700);margin-top:3px;display:inline-flex}
.cfd .plans {display:grid;gap:var(--cf-space-6);margin-bottom:var(--cf-space-8)}
@media (min-width:720px) {.cfd .plans {grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.cfd .plan {min-width:0;display:flex;flex-direction:column;border:1px solid var(--cf-color-border);border-radius:var(--card-r);padding:var(--cf-space-8);background:var(--cf-color-surface)}
.cfd .plan .cf-btn {margin-top:var(--cf-space-8);align-self:flex-start}
.cfd .plan--free {border-color:var(--cf-color-primary-900);box-shadow:0 0 0 1px var(--cf-color-primary-900),var(--cf-shadow-medium)}
.cfd .plan h3 {font-size:24px;margin:0}
.cfd .plan .sub {margin:var(--cf-space-1) 0 var(--cf-space-5);color:var(--cf-color-text-secondary)}
.cfd .plan ul {list-style:none;margin:0 0 auto;padding:0;display:flex;flex-direction:column;gap:var(--cf-space-3)}
.cfd .plan li {display:grid;grid-template-columns:28px minmax(0,1fr);gap:var(--cf-space-2)}
.cfd .plan li i, .cfd .plan li svg {width:22px;height:22px;color:var(--cf-color-success-700);display:inline-flex;margin-top:3px}
.cfd .apps {max-width:68ch;color:var(--cf-color-text-secondary);margin:0 0 var(--cf-space-6)}
.cfd .proof {display:grid;gap:var(--cf-space-8);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:1080px) {.cfd .proof {grid-template-columns:repeat(4,minmax(0,1fr))}}
.cfd .fig {min-width:0}
.cfd .fig b {display:block;font-size:clamp(52px,7.5vw,96px);line-height:1;font-weight:700;letter-spacing:-.04em;color:var(--cf-color-text-inverse)}
.cfd .fig span:not(.fig-ic) {display:block;margin-top:var(--cf-space-2);font-size:18px;color:var(--cf-color-primary-100)}
.cfd .proof-note {margin:var(--cf-space-10) 0 0;max-width:72ch;padding-top:var(--cf-space-8);border-top:1px solid rgba(255,255,255,.14)}
.cfd .dev .sec-inner {display:flex;flex-direction:column;gap:var(--cf-space-4)}
.cfd .dev {padding-top:clamp(40px,5vw,64px);padding-bottom:clamp(40px,5vw,64px);border-bottom:1px solid var(--cf-color-border)}
.cfd .dev h2 {font-size:24px;margin:0}
.cfd .dev p {margin:0;color:var(--cf-color-text-secondary);max-width:68ch}
.cfd .dev-btn {display:inline-flex;align-items:center;gap:var(--cf-space-2);flex:none}
.cfd .dev-btn i, .cfd .dev-btn svg {width:18px;height:18px;display:inline-flex}
.cfd .dev-ic {flex:none;width:var(--tile);height:var(--tile);border-radius:12px;background:var(--cf-color-primary-050);color:var(--cf-color-primary-700);display:inline-flex;align-items:center;justify-content:center}
.cfd .dev-ic i, .cfd .dev-ic svg {width:22px;height:22px;display:inline-flex}
.cfd .dev .sec-inner>div {flex:1;min-width:0}
@media (min-width:1080px) {.cfd .dev .sec-inner {flex-direction:row;align-items:center;justify-content:space-between;gap:var(--cf-space-10)}}
.cfd .faq {display:grid;gap:var(--cf-space-10)}
@media (min-width:1080px) {.cfd .faq {grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--cf-space-16);align-items:start}
.cfd .faq-side {position:sticky;top:120px}}
.cfd .faq-side {min-width:0}
.cfd .help {margin-top:var(--cf-space-8);background:var(--cf-color-primary-900);border-radius:var(--cf-radius-large);padding:var(--cf-space-8);color:var(--cf-color-text-inverse)}
.cfd .help h3 {color:var(--cf-color-text-inverse);font-size:21px}
.cfd .help p {color:var(--cf-color-primary-100);margin:0 0 var(--cf-space-5)}
.cfd .help .lnk {display:inline-block;margin-top:var(--cf-space-5);color:var(--cf-color-text-inverse);font-weight:600;font-size:16px}
.cfd .help a:not(:where(.cf-btn)):focus-visible {outline-color:var(--cf-color-primary-100)}
.cfd .faq-list {min-width:0;display:flex;flex-direction:column;gap:var(--cf-space-3)}
.cfd .faq-list details {background:var(--cf-color-surface);border:1px solid var(--cf-color-border);border-radius:var(--cf-radius-medium);padding:var(--cf-space-4) var(--cf-space-5);transition:border-color .2s ease}
.cfd .faq-list details[open] {border-color:var(--cf-color-cta)}
.cfd .faq-list summary {cursor:pointer;font-size:18px;font-weight:600;color:var(--cf-color-primary-900);line-height:1.4;min-height:28px}
.cfd .faq-list details>div {padding-top:var(--cf-space-3)}
.cfd .faq-list details p {margin:0;color:var(--cf-color-text-secondary)}
.cfd .faq-list a:not(:where(.cf-btn)) {color:var(--cf-color-link);font-weight:600}
.cfd .close {display:grid;gap:var(--cf-space-10)}
@media (min-width:1080px) {.cfd .close {grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--cf-space-16);align-items:center}}
.cfd .close-copy {min-width:0}
.cfd .close h2 {font-size:clamp(30px,4vw,48px)}
.cfd .close .cf-lead {margin-bottom:var(--cf-space-8)}
.cfd .close-photo {margin:0;border-radius:var(--cf-radius-large);overflow:hidden;min-width:0}
.cfd .close-photo img {aspect-ratio:4/3;object-fit:cover}
.cfd .open {background:none;border:0;padding:0;cursor:pointer;font-family: var(--cf-font);min-height:32px}
.cfd .bg-navy .mk-win :is(.mk-user,.mk-typed,.mk-text,p) {color:var(--cf-color-text-primary)}
.cfd .bg-navy .mk-win .mk-status {color:var(--cf-color-text-secondary)}
.cfd .fig b {white-space:nowrap;font-size:clamp(36px,4.4vw,60px)}
.cfd .mk-box {height:calc(664px * var(--k))}
.cfd .mk-stage, .cfd .mk-win {height:664px}
.cfd .works {display:flex;flex-wrap:wrap;align-items:center;gap:var(--cf-space-3) var(--cf-space-5);margin:var(--cf-space-8) 0 0;padding-top:var(--cf-space-6);border-top:1px solid rgba(255,255,255,.14);font-size:17px;font-weight:600;color:var(--cf-color-text-inverse)}
.cfd .bg-navy .works {color:var(--cf-color-text-inverse)}
.cfd .works-k {font-weight:400;color:var(--cf-color-primary-100)}
.cfd .works-app {display:inline-flex;align-items:center;gap:var(--cf-space-2)}
.cfd .lg {width:22px;height:22px;flex:none}
.cfd .lg-claude {fill:#D97757}
.cfd .lg-openai {fill:currentColor}
.cfd .ini .lg {width:20px;height:20px}
.cfd .ini .lg-openai {fill:#000}
.cfd .hero {background:radial-gradient(120% 90% at 85% 10%,var(--cf-color-primary-700),transparent 60%),var(--cf-color-primary-900)}
.cfd .hero-aurora, .cfd .aurora {position:absolute;inset:0;overflow:hidden;pointer-events:none}
.cfd .hero-aurora i, .cfd .aurora i {position:absolute;border-radius:50%;filter:blur(90px);opacity:.42;animation:cf-aurora 20s ease-in-out infinite alternate}
.cfd .hero-aurora i:nth-child(1), .cfd .aurora i:nth-child(1) {width:46vw;height:46vw;left:-14vw;top:-20vw;background:var(--cf-color-cta)}
.cfd .hero-aurora i:nth-child(2), .cfd .aurora i:nth-child(2) {width:38vw;height:38vw;right:-12vw;bottom:-14vw;background:var(--cf-color-cta);opacity:.3;animation-duration:26s;animation-delay:-6s}
.cfd .hero-aurora i:nth-child(3), .cfd .aurora i:nth-child(3) {width:26vw;height:26vw;left:30%;bottom:-18vw;background:var(--cf-color-primary-100);opacity:.16;animation-duration:30s;animation-delay:-12s}
.cfd .aurora--soft i {opacity:.25}
@keyframes cf-aurora {50%{transform:translate(5vw,3vw) scale(1.12)}100%{transform:translate(-3vw,6vw) scale(.95)}}
.cfd .hero-net {position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.22}
.cfd .net-lines path {stroke-dasharray:6 10;animation:cf-net 40s linear infinite}
.cfd .net-nodes circle {animation:cf-node 4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.cfd .net-nodes circle:nth-child(3n) {animation-delay:-1.3s}
.cfd .net-nodes circle:nth-child(3n+1) {animation-delay:-2.6s}
@keyframes cf-net {to{stroke-dashoffset:-320}}
@keyframes cf-node {50%{transform:scale(1.9);opacity:.5}}
.cfd .hero .wrap {z-index:1}
.cfd .orbit {position:absolute;left:50%;top:50%;width:118%;aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none}
.cfd .orbit-ring {position:absolute;inset:0;border-radius:50%;border:1px dashed rgba(255,255,255,.18);animation:cf-spin 60s linear infinite}
.cfd .orbit-ring--b {inset:-10%;border-style:solid;border-color:rgba(255,255,255,.1);animation-duration:44s;animation-direction:reverse}
.cfd .ob {position:absolute;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:var(--cf-color-surface);box-shadow:0 10px 30px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;color:var(--cf-color-primary-700);animation:cf-spin 60s linear infinite reverse}
.cfd .orbit-ring--b .ob {animation-duration:44s;animation-direction:normal}
.cfd .ob .lg, .cfd .ob i, .cfd .ob svg {width:26px;height:26px;display:inline-flex}
.cfd .ob .lg-openai, .cfd .ob .lg-mcp {fill:#000}
.cfd .ob-1 {left:50%;top:0}
.cfd .ob-2 {left:50%;top:100%}
.cfd .ob-5 {left:0;top:50%}
.cfd .ob-6 {left:100%;top:50%}
.cfd .ob-3 {left:14.6%;top:14.6%}
.cfd .ob-4 {left:85.4%;top:85.4%}
.cfd .ob-7 {left:85.4%;top:14.6%}
.cfd .ob-8 {left:14.6%;top:85.4%}
.cfd .ob-9 {left:85.4%;top:85.4%}
.cfd .ob .lg-grok {fill:#000}
.cfd .ob .lg-gemini {fill:#8E75B2}
.cfd .ob .lg-perplexity {fill:#1FB8CD}
.cfd .ob .lg-mistral {fill:#FA520F}
.cfd .ob .lg-copilot {fill:#000}
@keyframes cf-spin {to{transform:rotate(360deg)}}
.cfd .mk-frame {z-index:1}
.cfd .hero-chip {position:absolute;z-index:2;display:inline-flex;align-items:center;gap:var(--cf-space-2);background:var(--cf-color-surface);color:var(--cf-color-primary-900);font-size:15px;font-weight:600;border-radius:999px;padding:var(--cf-space-2) var(--cf-space-4);box-shadow:0 12px 30px rgba(0,0,0,.3)}
.cfd .hero-chip i, .cfd .hero-chip svg {width:18px;height:18px;display:inline-flex;color:var(--cf-color-primary-700)}
.cfd .hero-chip--a {left:-14px;top:12%}
.cfd .hero-chip--b {right:-10px;bottom:14%}
.cfd .hero-chip--b i, .cfd .hero-chip--b svg {color:var(--cf-color-success-700)}
@media (max-width:719px) {.cfd .orbit, .cfd .hero-chip {display:none}}
.cfd .def {display:grid;gap:var(--cf-space-10)}
@media (min-width:1080px) {.cfd .def {grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--cf-space-16);align-items:start}}
.cfd .def-copy {min-width:0}
.cfd .mcp-badge {display:inline-flex;align-items:center;gap:var(--cf-space-2);background:var(--cf-color-surface);border:1px solid var(--cf-color-primary-100);border-radius:999px;padding:var(--cf-space-2) var(--cf-space-4);font-size:15px;font-weight:600;color:var(--cf-color-primary-900);margin-bottom:var(--cf-space-5);box-shadow:var(--cf-shadow-small)}
.cfd .mcp-badge .lg {width:20px;height:20px;fill:var(--cf-color-primary-900)}
.cfd .def-quote {font-size:clamp(19px,1.7vw,22px);line-height:1.6;color:var(--cf-color-primary-900);margin:0 0 var(--cf-space-6);max-width:52ch;padding-left:var(--cf-space-5);border-left:4px solid var(--cf-color-cta)}
.cfd .def-mcp {margin:0;color:var(--cf-color-text-secondary);max-width:56ch}
.cfd .flow {margin:0;min-width:0;background:var(--cf-color-surface);border-radius:28px;padding:clamp(20px,3vw,36px);box-shadow:var(--cf-shadow-large);position:relative;overflow:hidden}
.cfd .flow::before {content:"";position:absolute;inset:-40% -40% auto auto;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,var(--cf-color-primary-050),transparent);pointer-events:none}
.cfd .flow-node {position:relative;display:flex;align-items:center;gap:var(--cf-space-4);border:1px solid var(--cf-color-border);border-radius:18px;padding:var(--cf-space-4) var(--cf-space-5);background:var(--cf-color-surface);transition:transform .25s ease,box-shadow .25s ease}
.cfd .flow-node:hover {transform:translateX(4px);box-shadow:var(--cf-shadow-medium)}
.cfd .flow-ic {flex:0 0 56px;height:56px;border-radius:16px;background:var(--cf-color-primary-050);display:flex;align-items:center;justify-content:center;gap:var(--cf-space-1);color:var(--cf-color-primary-700)}
.cfd .flow-ic .lg, .cfd .flow-ic i, .cfd .flow-ic svg {width:24px;height:24px;display:inline-flex}
.cfd .flow-ic--apps {flex-basis:76px}
.cfd .flow-ic--apps .lg-openai {fill:#000}
.cfd .flow-txt {display:flex;flex-direction:column;min-width:0}
.cfd .flow-txt strong {font-size:18px;color:var(--cf-color-primary-900)}
.cfd .flow-txt span {font-size:15px;color:var(--cf-color-text-secondary)}
.cfd .flow-node--hub {background:var(--cf-color-primary-900);border-color:var(--cf-color-primary-900);box-shadow:0 0 0 0 var(--cf-color-cta);animation:cf-pulse 2.8s ease-out infinite}
.cfd .flow-node--hub .flow-ic {background:rgba(255,255,255,.12)}
.cfd .flow-node--hub .lg {fill:var(--cf-color-text-inverse)}
.cfd .flow-node--hub .flow-txt strong {color:var(--cf-color-text-inverse)}
.cfd .flow-node--hub .flow-txt span {color:var(--cf-color-primary-100)}
@keyframes cf-pulse {0%{box-shadow:0 0 0 0 rgba(47,123,255,.45)}70%{box-shadow:0 0 0 16px rgba(47,123,255,0)}100%{box-shadow:0 0 0 0 rgba(47,123,255,0)}}
.cfd .flow-link {position:relative;height:44px;margin-left:calc(var(--cf-space-5) + 27px);width:2px;background:repeating-linear-gradient(to bottom,var(--cf-color-primary-100) 0 6px,transparent 6px 12px);background-size:2px 12px;animation:cf-dash 1s linear infinite}
.cfd .flow-link i {position:absolute;left:-4px;width:10px;height:10px;border-radius:50%;background:var(--cf-color-cta);box-shadow:0 0 12px var(--cf-color-cta);animation:cf-down 1.8s ease-in-out infinite}
.cfd .flow-link i+i {background:var(--cf-color-primary-700);box-shadow:0 0 12px var(--cf-color-primary-700);animation-name:cf-up;animation-delay:-.9s}
@keyframes cf-dash {to{background-position:0 12px}}
@keyframes cf-down {0%{top:-5px;opacity:0}15%{opacity:1}85%{opacity:1}100%{top:39px;opacity:0}}
@keyframes cf-up {0%{top:39px;opacity:0}15%{opacity:1}85%{opacity:1}100%{top:-5px;opacity:0}}
.cfd .def-facts {grid-column:1/-1;list-style:none;margin:0;padding:0;display:grid;gap:var(--cf-space-4)}
@media (min-width:720px) {.cfd .def-facts {grid-template-columns:repeat(3,minmax(0,1fr))}}
.cfd .def-facts li {min-width:0;display:flex;gap:var(--cf-space-4);align-items:flex-start;background:var(--cf-color-surface);border-radius:18px;padding:var(--cf-space-5);box-shadow:var(--cf-shadow-small);transition:transform .2s ease,box-shadow .2s ease}
.cfd .def-facts li:hover {transform:translateY(-3px);box-shadow:var(--cf-shadow-medium)}
.cfd .def-facts strong {display:block;color:var(--cf-color-primary-900);font-size:18px}
.cfd .def-facts li>span:last-child {color:var(--cf-color-text-secondary)}
.cfd .fact-ic {flex:0 0 44px;height:44px;border-radius:12px;background:var(--cf-color-primary-900);color:var(--cf-color-text-inverse);display:flex;align-items:center;justify-content:center}
.cfd .fact-ic i, .cfd .fact-ic svg {width:22px;height:22px;display:inline-flex}
.cfd .ba-panel h3, .cfd .group h3, .cfd .plan h3, .cfd .cc-card h3 {display:flex;align-items:center;gap:var(--cf-space-3)}
.cfd .ba-ic, .cfd .gi, .cfd .plan-ic, .cfd .cc-ic {flex:none;width:40px;height:40px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:var(--cf-color-background-soft);color:var(--cf-color-text-secondary)}
.cfd .ba-ic i, .cfd .ba-ic svg, .cfd .gi i, .cfd .gi svg, .cfd .plan-ic i, .cfd .plan-ic svg, .cfd .cc-ic i, .cfd .cc-ic svg {width:22px;height:22px;display:inline-flex}
.cfd .ba-ic--with, .cfd .gi, .cfd .plan-ic {background:var(--cf-color-primary-900);color:var(--cf-color-text-inverse)}
.cfd .gi {width:34px;height:34px;border-radius:10px}
.cfd .gi i, .cfd .gi svg {width:18px;height:18px}
.cfd .plan-ic--sub {background:var(--cf-color-cta);color:var(--cf-color-text-inverse)}
.cfd .cc-ic--yes {background:var(--cf-color-primary-050);color:var(--cf-color-success-700)}
.cfd .cc-ic--no {background:var(--cf-color-primary-050);color:var(--cf-color-accent-700)}
.cfd .open .lg {width:16px;height:16px}
.cfd .pillar, .cfd .cc-card, .cfd .plan, .cfd .ba-panel {transition:transform .2s ease,box-shadow .2s ease}
.cfd .pillar:hover, .cfd .cc-card:hover, .cfd .plan:hover, .cfd .ba-panel:hover {transform:translateY(-4px);box-shadow:var(--cf-shadow-medium)}
.cfd .pi {flex:none;width:44px;height:44px;border-radius:12px;background:var(--cf-color-primary-900);color:var(--cf-color-text-inverse);display:inline-flex;align-items:center;justify-content:center}
.cfd .pillar h3 .pi i, .cfd .pillar h3 .pi svg {width:22px;height:22px;color:var(--cf-color-text-inverse)}
.cfd .fig-ic {display:inline-flex;width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,.1);color:var(--cf-color-text-inverse);align-items:center;justify-content:center;margin-bottom:var(--cf-space-4)}
.cfd .fig-ic i, .cfd .fig-ic svg {width:24px;height:24px;display:inline-flex}
.cfd #proof .wrap, .cfd #start .wrap {position:relative;z-index:1}
@media (prefers-reduced-motion:reduce) {.cfd .hero-aurora i, .cfd .aurora i, .cfd .net-lines path, .cfd .net-nodes circle, .cfd .orbit-ring, .cfd .ob, .cfd .flow-node--hub, .cfd .flow-link, .cfd .flow-link i {animation:none}
.cfd .flow-link i {display:none}}
.cfd main {--card-r:20px;--tile:44px}
.cfd .req, .cfd .ba-panel, .cfd .cc-card, .cfd .pillar, .cfd .def-facts li {border-radius:var(--card-r)}
.cfd .req, .cfd .pillar, .cfd .def-facts li {border:1px solid var(--cf-color-border)}
.cfd .ba-ic, .cfd .plan-ic, .cfd .cc-ic, .cfd .pi, .cfd .fact-ic {width:var(--tile);height:var(--tile);flex:0 0 var(--tile);border-radius:12px}
.cfd .ba-ic i, .cfd .ba-ic svg, .cfd .plan-ic i, .cfd .plan-ic svg, .cfd .cc-ic i, .cfd .cc-ic svg, .cfd .pi i, .cfd .pi svg, .cfd .fact-ic i, .cfd .fact-ic svg {width:22px;height:22px}
.cfd .req:hover, .cfd .ba-panel:hover, .cfd .cc-card:hover, .cfd .pillar:hover, .cfd .plan:hover, .cfd .def-facts li:hover {transform:translateY(-3px);box-shadow:var(--cf-shadow-medium)}
@media (min-width:1080px) {.cfd .ba-photo {margin-bottom:0}
.cfd .ba {position:relative;margin:-120px var(--cf-space-10) 0}}
.cfd .ba-panel {box-shadow:var(--cf-shadow-small)}
.cfd .ba-panel:not(.ba-panel--with) h3, .cfd .ba-panel:not(.ba-panel--with) p {color:var(--cf-color-text-secondary)}
.cfd .ba-panel--with {border-color:var(--cf-color-cta);box-shadow:0 0 0 1px var(--cf-color-cta),var(--cf-shadow-large)}
.cfd .req {padding:var(--cf-space-5) var(--cf-space-5) var(--cf-space-4);gap:var(--cf-space-4)}
.cfd .req .q {font-size:17px}
.cfd .req-foot {padding-top:var(--cf-space-3);border-top:1px solid var(--cf-color-border)}
.cfd .req .copy {min-height:36px;border-color:var(--cf-color-border);font-size:15px}
.cfd .req .open {font-size:15px}
.cfd .tile {background:var(--cf-color-primary-900);border-color:var(--cf-color-primary-900);color:var(--cf-color-text-inverse);border-radius:14px}
.cfd .faq-list details:hover {border-color:var(--cf-color-primary-100)}
@media (max-width:719px) {.cfd .plan .cf-btn, .cfd .dev-btn {align-self:stretch;justify-content:center}}
.cfd main strong {font-weight:700}
.cfd .bg-navy .cf-lead strong, .cfd .hero .cf-lead strong {color:var(--cf-color-text-inverse)}
.cfd .def-quote strong, .cfd .ba-panel strong, .cfd .loop p strong, .cfd .cc-card strong {color:var(--cf-color-primary-900)}
.cfd .req .copy--q {background:var(--cf-color-primary-050);border-color:var(--cf-color-primary-100);color:var(--cf-color-primary-900)}
.cfd .req .copy--q:hover {background:var(--cf-color-primary-100);border-color:var(--cf-color-primary-700)}
.cfd .fig {display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:var(--cf-space-3)}
.cfd .fig-ic {grid-row:1;grid-column:1;margin:0;width:40px;height:40px;border-radius:12px}
.cfd .fig-ic i, .cfd .fig-ic svg {width:20px;height:20px}
.cfd .fig span:not(.fig-ic) {grid-row:1;grid-column:2;margin:0;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--cf-color-primary-100)}
.cfd .fig b {grid-row:2;grid-column:1/-1;margin-top:var(--cf-space-4)}
@media (min-width:1080px) {.cfd .fig+.fig {border-left:1px solid rgba(255,255,255,.14);padding-left:var(--cf-space-8)}}
.cfd .def-facts {gap:0;background:var(--cf-color-surface);border:1px solid var(--cf-color-border);border-radius:var(--card-r);box-shadow:var(--cf-shadow-small);overflow:hidden}
.cfd .def-facts li {border:0;border-radius:0;box-shadow:none;background:transparent;padding:var(--cf-space-6) var(--cf-space-6);align-items:center;gap:var(--cf-space-4);transition:background-color .2s ease}
.cfd .def-facts li+li {border-top:1px solid var(--cf-color-border)}
@media (min-width:720px) {.cfd .def-facts li+li {border-top:0;border-left:1px solid var(--cf-color-border)}}
.cfd .def-facts li:hover {transform:none;box-shadow:none;background:var(--cf-color-primary-050)}
.cfd .def-facts strong {font-size:18px;margin-bottom:2px}
.cfd .def-facts li>span:last-child {font-size:16px;line-height:1.5;text-wrap:pretty}
.cfd .fact-ic {width:52px;height:52px;flex:0 0 52px;border-radius:14px;background:linear-gradient(135deg,var(--cf-color-primary-700),var(--cf-color-primary-900));box-shadow:0 8px 18px rgba(6,51,116,.22)}
.cfd .fact-ic i, .cfd .fact-ic svg {width:24px;height:24px}
.cfd .cfg {margin-top:var(--cf-space-6);padding-top:var(--cf-space-6);border-top:1px dashed var(--cf-color-border-strong)}
.cfd .cfg-k {display:flex;align-items:center;gap:var(--cf-space-3);margin:0;color:var(--cf-color-text-primary);cursor:pointer;font-size:17px}
.cfd .cfg[open] .cfg-k {margin-bottom:var(--cf-space-4)}
.cfd .cfg-k:hover strong {color:var(--cf-color-link)}
.cfd .cfg-ic {flex:0 0 36px;width:36px;height:36px;border-radius:10px;background:var(--cf-color-primary-050);color:var(--cf-color-primary-700);display:inline-flex;align-items:center;justify-content:center}
.cfd .cfg-ic i, .cfd .cfg-ic svg {width:18px;height:18px;display:inline-flex}
.cfd .cfg-code {margin:0;background:var(--cf-color-primary-900);border-radius:16px;overflow:hidden}
.cfd .cfg-code figcaption {display:flex;justify-content:space-between;align-items:center;gap:var(--cf-space-3);padding:var(--cf-space-2) var(--cf-space-2) var(--cf-space-2) var(--cf-space-5);border-bottom:1px solid rgba(255,255,255,.12);font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--cf-color-primary-100)}
.cfd .cfg-code .copy {background:transparent;color:var(--cf-color-text-inverse);border-color:rgba(255,255,255,.3);min-height:36px;font-size:15px}
.cfd .cfg-code .copy:focus-visible {outline-color:var(--cf-color-primary-100)}
.cfd .cfg-code pre {margin:0;padding:var(--cf-space-5);overflow-x:auto;font:15px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--cf-color-text-inverse)}
.cfd .j-k {color:var(--cf-color-primary-100)}
.cfd .j-s {color:#9be7c4}
.cfd .j-p {color:rgba(255,255,255,.7)}
.cfd .cfg-note {margin:var(--cf-space-4) 0 0;font-size:15px;color:var(--cf-color-text-secondary)}
.cfd .cpanel {display:grid;background:var(--cf-color-surface);border:1px solid var(--cf-color-border);border-radius:28px;box-shadow:0 30px 70px rgba(6,51,116,.16);overflow:hidden}
@media (min-width:1080px) {.cfd .cpanel {grid-template-columns:minmax(0,.82fr) minmax(0,1.5fr)}}
.cfd .cp-side {position:relative;overflow:hidden;background:linear-gradient(165deg,var(--cf-color-primary-700),var(--cf-color-primary-900) 70%);color:var(--cf-color-text-inverse);padding:clamp(24px,3.5vw,44px)}
.cfd .cp-side::before {content:"";position:absolute;width:420px;height:420px;right:-200px;top:-200px;border-radius:50%;background:radial-gradient(closest-side,var(--cf-color-cta),transparent);opacity:.55;pointer-events:none}
.cfd .cp-side-in {position:relative}
@media (min-width:1080px) {.cfd .cp-side-in {position:sticky;top:96px}}
.cfd .cp-k {display:inline-flex;align-items:center;gap:var(--cf-space-2);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cf-color-primary-100);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:6px 12px}
.cfd .cp-k i, .cfd .cp-k svg {width:14px;height:14px;display:inline-flex}
.cfd .bg-blue .cp-side p.cp-title {margin:var(--cf-space-5) 0 var(--cf-space-2);font-size:clamp(26px,2.6vw,32px);line-height:1.15;font-weight:700;letter-spacing:-.02em;color:var(--cf-color-text-inverse)}
.cfd .cp-side p.cp-lead {margin:0 0 var(--cf-space-8);color:var(--cf-color-primary-100);max-width:34ch}
.cfd .cp-side strong {color:var(--cf-color-text-inverse)}
.cfd .cp-addr {display:flex;flex-direction:column;gap:var(--cf-space-3);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:var(--cf-space-5)}
.cfd .cp-addr-k, .cfd .cp-need-k {font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--cf-color-primary-100)}
.cfd .cp-url {margin:0;font:600 17px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--cf-color-text-inverse);white-space:pre-wrap;overflow-wrap:anywhere}
.cfd .cp-addr .copy {align-self:flex-start;background:var(--cf-color-surface);color:var(--cf-color-primary-900);border-color:var(--cf-color-surface)}
.cfd .cp-addr .copy:hover {background:var(--cf-color-primary-050)}
.cfd .cp-addr .copy:focus-visible, .cfd .cp-signup:focus-visible {outline-color:var(--cf-color-primary-100)}
.cfd p.cp-need-k {margin:var(--cf-space-8) 0 var(--cf-space-3)}
.cfd .cp-need {list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--cf-space-3)}
.cfd .cp-need li {display:grid;grid-template-columns:20px minmax(0,1fr);gap:var(--cf-space-3);font-size:16px;line-height:1.45;color:var(--cf-color-primary-100)}
.cfd .cp-need i, .cfd .cp-need svg {width:20px;height:20px;display:inline-flex;color:var(--cf-color-success-500);margin-top:1px}
.cfd .cp-signup {display:inline-flex;align-items:center;gap:var(--cf-space-2);margin-top:var(--cf-space-8);font-weight:600;font-size:16px;color:var(--cf-color-text-inverse);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:2px}
.cfd .cp-signup:hover {border-color:var(--cf-color-text-inverse)}
.cfd .cp-signup i, .cfd .cp-signup svg {width:16px;height:16px;display:inline-flex;transition:transform .2s ease}
.cfd .cp-signup:hover i {transform:translateX(3px)}
.cfd .cp-main {min-width:0;padding:clamp(24px,3.5vw,48px)}
.cfd .flow-steps {list-style:none;margin:0;padding:0}
.cfd .fs {position:relative;padding:0 0 var(--cf-space-10) 56px;min-width:0}
.cfd .fs:last-child {padding-bottom:0}
.cfd .fs::before {content:"";position:absolute;left:17px;top:44px;bottom:8px;width:2px;background:linear-gradient(var(--cf-color-primary-100),var(--cf-color-border))}
.cfd .fs:last-child::before {display:none}
.cfd .step-h {display:flex;align-items:center;min-height:36px;font-size:20px;margin:0 0 var(--cf-space-4)}
.cfd .step-n {position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%;background:linear-gradient(145deg,var(--cf-color-primary-700),var(--cf-color-primary-900));color:var(--cf-color-text-inverse);font-weight:700;font-size:16px;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 0 0 6px var(--cf-color-surface),0 6px 14px rgba(6,51,116,.25)}
.cfd .picker {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--cf-space-3)}
.cfd .picker [data-cf-tab] {position:relative;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:var(--cf-space-3);padding:var(--cf-space-4);text-align:left;background:var(--cf-color-surface);border:1px solid var(--cf-color-border-strong);border-radius:16px;font:inherit;color:var(--cf-color-primary-900);cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease}
.cfd .picker [data-cf-tab]:hover {border-color:var(--cf-color-primary-700);box-shadow:var(--cf-shadow-small)}
.cfd .picker [data-cf-tab][aria-selected="true"] {border-color:var(--cf-color-cta);background:var(--cf-color-primary-050);box-shadow:0 0 0 1px var(--cf-color-cta)}
.cfd .pk-logo {width:44px;height:44px;border-radius:12px;background:var(--cf-color-surface);border:1px solid var(--cf-color-border);display:inline-flex;align-items:center;justify-content:center;color:var(--cf-color-primary-700)}
.cfd .pk-logo .lg, .cfd .pk-logo i, .cfd .pk-logo svg {width:24px;height:24px;display:inline-flex}
.cfd .pk-logo .lg-openai {fill:#000}
.cfd .pk-txt {display:flex;flex-direction:column;gap:2px;min-width:0}
.cfd .pk-name {display:flex;flex-wrap:wrap;align-items:center;gap:var(--cf-space-2);font-size:17px;font-weight:700}
.cfd .pk-sub {font-size:14px;color:var(--cf-color-text-secondary)}
.cfd .pk-badge {font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--cf-color-success-700);background:var(--cf-color-surface);border:1px solid var(--cf-color-border);border-radius:999px;padding:1px 8px}
.cfd .pk-radio {position:absolute;top:var(--cf-space-4);right:var(--cf-space-4);width:20px;height:20px;border-radius:50%;border:2px solid var(--cf-color-border-strong);background:var(--cf-color-surface);transition:border-color .2s ease,box-shadow .2s ease}
.cfd .picker [data-cf-tab][aria-selected="true"] .pk-radio {border-color:var(--cf-color-cta);box-shadow:inset 0 0 0 4px var(--cf-color-surface);background:var(--cf-color-cta)}
@media (max-width:719px) {.cfd .picker {grid-template-columns:minmax(0,1fr)}
.cfd .picker [data-cf-tab] {flex-direction:row;align-items:center;padding:var(--cf-space-3) 48px var(--cf-space-3) var(--cf-space-3)}
.cfd .pk-radio {top:50%;margin-top:-10px}}
.cfd .panel {background:linear-gradient(180deg,var(--cf-color-primary-050),var(--cf-color-surface) 70%);border:1px solid var(--cf-color-primary-100);border-radius:18px;padding:clamp(18px,3vw,28px)}
.cfd p.client {margin:0 0 var(--cf-space-5);display:flex;flex-direction:column;line-height:1.35}
.cfd .client strong {font-size:19px;color:var(--cf-color-primary-900)}
.cfd .client span {font-size:15px;color:var(--cf-color-text-secondary)}
.cfd .one-click:not([hidden]) {display:flex;flex-wrap:wrap;align-items:center;gap:var(--cf-space-3) var(--cf-space-5);margin-bottom:var(--cf-space-6);padding-bottom:var(--cf-space-6);border-bottom:1px solid var(--cf-color-border)}
.cfd .one-click p {margin:0;color:var(--cf-color-text-secondary);flex:1 1 220px;font-size:16px}
.cfd .cpanel .cf-btn.add-claude {display:inline-flex;align-items:center;gap:var(--cf-space-2);min-height:52px;padding:0 var(--cf-space-6);background:#C15F3C;border-color:#C15F3C;color:#fff;font-weight:700;font-size:17px;cursor:pointer;box-shadow:0 10px 24px rgba(193,95,60,.3);transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease}
.cfd .cpanel .cf-btn.add-claude:hover {background:#A94F31;border-color:#A94F31;color:#fff;transform:translateY(-1px);box-shadow:0 14px 28px rgba(193,95,60,.36)}
.cfd .cpanel .add-claude i, .cfd .cpanel .add-claude svg {width:18px;height:18px;display:inline-flex}
.cfd .cpanel .add-claude .lg {width:20px;height:20px;fill:#fff}
.cfd p.by-hand-k {margin:0 0 var(--cf-space-3);font-size:13px;font-weight:700;color:var(--cf-color-text-secondary);text-transform:uppercase;letter-spacing:.08em}
.cfd .panel .steps {gap:var(--cf-space-3)}
.cfd .panel .steps li {grid-template-columns:28px minmax(0,1fr);align-items:start}
.cfd .panel .steps li::before {width:24px;height:24px;margin-top:2px;border-radius:50%;background:var(--cf-color-surface);border:1px solid var(--cf-color-primary-100);color:var(--cf-color-primary-700);font-size:13px;line-height:22px;text-align:center;letter-spacing:0}
.cfd .panel .req-note {margin:var(--cf-space-5) 0 0;background:var(--cf-color-surface);border:1px solid var(--cf-color-border)}
.cfd .step-p {margin:0;color:var(--cf-color-text-secondary);max-width:62ch}
.cfd .step-p a:not(:where(.cf-btn)) {color:var(--cf-color-link);font-weight:600}
.cfd .secure {display:inline-flex;align-items:center;gap:var(--cf-space-2);margin-top:var(--cf-space-4);font-size:15px;font-weight:600;color:var(--cf-color-success-700);background:var(--cf-color-primary-050);border-radius:999px;padding:6px 14px 6px 10px}
.cfd .secure i, .cfd .secure svg {width:16px;height:16px;display:inline-flex}
.cfd .ask {margin-bottom:var(--cf-space-4);background:var(--cf-color-background-soft);border:1px solid var(--cf-color-border);border-radius:18px;padding:var(--cf-space-4) var(--cf-space-5)}
.cfd .ask-k {display:block;margin-bottom:var(--cf-space-3);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--cf-color-text-secondary)}
.cfd .ask-row {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--cf-space-3)}
.cfd .ask-bubble {margin:0;background:var(--cf-color-primary-900);color:var(--cf-color-text-inverse);font:600 17px/1.4 var(--cf-font);white-space:pre-wrap;border-radius:16px 16px 4px 16px;padding:var(--cf-space-3) var(--cf-space-5);box-shadow:0 8px 18px rgba(6,51,116,.2)}
.cfd .ask .copy {min-height:40px}
@media (max-width:719px) {.cfd .fs {padding-left:0}
.cfd .fs::before {display:none}
.cfd .step-n {position:static;flex:none;margin-right:var(--cf-space-3);box-shadow:0 6px 14px rgba(6,51,116,.25)}
.cfd .cpanel .cf-btn.add-claude {width:100%;justify-content:center}
.cfd .ask-bubble {flex:1 1 100%}}
@media (prefers-reduced-motion:reduce) {.cfd .picker [data-cf-tab], .cfd .cp-signup i, .cfd .cpanel .cf-btn.add-claude {transition:none}
.cfd .cpanel .cf-btn.add-claude:hover {transform:none}}
.cfd .cpanel a.cp-signup:is(:link,:visited,:hover,:focus,:active), .cfd .help a.lnk:is(:link,:visited,:hover,:focus,:active) {color:var(--cf-color-text-inverse);text-decoration:none}
.cfd .cpanel a.cp-signup:active, .cfd .help a.lnk:active {opacity:.85}
.cfd .mk-dots i:nth-child(1) {background:#FF5F57;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.12)}
.cfd .mk-dots i:nth-child(2) {background:#FEBC2E;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.12)}
.cfd .mk-dots i:nth-child(3) {background:#28C840;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.12)}
.cfd .req .q {white-space:normal}
.cfd .copy-q[hidden], .cfd .q-done[hidden], .cfd .q-label[hidden] {display:none}
.cfd p.ask-bubble {margin:0}
.cfd .fs {padding-left:0;padding-inline-start:56px}
.cfd .step-n {left:auto;inset-inline-start:0}
.cfd .fs::before {left:auto;inset-inline-start:17px}
.cfd .pk-radio {right:auto;inset-inline-end:var(--cf-space-4)}
.cfd .loop-line {left:auto;inset-inline-start:27px}
.cfd .flow-link {margin-left:0;margin-inline-start:calc(var(--cf-space-5) + 27px)}
.cfd .def-quote {border-left:0;padding-left:0;border-inline-start:4px solid var(--cf-color-cta);padding-inline-start:var(--cf-space-5)}
@media (min-width:720px) {.cfd .def-facts li+li {border-left:0;border-inline-start:1px solid var(--cf-color-border)}}
@media (min-width:1080px) {.cfd .fig+.fig {border-left:0;padding-left:0;border-inline-start:1px solid rgba(255,255,255,.14);padding-inline-start:var(--cf-space-8)}}
@media (max-width:719px) {.cfd .fs {padding-inline-start:0}
.cfd .picker [data-cf-tab] {padding:var(--cf-space-3);padding-inline-end:48px}}
.cfd .cpanel .cf-btn.add-gpt {background:#0d0d0d;border-color:#0d0d0d;box-shadow:0 10px 24px rgba(0,0,0,.24)}
.cfd .cpanel .cf-btn.add-gpt:hover {background:#2f2f2f;border-color:#2f2f2f;box-shadow:0 14px 28px rgba(0,0,0,.3)}
.cfd .ai-pick {display:flex;align-items:center;flex-wrap:wrap;gap:var(--cf-space-3);margin-top:var(--cf-space-5)}
.cfd .ai-pick-k {margin:0;font-size:15px;font-weight:600;color:var(--cf-color-text-secondary)}
.cfd .ai-seg {display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--cf-color-surface);border:1px solid var(--cf-color-border);box-shadow:var(--cf-shadow-small)}
.cfd .ai-seg button {display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 var(--cf-space-4);border:0;border-radius:999px;background:transparent;font-family: var(--cf-font);font-size:15px;font-weight:600;color:var(--cf-color-text-secondary);cursor:pointer;transition:background-color .2s ease,color .2s ease}
.cfd .ai-seg button:hover {color:var(--cf-color-text-primary)}
.cfd .ai-seg button[aria-pressed="true"] {background:var(--cf-color-primary-900);color:#fff}
.cfd .ai-seg .lg {width:18px;height:18px;fill:currentColor}
.cfd .open .o-app {display:inline-flex;align-items:center;gap:var(--cf-space-1)}
.cfd #examples.ai-claude .open .o-gpt, .cfd #examples:not(.ai-claude) .open .o-claude {display:none}
@media (prefers-reduced-motion:reduce) {.cfd .ai-seg button {transition:none}}