/* Instant preview tool */
.ip { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: clamp(24px, 3.5vw, 44px); align-items: start; }
.ip > * { min-width: 0; }
@media (max-width: 1020px) { .ip { grid-template-columns: 1fr; } }
.ip-controls .form { gap: 18px; }
.ip-example { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.ip-example button { background: none; border: 0; padding: 0; color: var(--ink-2); font: 600 .85rem var(--f-body); text-decoration: underline; cursor: pointer; }
.seg-trade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1.5px solid var(--line-strong); border-radius: 5px; overflow: hidden; }
.seg-trade label { position: relative; }
.seg-trade input { position: absolute; opacity: 0; inset: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; }
.seg-trade span { display: block; text-align: center; padding: .65em .4em; font-size: .88rem; font-weight: 600; border-left: 1.5px solid var(--line-strong); background: var(--bg); }
.seg-trade label:first-child span { border-left: 0; }
.seg-trade input:checked + span { background: var(--ink); color: var(--bg); }
.seg-trade input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: -3px; }
.styles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.style-opt { position: relative; }
.style-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; }
.style-opt > span { display: grid; gap: 8px; padding: 10px; border: 1.5px solid var(--line-strong); border-radius: 6px; background: var(--bg); font-size: .86rem; font-weight: 600; }
.style-opt input:checked + span { border-color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.style-opt input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.swatch { display: flex; height: 22px; border-radius: 3px; overflow: hidden; border: 1px solid rgb(0 0 0 / .12); }
.swatch i { flex: 1; display: block; }

.ip-stage { display: grid; gap: 14px; }
.ip-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.ip-toolbar .seg-trade { grid-template-columns: repeat(2, auto); }
.ip-toolbar .seg-trade span { padding: .5em 1em; }
.ip-stage .frame { transition: max-width .25s ease; margin-inline: auto; width: 100%; }
.ip-stage[data-device="phone"] .frame { max-width: 390px; }
.ip-stage .frame__body { height: clamp(520px, 78vh, 780px); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; background: #fff; }
@media (max-width: 700px) { .ip-device { display: none; } .ip-stage .frame__body { height: 620px; } }

/* ---- The generated site ---- */
.ip-site {
  --ip-bg: #fff; --ip-surface: #f3f6fb; --ip-ink: #0b2545; --ip-muted: #51607a; --ip-accent: #1b5cf2; --ip-accent-ink: #fff;
  --ip-hi: #ffc928; --ip-line: #e3e9f2; --ip-head-bg: #fff; --ip-head-ink: #0b2545; --ip-top-bg: #0b2545; --ip-top-ink: #dbe6ff;
  --ip-display: "Plus Jakarta Sans", "Segoe UI", sans-serif; --ip-body: "Plus Jakarta Sans", "Segoe UI", sans-serif;
  --ip-h-weight: 800; --ip-h-stretch: 100%; --ip-h-case: none; --ip-h-track: -.03em; --ip-h-lead: 1.04; --ip-radius: 14px; --ip-btn-radius: 999px;
  background: var(--ip-bg); color: var(--ip-ink); font-family: var(--ip-body); font-size: 15px; line-height: 1.55; min-height: 100%;
  -webkit-font-smoothing: antialiased;
}
.ip--panel {
  --ip-bg: #0f1214; --ip-surface: #181d20; --ip-ink: #eef1f2; --ip-muted: #9aa5aa; --ip-accent: #e0352b; --ip-accent-ink: #fff;
  --ip-hi: #ff6b5f; --ip-line: #262c2f; --ip-head-bg: #0f1214; --ip-head-ink: #eef1f2; --ip-top-bg: #e0352b; --ip-top-ink: #fff;
  --ip-display: "Archivo", "Arial Narrow", sans-serif; --ip-body: "Archivo", Arial, sans-serif;
  --ip-h-weight: 800; --ip-h-stretch: 78%; --ip-h-case: uppercase; --ip-h-track: -.005em; --ip-h-lead: .96; --ip-radius: 6px; --ip-btn-radius: 5px;
}
.ip--classic {
  --ip-bg: #f3f5f6; --ip-surface: #ffffff; --ip-ink: #13302c; --ip-muted: #4c615d; --ip-accent: #0f4c45; --ip-accent-ink: #fff;
  --ip-hi: #e8b04b; --ip-line: #d7dee0; --ip-head-bg: #0f4c45; --ip-head-ink: #fff; --ip-top-bg: #0b3832; --ip-top-ink: #cfe3df;
  --ip-display: "Source Serif 4", Georgia, serif; --ip-body: "Source Sans 3", "Segoe UI", sans-serif;
  --ip-h-weight: 600; --ip-h-stretch: 100%; --ip-h-case: none; --ip-h-track: -.015em; --ip-h-lead: 1.08; --ip-radius: 4px; --ip-btn-radius: 4px;
}
.ip-site * { box-sizing: border-box; }
.ip-site h1, .ip-site h2, .ip-site h3 { font-family: var(--ip-display); font-weight: var(--ip-h-weight); font-stretch: var(--ip-h-stretch); text-transform: var(--ip-h-case); letter-spacing: var(--ip-h-track); line-height: var(--ip-h-lead); color: inherit; margin: 0; text-wrap: balance; }
.ip-site p { margin: 0; max-width: 60ch; }
.ip-in { padding-inline: clamp(16px, 5cqi, 48px); }
.ip-top { background: var(--ip-top-bg); color: var(--ip-top-ink); font-size: 12px; font-weight: 600; letter-spacing: .02em; padding-block: 7px; display: flex; justify-content: space-between; gap: 12px; }
.ip-top span:last-child { display: none; }
.ip-head { background: var(--ip-head-bg); color: var(--ip-head-ink); display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-block: 14px; border-bottom: 1px solid var(--ip-line); }
.ip--classic .ip-head { border-bottom: 0; }
.ip-logo { display: flex; align-items: center; gap: 10px; font-family: var(--ip-display); font-weight: 800; font-stretch: var(--ip-h-stretch); font-size: 17px; line-height: 1.1; text-transform: var(--ip-h-case); letter-spacing: .01em; min-width: 0; }
.ip--classic .ip-logo { font-weight: 600; font-size: 18px; letter-spacing: 0; }
.ip-mono { flex: none; width: 36px; height: 36px; display: grid; place-items: center; background: var(--ip-accent); color: var(--ip-accent-ink); border-radius: calc(var(--ip-radius) * .6); font: 800 14px/1 var(--ip-body); letter-spacing: .02em; }
.ip--classic .ip-mono { background: var(--ip-hi); color: #13302c; }
.ip-nav { display: none; gap: 20px; font-size: 14px; font-weight: 600; opacity: .85; }
.ip-call { flex: none; display: inline-flex; align-items: center; gap: 6px; background: var(--ip-accent); color: var(--ip-accent-ink); font-weight: 700; font-size: 13px; padding: 9px 12px; border-radius: var(--ip-btn-radius); white-space: nowrap; }
.ip--classic .ip-call { background: var(--ip-hi); color: #13302c; }
.ip-call svg { width: 14px; height: 14px; fill: currentColor; }
.ip-call b { display: none; font-weight: 700; }
.ip-hero { display: grid; gap: 26px; padding-block: 34px 38px; }
.ip--clean .ip-hero { background: linear-gradient(180deg, var(--ip-surface), var(--ip-bg)); }
.ip-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ip-accent); margin-bottom: 12px; }
.ip--panel .ip-eyebrow { color: var(--ip-hi); }
.ip-h1 { font-size: clamp(27px, 5cqi, 46px); }
.ip--panel .ip-h1 { font-size: clamp(31px, 5.8cqi, 54px); }
.ip-h1 em { font-style: normal; color: var(--ip-accent); }
.ip--panel .ip-h1 em { color: var(--ip-hi); }
.ip--classic .ip-h1 em { font-style: italic; color: #0f7a6c; }
.ip-site .ip-sub { color: var(--ip-muted); font-size: 16px; margin-top: 14px; }
.ip-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.ip-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; padding: 7px 11px; border-radius: var(--ip-btn-radius); border: 1.5px solid var(--ip-line); background: var(--ip-surface); }
.ip-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ip-accent); }
.ip--panel .ip-badge { background: transparent; border-color: #3a4247; }
.ip--panel .ip-badge::before { background: #44ff88; }
.ip-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.ip-btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 18px; border-radius: var(--ip-btn-radius); font-weight: 700; font-size: 14.5px; }
.ip-btn--a { background: var(--ip-accent); color: var(--ip-accent-ink); }
.ip--classic .ip-btn--a { background: var(--ip-accent); }
.ip-btn--b { border: 2px solid var(--ip-line); color: var(--ip-ink); }
.ip--panel .ip-btn--b { border-color: #5a646a; }
.ip-art { display: grid; place-items: center; }
.ip-art svg { width: 100%; max-width: 360px; height: auto; }
.ip-section { padding-block: 34px; }
.ip-section--surface { background: var(--ip-surface); border-block: 1px solid var(--ip-line); }
.ip-h2 { font-size: clamp(22px, 4cqi, 32px); margin-bottom: 18px !important; }
.ip-kicker { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ip-muted); margin-bottom: 6px; }
.ip-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.ip-card { background: var(--ip-bg); border: 1px solid var(--ip-line); border-radius: var(--ip-radius); padding: 18px; display: grid; gap: 6px; }
.ip--clean .ip-card { background: var(--ip-surface); border-color: transparent; }
.ip--panel .ip-card { background: var(--ip-surface); }
.ip-card h3 { font-size: 17px; }
.ip--panel .ip-card h3 { font-size: 19px; }
.ip-card p { color: var(--ip-muted); font-size: 14px; }
.ip-card i { width: 30px; height: 4px; border-radius: 2px; background: var(--ip-accent); display: block; margin-bottom: 6px; }
.ip--panel .ip-card i { background: var(--ip-hi); }
.ip-why { display: grid; gap: 16px; }
.ip-why div { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; }
.ip-why b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ip-accent); color: var(--ip-accent-ink); font-size: 14px; }
.ip--classic .ip-why b { background: var(--ip-hi); color: #13302c; }
.ip-why h3 { font-size: 16.5px; margin-bottom: 2px !important; }
.ip-why p { color: var(--ip-muted); font-size: 14px; }
.ip-quote { display: grid; gap: 16px; padding-block: 30px; background: var(--ip-accent); color: var(--ip-accent-ink); }
.ip--panel .ip-quote { background: #1a0d0c; border-top: 3px solid var(--ip-accent); color: var(--ip-ink); }
.ip-quote p { opacity: .85; }
.ip-quote .ip-btn--a { background: var(--ip-accent-ink); color: var(--ip-accent); justify-self: start; }
.ip--panel .ip-quote .ip-btn--a { background: var(--ip-accent); color: #fff; }
.ip--classic .ip-quote .ip-btn--a { background: var(--ip-hi); color: #13302c; }
.ip-foot { padding-block: 22px; font-size: 12.5px; color: var(--ip-muted); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }

@container (min-width: 620px) {
  .ip-top span:last-child { display: inline; }
  .ip-nav { display: flex; }
  .ip-call b { display: inline; }
  .ip-hero { grid-template-columns: 1.4fr 1fr; align-items: center; padding-block: 52px 56px; }
  .ip-grid { grid-template-columns: repeat(2, 1fr); }
  .ip-why { grid-template-columns: repeat(3, 1fr); }
  .ip-quote { grid-template-columns: 1fr auto; align-items: center; }
}
@container (min-width: 860px) { .ip-grid { grid-template-columns: repeat(3, 1fr); } }
/* SVG art classes */
.ip-site .a { fill: var(--ip-accent); }
.ip-site .h { fill: var(--ip-hi); }
.ip-site .s { fill: var(--ip-surface); stroke: var(--ip-line); stroke-width: 2; }
.ip-site .k { fill: none; stroke: var(--ip-ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.ip-site .d { fill: #10221c; }
.ip-site .g { fill: #44ff88; }
.ip-site .m { fill: var(--ip-muted); opacity: .45; }
.ip-site .w { fill: #fff; opacity: .9; }
.ip-site .i { fill: var(--ip-ink); }
.ip--panel .ip-site .i, .ip--panel .i { fill: #0f1214; }