/* The detail pages' template in design H (dev/landing/handover.md, section 4.2): one stylesheet
   for every detail page. First the boards' own i-* rules as the canvas has them
   (dev/landing/reference/pages: how-it-works, pricing, for-agents and code-and-data), so the
   later pages fit; then the board's inline styles as classes, and the contact form. */
.i-art{position:absolute;top:0;bottom:0;right:0;width:62%;-webkit-mask-image:linear-gradient(to right,transparent,#000 45%);mask-image:linear-gradient(to right,transparent,#000 45%)}
.i-title{margin:0;max-width:18ch;font-size:clamp(40px,5vw,68px);line-height:1.02;font-weight:600;letter-spacing:-0.035em;text-wrap:balance}
.i-title span{color:var(--text-3)}
.i-facts{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:12px;max-width:980px}
.i-facts li{flex:1 1 260px;min-width:0;display:flex;gap:12px;align-items:flex-start;padding:16px 18px;background:var(--surface);border:1px solid var(--line);border-radius:12px}
.i-facts-icon{display:inline-flex;color:var(--text-2);padding-top:2px}
.i-facts li > span:last-child{display:flex;flex-direction:column;gap:2px;font-size:14px;color:var(--text-2)}
.i-facts strong{font-size:15px;font-weight:600;color:var(--text)}
.i-facts strong code,.i-step > p code,.i-list code,.i-note code,.i-small code,.i-fig figcaption code,.i-dl dt code{font-family:var(--font-mono);font-size:0.88em;padding:1px 5px;border-radius:var(--radius-4);background:var(--code);border:1px solid var(--line)}
.i-toc{flex:0 0 220px;margin-top:56px;display:flex;flex-direction:column;gap:12px;font-size:14px}
.i-toc-label{font-size:12px;font-weight:600;color:var(--text-3)}
.i-toc ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:2px}
.i-toc ol a{display:flex;gap:10px;align-items:baseline;padding:6px 10px;border-radius:var(--radius-6);color:var(--text-2);text-decoration:none}
.i-toc ol a span{font-family:var(--font-mono);font-size:12px;color:var(--text-3)}
.i-toc ol a[aria-current]{background:var(--surface-2);color:var(--text);font-weight:500}
.i-toc-foot{margin-top:8px;padding-top:16px;border-top:1px solid var(--line)}
.i-body{flex:999 1 560px;min-width:0;max-width:820px;display:flex;flex-direction:column}
.i-step{padding:56px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:16px}
.i-step:last-child{border-bottom:0}
.i-step > p{margin:0;max-width:66ch;font-size:16.5px;color:var(--text-2)}
.i-num{font-family:var(--font-mono);font-size:13px;color:var(--text-3)}
.i-h2{margin:0;font-size:clamp(26px,2.6vw,34px);line-height:1.15;font-weight:600;letter-spacing:-0.025em}
.i-h2 span{color:var(--text-3)}
.i-list{margin:0;padding:0 0 0 18px;max-width:66ch;display:flex;flex-direction:column;gap:6px;color:var(--text-2)}
.i-list strong,.i-note strong{color:var(--text);font-weight:600}
.i-small{margin:0;max-width:66ch;font-size:14px;color:var(--text-3)}
.i-note{max-width:66ch;padding:14px 16px;border:1px solid var(--line);border-left:3px solid var(--text-3);border-radius:var(--radius-8);background:var(--surface);font-size:15px;color:var(--text-2)}
.i-fig{margin:8px 0 0;padding:22px;background:var(--surface);border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;gap:14px}
.i-fig figcaption{font-size:12px;color:var(--text-3)}
.i-mono{background:var(--code);border:1px solid var(--line);border-radius:var(--radius-8);padding:12px 14px;font-family:var(--font-mono);font-size:12.5px;line-height:1.75;color:var(--text-2);display:flex;flex-direction:column}
.i-mono-strong{color:var(--text)}
.i-grid{display:flex;flex-wrap:wrap;gap:12px}
.i-panel{flex:1 1 300px;min-width:0;padding:18px 20px;background:var(--surface);border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;gap:12px}
.i-panel h3{margin:0;font-size:13px;font-weight:600;color:var(--text-3)}
.i-dl{margin:0;display:flex;flex-direction:column}
.i-dl > div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;align-items:baseline;padding:9px 0;border-top:1px solid var(--line);font-size:14px}
.i-dl > div:first-child{border-top:0;padding-top:0}
.i-dl dt{margin:0;font-weight:600}
.i-dl dd{margin:0;color:var(--text-2)}
.i-next{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:6px;padding:18px 20px;background:var(--surface);border:1px solid var(--line);border-radius:12px;color:var(--text-2);font-size:14px;text-decoration:none}
.i-next-label{font-size:16px;font-weight:600;color:var(--text)}
.i-next .rr-icon{margin-top:6px;color:var(--text-3)}
@media (max-width: 900px){.i-toc{flex:1 1 100%;margin-top:32px}.i-toc ol{flex-direction:row;flex-wrap:wrap}.i-toc-foot{display:none}.i-dl > div{grid-template-columns:100px minmax(0,1fr)}}
.i-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.i-muted{color:var(--text-3)}
.i-table{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius-8);overflow:hidden;font-size:14px}
.i-tr{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 110px;gap:12px;align-items:center;padding:10px 14px;border-top:1px solid var(--line);background:var(--surface)}
.i-tr:first-child{border-top:0}
.i-th{background:var(--surface-2);font-size:12px;font-weight:600;color:var(--text-3)}
.i-tr code{font-family:var(--font-mono);font-size:12.5px}
.i-flow{display:flex;flex-wrap:wrap;align-items:stretch;gap:10px}
.i-flow-box{flex:1 1 180px;min-width:0;display:flex;flex-direction:column;gap:4px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius-8);background:var(--bg);font-size:14px;color:var(--text-2)}
.i-flow-label{font-size:15px;font-weight:600;color:var(--text)}
.i-flow-arrow{display:inline-flex;align-items:center;color:var(--text-3)}
.i-dl-wide > div{grid-template-columns:140px minmax(0,1fr)}
.i-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
@media (max-width:1039px){.i-plans{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.i-plans{grid-template-columns:minmax(0,1fr)}}
.i-plan{min-width:0;display:flex;flex-direction:column;gap:14px;padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:12px}
.i-plan.is-picked{border-color:var(--signal);box-shadow:var(--ring-selected)}
.i-plan h3{margin:0;display:flex;align-items:center;gap:10px;font-size:18px;font-weight:600}
.i-plan p{margin:0;color:var(--text-2)}
.i-plan ul{margin:0 0 6px;padding:0 0 0 18px;display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--text-2)}
.i-plan > :last-child{margin-top:auto}
.i-price{display:flex;align-items:baseline;gap:8px;color:var(--text-2);font-size:14px}
.i-price-n{font-size:36px;font-weight:600;letter-spacing:-0.03em;color:var(--text)}
@media (max-width: 640px){.i-tr{grid-template-columns:minmax(0,1fr) 96px}.i-tr > :nth-child(2){grid-column:1;grid-row:2}.i-tr > :nth-child(3){grid-row:1 / span 2;grid-column:2}.i-flow-arrow{transform:rotate(90deg);justify-content:center;flex:1 1 100%}}

