/* The original website tokens and hero remain the source of truth. */
.hybrid {
  --r-bg: var(--page);
  --r-ink: var(--text);
  --r-muted: var(--muted);
  --r-line: var(--line);
  --r-accent: var(--accent);
}

/* Same gutters as the hero; only the content's maximum width changes. */
.hybrid .r-wrap {
  width: min(1280px, calc(100% - var(--page-gutter) * 2));
}
.hybrid .r-section { padding-block: clamp(72px, 6vw, 112px); }
.hybrid h2 { font-size: clamp(34px, 3.5vw, 54px); max-width: 20ch; }
.hybrid .r-copy { max-width: 48ch; }
.hybrid .h-center { max-width: 720px; margin-inline: auto; text-align: center; }
.hybrid .h-center h2, .hybrid .h-center .r-copy { margin-inline: auto; }
.hybrid .h-center .r-copy { max-width: 52ch; }
.hybrid .r-kicker { margin-bottom: 18px; }
.hybrid .r-steps { gap: clamp(24px, 4vw, 64px); margin-top: 56px; }
.hybrid .r-step { display: flex; flex-direction: column; align-items: flex-start; }
.hybrid .r-step > span { margin-bottom: 22px; color: var(--subtle); }
.hybrid .r-step p { margin-bottom: 16px; max-width: 40ch; }
.hybrid .r-step .r-link { margin-top: auto; }
.hybrid .r-faq { width: 100%; max-width: none; margin: 56px 0 0; }
.hybrid .r-faq details p { max-width: 74ch; }
.hybrid .r-faq details { position: relative; }
.hybrid .r-faq summary { min-height: 70px; }
.hybrid .r-faq summary::after { content: "+"; transition: transform 360ms cubic-bezier(.2,.8,.2,1); }
.hybrid .r-faq details[open] summary::after { transform: rotate(45deg); }
.hybrid .r-faq.h-faq-ready details[data-expanded="false"] summary::after { transform: none; }
.hybrid .h-answer { display: flow-root; }
.hybrid .h-faq-ready .h-answer { opacity: 0; transform: translateY(-6px); transition: opacity 220ms ease, transform 360ms ease; }
.hybrid .h-faq-ready [data-expanded="true"] .h-answer { opacity: 1; transform: none; }
.hybrid .h-band { background: var(--surface); border-block: 1px solid var(--line); }
.hybrid .r-split { gap: clamp(40px, 6vw, 112px); align-items: center; }
.hybrid .r-split > * { min-width: 0; }
.hybrid .r-network { margin-top: 0; }
.hybrid .h-caption { text-align: center; }
.hybrid .r-network > span { background: var(--subtle); }
.hybrid .r-network > span::after { border-color: var(--subtle); }