/* The boards' inline styles, as classes. */
.i-band { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.i-band-inner { position: relative; max-width: 1240px; margin: 0 auto; padding: clamp(48px, 7vw, 88px) clamp(16px, 4vw, 40px) clamp(48px, 6vw, 72px); display: flex; flex-direction: column; gap: 20px; }
.i-crumbs { font-size: 13px; color: var(--text-3); }
.i-crumbs a { color: var(--text-3); text-decoration: none; }
.i-crumbs [aria-current] { color: var(--text-2); }
.i-lead { margin: 0; max-width: 60ch; font-size: 18px; line-height: 1.55; color: var(--text-2); }
.i-plans-section { max-width: 1240px; margin: 0 auto; padding: clamp(48px, 6vw, 72px) clamp(16px, 4vw, 40px) 0; display: flex; flex-direction: column; gap: 16px; }
.i-below { max-width: none; }
.i-main { max-width: 1240px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); display: flex; flex-wrap: wrap; align-items: flex-start; gap: 32px 64px; }
.i-end { max-width: 1240px; margin: 0 auto; padding: clamp(72px, 9vw, 112px) clamp(16px, 4vw, 40px) 0; }
.i-install { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: clamp(24px, 4vw, 40px); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px 40px; }
.i-install-text { display: flex; flex-direction: column; gap: 6px; max-width: 56ch; }
.i-install-title { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.015em; }
.i-install-text p { margin: 0; color: var(--text-2); }
.i-install-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* The Plans page: a plan's billing under its price, and the page without Stripe's prices. */
.i-plan .i-plan-billing { margin-top: -6px; font-size: 13px; color: var(--text-3); }
.i-unpriced { margin: 0; padding: 14px 18px; background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--radius-10); color: var(--text-2); }

/* A page in one column, without "On this page": contact, the 404 page. */
.i-column { padding-top: 48px; }
.i-column > p { margin: 0; }
.i-h2-small { font-size: 22px; }

/* The contact form, in the design system's terms: its fields' border, radius, height and focus. */
.i-form { display: flex; flex-direction: column; gap: 16px; max-width: 560px; }
.i-field { display: flex; flex-direction: column; gap: 6px; }
.i-field label { font-size: 14px; font-weight: 500; color: var(--text); }
.i-field input, .i-field select, .i-field textarea { box-sizing: border-box; width: 100%; min-height: var(--control-44); padding: 0 var(--space-12); border: 1px solid var(--line-strong); border-radius: var(--radius-8); background: var(--surface); color: var(--text); font: inherit; font-size: 15px; }
.i-field textarea { min-height: 160px; padding: var(--space-10) var(--space-12); line-height: 1.55; resize: vertical; }
.i-field input:focus-visible, .i-field select:focus-visible, .i-field textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.i-field [aria-invalid="true"] { border-color: var(--sev-major); }
.i-select { position: relative; display: block; }
.i-select select { appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer; }
.i-select-chevron { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--text-2); }
.field-problem, .form-refused { margin: 0; font-size: 13px; color: var(--sev-major); }
.form-refused { padding: 10px 14px; border: 1px solid var(--sev-major); border-radius: var(--radius-8); background: var(--surface); }
.i-form .cf-turnstile { min-height: 65px; }
.contact-website { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* The legal pages' tables (the sub-processors): the design system's table look, as a
   real table. Under 640px each row stacks, each cell after its column's label. */
.i-ltable-wrap { border: 1px solid var(--line); border-radius: var(--radius-8); overflow: hidden; }
.i-ltable { width: 100%; border-collapse: collapse; font-size: 14px; }
.i-ltable th, .i-ltable td { padding: 10px 14px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); background: var(--surface); color: var(--text-2); }
.i-ltable thead th { border-top: 0; background: var(--surface-2); font-size: 12px; font-weight: 600; color: var(--text-3); }
.i-ltable tbody th { font-weight: 600; color: var(--text); }
@media (max-width: 640px) {
  .i-ltable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .i-ltable tr { display: block; border-top: 1px solid var(--line); }
  .i-ltable tbody tr:first-child { border-top: 0; }
  .i-ltable th, .i-ltable td { display: block; border-top: 0; padding: 4px 14px; }
  .i-ltable tbody th { padding-top: 12px; }
  .i-ltable td:last-child { padding-bottom: 12px; }
  .i-ltable td::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 600; color: var(--text-3); }
}