/* Cards supply the framing here; the rest of the page stays open. */
.hybrid .h-plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: 960px;
  margin: 48px auto 0;
}
.hybrid .h-plan {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3vw, 44px);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
.hybrid .h-plan-home { border-color: var(--accent); }
.hybrid .h-plan .r-kicker { font-size: 10px; color: var(--subtle); margin-bottom: 10px; }
.hybrid .h-plan-home .r-kicker { color: var(--accent); }
.hybrid .h-plan h3 { font-size: 26px; }
.hybrid .h-price { font-size: 56px; font-weight: 500; letter-spacing: -.045em; line-height: 1.1; margin: 28px 0 8px; }
.hybrid .h-price small { font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.hybrid .h-allowance { border-block: 1px solid var(--line); margin-top: 28px; padding-block: 22px; }
.hybrid .h-allowance strong { font-size: 17px; font-weight: 500; display: block; margin-bottom: 5px; }
.hybrid .h-plan ul { list-style: none; padding: 24px 0; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.hybrid .h-plan li { display: flex; gap: 12px; margin-bottom: 10px; }
.hybrid .h-plan li:last-child { margin-bottom: 0; }
.hybrid .h-check { color: var(--accent); flex: none; }
.hybrid .h-plan .button { width: 100%; margin-top: auto; }
.hybrid .h-pricing-foot { margin-top: 24px; text-align: center; }
.hybrid .h-pricing-foot .r-link { margin-top: 12px; }
.hybrid .h-guides { border-top: 1px solid var(--line); }
.hybrid .h-guides .r-split { align-items: end; }
.hybrid .h-guides .r-split .r-copy { margin: 0; }
.hybrid .h-guide-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 56px; }
.hybrid .h-guide-card { color: var(--text); text-decoration: none; }
.hybrid .h-guide-card h3 { font-size: 22px; }
.hybrid .h-guide-summary { margin: 12px 0 28px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.hybrid .h-guide-more { display: inline-flex; align-items: center; gap: 10px; margin-top: auto; font-size: 14px; transition: color 280ms; }
.hybrid .h-guide-more > span[aria-hidden] { display: inline-grid; place-items: center; width: 24px; height: 24px; overflow: hidden; }
.hybrid .h-guide-card:focus-visible { outline: none; border-color: var(--accent); }
.hybrid .h-guide-card:focus-visible .h-guide-more { color: var(--accent); }
.hybrid .h-guide-card:focus-visible .h-arrow-glyph { animation: h-arrow-return 650ms cubic-bezier(.22,1,.36,1); }
.hybrid .h-guides-foot { margin-top: 40px; text-align: center; }
.hybrid .h-close { padding-block: clamp(72px, 7vw, 112px); border-block: 1px solid var(--line); background: var(--surface); }
.hybrid .h-closing-layout { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: clamp(48px, 7vw, 112px); }
.hybrid .h-close h2 { font-size: clamp(38px, 4vw, 60px); line-height: 1.12; }
.hybrid .h-closing-action { max-width: 360px; justify-self: end; width: 100%; }
.hybrid .h-closing-action .r-copy { margin-top: 0; font-size: 18px; }
.hybrid .h-close .button { margin-top: 28px; width: 100%; min-height: 56px; }
.hybrid .r-footer { border-top: 0; }

@media (max-width: 900px) {
  .hybrid .r-steps { grid-template-columns: 1fr; gap: 28px; }
  .hybrid .r-step { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 16px; }
  .hybrid .r-step > span { grid-column: 1; grid-row: 1 / 4; margin: 5px 0 0; }
  .hybrid .r-step h3, .hybrid .r-step p, .hybrid .r-step .r-link { grid-column: 2; }
  .hybrid .r-step .r-link { justify-self: start; }
  .hybrid .r-step p { max-width: 52ch; }
  .hybrid .r-split { grid-template-columns: 1fr; gap: 40px; }
  .hybrid .h-system { max-width: 640px; width: 100%; }
  .hybrid .h-guide-cards { grid-template-columns: 1fr; gap: 16px; margin-top: 40px; }
}
@media (max-width: 700px) {
  .hybrid .r-section { padding-block: 64px; }
  .hybrid .h-plans { grid-template-columns: 1fr; margin-top: 36px; }
  .hybrid .h-plan { padding: 28px; }
  .hybrid .r-steps { margin-top: 36px; }
  .hybrid .r-faq { margin-top: 36px; }
  .hybrid .h-close { padding-block: 48px; }
  .hybrid .h-closing-layout { grid-template-columns: 1fr; gap: 32px; }
  .hybrid .h-closing-action { justify-self: start; max-width: 400px; }
  .hybrid .r-network { gap: 8px; }
  .hybrid .r-network > div { font-size: 12px; }
  .hybrid .r-network > span { width: 14px; flex: none; }
}

/* Motion language: framing brackets, a single scan, and an arrow returning
   through the frame. No layout jumps, looping effects, or text scrambling. */
.hybrid :is(.r-link, .button) { position: relative; }
.hybrid .r-link { isolation: isolate; }
.hybrid .r-link > span[aria-hidden] {
  display: inline-grid; place-items: center; width: 28px; height: 28px; overflow: hidden; flex: none;
}
.hybrid .h-arrow-glyph { display: inline-block; }
.hybrid .r-link::after {
  content: ""; pointer-events: none; position: absolute; right: -4px; top: 50%;
  width: 34px; height: 34px; opacity: 0; transform: translateY(-50%) scale(1.5) rotate(-12deg);
  background:
    linear-gradient(var(--accent), var(--accent)) left top / 8px 1px,
    linear-gradient(var(--accent), var(--accent)) left top / 1px 8px,
    linear-gradient(var(--accent), var(--accent)) right bottom / 8px 1px,
    linear-gradient(var(--accent), var(--accent)) right bottom / 1px 8px;
  background-repeat: no-repeat;
  transition: opacity 180ms ease, transform 440ms cubic-bezier(.16,1,.3,1);
}
.hybrid :is(.r-link, .r-faq summary)::before {
  content: ""; pointer-events: none; position: absolute; inset: auto 0 -1px; height: 1px; opacity: 0;
  background: linear-gradient(90deg, transparent 35%, var(--accent) 49%, var(--text) 50%, var(--accent) 51%, transparent 65%);
  background-size: 300% 100%; background-position: 100% 0;
}
.hybrid .r-faq summary { position: relative; }
.hybrid .h-plan { position: relative; isolation: isolate; overflow: hidden; }
.hybrid .h-plan::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  background: radial-gradient(280px circle at var(--pointer-x, 50%) var(--pointer-y, 35%), #67dda21a, transparent 75%);
  transition: opacity 450ms;
}
.hybrid .h-plan::after {
  content: ""; position: absolute; inset: 10px; pointer-events: none; opacity: 0;
  background:
    linear-gradient(var(--accent), var(--accent)) left top / 18px 1px,
    linear-gradient(var(--accent), var(--accent)) left top / 1px 18px,
    linear-gradient(var(--accent), var(--accent)) right top / 18px 1px,
    linear-gradient(var(--accent), var(--accent)) right top / 1px 18px,
    linear-gradient(var(--accent), var(--accent)) left bottom / 18px 1px,
    linear-gradient(var(--accent), var(--accent)) left bottom / 1px 18px,
    linear-gradient(var(--accent), var(--accent)) right bottom / 18px 1px,
    linear-gradient(var(--accent), var(--accent)) right bottom / 1px 18px;
  background-repeat: no-repeat; transform: scale(1.035);
  transition: opacity 180ms, transform 600ms cubic-bezier(.16,1,.3,1);
}
.hybrid .h-card-scan { position: absolute; inset: 0 16px auto; height: 1px; pointer-events: none; opacity: 0; background: linear-gradient(90deg, transparent, #67dda280, transparent); }
.hybrid .button { gap: 18px; transition: color 280ms, border-color 280ms; }
.hybrid .button > span { position: relative; z-index: 1; }
.hybrid .button > span[aria-hidden] { display: inline-grid; place-items: center; width: 24px; height: 24px; overflow: hidden; flex: none; }
.hybrid .button::after { display: none; }
.hybrid .button::before {
  content: ""; position: absolute; inset: 0; z-index: 0; background: var(--page); pointer-events: none;
  clip-path: polygon(0 0, 0 0, -20% 100%, -20% 100%);
  transition: clip-path 520ms cubic-bezier(.16,1,.3,1);
}
.hybrid .button:focus-visible { color: var(--accent); border-color: var(--accent); box-shadow: none; }
.hybrid .button:focus-visible::before { clip-path: polygon(0 0, 120% 0, 100% 100%, 0 100%); }
.hybrid .r-link:focus-visible::after { opacity: 1; transform: translateY(-50%) scale(1) rotate(0); }
.hybrid :is(.r-link, .r-faq summary):focus-visible::before { animation: h-rail-scan 900ms ease-out both; }
.hybrid :is(.r-link, .button):focus-visible .h-arrow-glyph { animation: h-arrow-return 650ms cubic-bezier(.22,1,.36,1); }
.hybrid .h-plan:focus-within::before, .hybrid .h-plan:focus-within::after { opacity: 1; transform: none; }
.hybrid .h-plan:focus-within .h-card-scan { animation: h-card-scan 1000ms cubic-bezier(.2,.6,.3,1) both; }
@media (hover: hover) and (pointer: fine) {
  .hybrid .r-link:hover::after { opacity: 1; transform: translateY(-50%) scale(1) rotate(0); }
  .hybrid :is(.r-link, .r-faq summary):hover::before { animation: h-rail-scan 900ms ease-out both; }
  .hybrid :is(.r-link, .button):hover .h-arrow-glyph { animation: h-arrow-return 650ms cubic-bezier(.22,1,.36,1); }
  .hybrid .h-plan:hover::before, .hybrid .h-plan:hover::after { opacity: 1; transform: none; }
  .hybrid .h-plan:hover .h-card-scan { animation: h-card-scan 1000ms cubic-bezier(.2,.6,.3,1) both; }
  .hybrid .h-guide-card:hover .h-guide-more { color: var(--accent); }
  .hybrid .h-guide-card:hover .h-arrow-glyph { animation: h-arrow-return 650ms cubic-bezier(.22,1,.36,1); }
  .hybrid .button:hover { color: var(--accent); border-color: var(--accent); transform: none; box-shadow: none; }
  .hybrid .button:hover::before { clip-path: polygon(0 0, 120% 0, 100% 100%, 0 100%); }
}
@keyframes h-rail-scan { 0% { opacity: 0; background-position: 100% 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; background-position: 0 0; } }
@keyframes h-arrow-return { 0%, 15% { transform: translate(0,0); } 45% { transform: translate(140%,-140%); } 46% { transform: translate(-140%,140%); } 100% { transform: translate(0,0); } }
@keyframes h-card-scan { 0% { top: 4%; opacity: 0; } 20% { opacity: 1; } 85% { opacity: .65; } 100% { top: 96%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .hybrid *, .hybrid *::before, .hybrid *::after { animation: none !important; transition: none !important; }
  .hybrid .h-card-scan { display: none; }
}