/* KeepRhythm — Editorial Cinematic (design master: Shop/keeprhythm-formats/PROMPT.md).
   Loaded after base.css on every page. Part 1 restyles the shared shop pages; part 2 is the home page
   (brands/rhythm/templates/index.html, classes prefixed kr-). Colors come from theme.css where a theme
   key exists; the few literals below are tints of those keys. */

:root {
  --kr-page: 1280px;
  --kr-gutter: 32px;
  --kr-radius: 28px;
  --kr-shadow: 0 8px 30px rgba(15, 23, 42, .05);
  --kr-line: rgba(15, 23, 42, .12);
  --kr-accent: #b4577d;
  --kr-accent-soft: #f4e6ec;
  --kr-accent-deep: #7a2e4e;
  --kr-veil: 246, 244, 242;
  --kr-rise: .8s;
  --kr-rise-distance: 24px;
}

/* ============================================================ 1. shared pages */
body { -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
[hidden] { display: none !important; }
h1, h2, h3 { font-weight: 400; text-wrap: balance; }
h1 em, h2 em, h3 em { font-style: normal; color: var(--muted); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.skip-link { border-radius: 999px; font-weight: 500; }

.eyebrow { font: 500 12px/1.5 var(--font-body); letter-spacing: 1.8px; text-transform: uppercase; color: var(--muted); }
.button { border-radius: 999px; font: 500 14px/1.4 var(--font-body); padding: 14px 32px; min-height: 48px; transition: transform 200ms ease-in-out; }
.button:hover { filter: none; transform: scale(1.03); }
.button:active { transform: scale(.99); }
.button-quiet { background: transparent; color: var(--ink); border: 0; box-shadow: inset 0 0 0 1px var(--kr-line); }
.button.is-soon, .button:disabled { background: var(--soft); color: var(--muted); border: 1px dashed var(--muted); box-shadow: none; transform: none; }
.text-link { font-weight: 500; font-size: 14px; border-bottom: 0; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; padding: 10px 0; display: inline-block; }

/* Header: wordmark, centred navigation, call to action. */
.kr-header { max-width: none; padding: 0; display: block; position: relative; z-index: 5; }
.kr-nav-grid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; max-width: var(--kr-page); margin: 0 auto; padding: 24px var(--kr-gutter); }
.wordmark, .kr-wordmark { font: 400 30px/1 var(--font-display); letter-spacing: -.5px; white-space: nowrap; width: fit-content; text-decoration: none; }
.kr-wordmark sup { font: 500 11px var(--font-body); margin-left: 2px; vertical-align: super; }
.kr-nav ul { display: flex; gap: 40px; list-style: none; margin: 0; padding: 0; font-size: 14px; font-weight: 500; }
.kr-nav a { display: inline-block; padding: 12px 0; text-decoration: none; }
.kr-nav a:hover, .kr-nav a[aria-current] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.kr-nav-end { display: flex; justify-content: flex-end; align-items: center; gap: 16px; }
.kr-button--small { min-height: 44px; padding: 10px 24px; }
.kr-menu-toggle { display: none; }

/* Footer */
.kr-footer { max-width: none; padding: 0; display: block; border-top: 1px solid var(--kr-line); }
.kr-footer-grid { max-width: var(--kr-page); margin: 0 auto; padding: 56px var(--kr-gutter) 72px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px 64px; }
.kr-footer .wordmark { font-size: 26px; }
.kr-footer .footer-tagline { font-family: var(--font-display); font-weight: 400; font-size: 20px; margin: 14px 0 4px; }
.kr-footer .footer-nav { gap: 56px; }
.footer-nav h2 { font-weight: 500; letter-spacing: 1.8px; }

/* Inner pages: serif headings, softer cards, pill badges. */
.page-head h1, .prose h1 { letter-spacing: -1.5px; font-size: clamp(44px, 5vw, 72px); line-height: 1; }
.section h2 { letter-spacing: -1px; }
.prose h2 { font-size: 30px; letter-spacing: -.5px; }
h3 { letter-spacing: -.3px; font-size: 24px; }
.offer, .card, .file-card, .deliverables article { border-color: var(--kr-line); border-radius: 22px; box-shadow: var(--kr-shadow); }
.offer-main { border: 1px solid var(--ink); }
.offer h3 { font-size: 30px; }
.offer-badge { background: var(--kr-accent-soft); color: var(--kr-accent-deep); font-weight: 500; }
.price-now { font-weight: 400; letter-spacing: -2px; }
.checklist li::before { color: var(--kr-accent-deep); }
.package { border-radius: var(--kr-radius); }
.notice, .contact-aside { border-radius: 16px; }
.notice { border-left-color: var(--kr-accent); }
.consent-quote { border-left-color: var(--kr-accent); }
.faq-list summary { font-weight: 500; }
.final-cta h2 { font-weight: 400; }
.final-cta .button { background: var(--inverse-accent); color: var(--inverse-accent-ink); }

/* ============================================================ 2. home page */
.page-home .kr-header { position: absolute; inset: 0 0 auto; }
.kr-top { position: relative; isolation: isolate; }
.kr-label { font: 500 12px/1.5 var(--font-body); letter-spacing: 1.8px; text-transform: uppercase; color: var(--muted); margin: 0; }
.kr-note { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 20px 0 0; }
.kr-note a, .kr-step a, .kr-faq a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.kr-center { text-align: center; }

/* Hero: the Serene video behind centred copy, under a light veil. */
.kr-hero { position: relative; isolation: isolate; min-height: 100svh; display: flex; flex-direction: column; overflow: hidden; background: var(--paper); }
.kr-scenery { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.kr-scenery img, .kr-scenery video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.kr-veil { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(var(--kr-veil), .72) 0%, rgba(var(--kr-veil), .65) 45%, rgba(var(--kr-veil), .4) 68%, rgba(var(--kr-veil), 0) 88%); }
.kr-hero[data-video="failed"] video { display: none; }
.kr-hero-content { position: relative; z-index: 1; width: 100%; max-width: var(--kr-page); margin: 0 auto; padding: calc(96px + 9svh) var(--kr-gutter) 160px; text-align: center; }
.kr-hero-content::before { content: ""; position: absolute; z-index: -1; inset: 4% -6% 0; background: radial-gradient(ellipse 50% 52% at 50% 56%, rgba(var(--kr-veil), .78), rgba(var(--kr-veil), .45) 60%, rgba(var(--kr-veil), 0) 100%); pointer-events: none; }
.kr-hero h1 { font-size: 80px; line-height: .95; letter-spacing: -2.46px; margin: 20px 0 0; }
.kr-hero-text { font-size: 18px; line-height: 1.625; color: var(--muted); max-width: 670px; margin: 24px auto 0; text-wrap: pretty; }
.kr-hero-actions { margin-top: 40px; display: flex; flex-direction: column; align-items: center; }
.kr-hero-offer { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin: 0 0 24px; }
.kr-hero-offer strong { font: 400 40px/1 var(--font-display); letter-spacing: -1px; }
.kr-button--hero { padding: 20px 56px; font-size: 16px; }
.kr-reassurance { font-size: 14px; font-weight: 500; line-height: 1.6; color: var(--muted); margin: 20px 0 4px; }
.kr-badge { display: inline-block; width: fit-content; padding: 6px 12px; border-radius: 999px; background: var(--kr-accent-soft); color: var(--kr-accent-deep); font-size: 13px; font-weight: 500; line-height: 1.3; }
.kr-future { font-size: 14px; color: var(--muted); }
.kr-video-toggle { position: absolute; z-index: 2; right: var(--kr-gutter); bottom: 24px; min-height: 44px; padding: 10px 20px; border: 0; border-radius: 999px; background: rgba(15, 23, 42, .78); color: #fff; font-size: 14px; font-weight: 500; cursor: pointer; }
.kr-video-toggle:focus-visible { outline-color: #fff; }

@keyframes kr-rise { from { opacity: 0; transform: translateY(var(--kr-rise-distance)); } to { opacity: 1; transform: none; } }
.kr-rise { animation: kr-rise var(--kr-rise) ease-out both; }
.kr-rise--1 { animation-delay: .2s; }
.kr-rise--2 { animation-delay: .4s; }
.kr-has-reveal .kr-reveal { opacity: 0; transform: translateY(var(--kr-rise-distance)); transition: opacity var(--kr-rise) ease-out var(--reveal-delay, 0s), transform var(--kr-rise) ease-out var(--reveal-delay, 0s); }
.kr-has-reveal .kr-reveal.is-visible { opacity: 1; transform: none; }

/* Sections */
.kr-section { border-top: 1px solid var(--kr-line); }
.kr-inner { max-width: var(--kr-page); margin: 0 auto; padding: 128px var(--kr-gutter); }
.kr-head { max-width: 860px; }
.kr-head h2 { font-size: clamp(42px, 5.5vw, 72px); line-height: 1; letter-spacing: -1.5px; margin: 18px 0 24px; }
.kr-intro { font-size: 18px; line-height: 1.625; color: var(--muted); max-width: 670px; margin: 0; }
.kr-action { margin-top: 56px; }
.kr-section h3 { font-size: 30px; line-height: 1.15; letter-spacing: -.5px; margin: 0; }
.kr-section h4, .kr-section h5 { font: 500 14px/1.4 var(--font-body); margin: 0; }

.kr-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 72px; }
.kr-step { border-top: 1px solid var(--ink); padding-top: 24px; }
.kr-step h3 { margin: 16px 0 12px; }
.kr-step p:last-child, .kr-bento-card p:last-child, .kr-device-step p:last-child { font-size: 16px; line-height: 1.7; color: var(--muted); margin: 0; }

.kr-film { max-width: 980px; margin: 72px auto 0; }
.kr-film video { width: 100%; border-radius: var(--kr-radius); box-shadow: 0 30px 60px -24px rgba(15, 23, 42, .28), 0 0 0 1px var(--kr-line); background: var(--surface); }
.kr-film figcaption { font-size: 14px; color: var(--muted); margin-top: 14px; text-align: center; }

/* Product: benefits beside a framed screenshot. */
.kr-product { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; align-items: center; margin-top: 72px; }
.kr-product-list { display: grid; gap: 8px; }
.kr-product-item { display: grid; gap: 6px; text-align: left; padding: 22px 24px; border: 0; border-left: 2px solid var(--kr-line); background: transparent; cursor: pointer; transition: background 200ms ease-in-out; }
.kr-product-item:hover { background: rgba(255, 255, 255, .6); }
.kr-product-item[aria-pressed="true"] { border-left-color: var(--kr-accent); background: var(--surface); border-radius: 0 16px 16px 0; box-shadow: var(--kr-shadow); }
.kr-product-title { font: 400 28px/1.15 var(--font-display); letter-spacing: -.5px; }
.kr-product-text { font-size: 15px; line-height: 1.65; color: var(--muted); }
.kr-product.is-interactive .kr-product-item[aria-pressed="false"] .kr-product-text { display: none; }
.kr-product:not(.is-interactive) .kr-product-item { cursor: default; }
.kr-frame { border-radius: 20px; overflow: hidden; background: var(--surface); box-shadow: 0 30px 60px -24px rgba(15, 23, 42, .28), 0 0 0 1px var(--kr-line); }
.kr-frame img { width: 100%; height: auto; }
.kr-product:not(.is-interactive) .kr-frame img + img { border-top: 1px solid var(--kr-line); }
.kr-frame-bar { display: flex; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--kr-line); }
.kr-frame-bar span { width: 10px; height: 10px; border-radius: 50%; background: rgba(15, 23, 42, .14); }

/* Devices: two phones beside the pairing steps. */
.kr-devices { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 64px; align-items: center; margin-top: 72px; }
.kr-phones { position: relative; display: flex; justify-content: center; align-items: flex-start; padding: 24px 0 56px; border-radius: var(--kr-radius); background: radial-gradient(circle at 50% 45%, var(--kr-accent-soft), transparent 68%); }
.kr-phone { position: relative; margin: 0; width: 250px; padding: 9px; border-radius: 42px; background: var(--ink); box-shadow: 0 40px 70px -30px rgba(15, 23, 42, .45); }
.kr-phone img { width: 100%; height: auto; aspect-ratio: 9 / 19.5; object-fit: cover; object-position: top; border-radius: 33px; background: #fff; }
.kr-phone figcaption { position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%); font-size: 12px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
.kr-phone--front { z-index: 2; transform: rotate(-4deg); }
.kr-phone--back { z-index: 1; margin-left: -36px; margin-top: 56px; transform: rotate(5deg); }
.kr-sync-badge { position: absolute; z-index: 3; left: 50%; top: 18%; transform: translate(-50%, -50%); padding: 8px 16px; border-radius: 999px; background: #000; color: #fff; font-size: 13px; font-weight: 500; box-shadow: 0 10px 24px rgba(0, 0, 0, .25); }
.kr-device-steps { display: grid; gap: 8px; }
.kr-device-step { padding: 24px 0; border-top: 1px solid var(--kr-line); }
.kr-device-step:first-child { border-top-color: var(--ink); }
.kr-device-step h3 { margin: 12px 0 10px; }

/* Pay once vs. subscription */
.kr-compare { margin-top: 64px; }
.kr-compare-scroll { overflow-x: auto; border-radius: var(--kr-radius); background: var(--surface); box-shadow: var(--kr-shadow); }
.kr-compare-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 16px; }
.kr-compare-table th, .kr-compare-table td { text-align: left; padding: 22px 28px; border-bottom: 1px solid var(--kr-line); vertical-align: top; }
.kr-compare-table tbody tr:last-child > * { border-bottom: 0; }
.kr-compare-table thead th { font: 400 24px/1.2 var(--font-display); letter-spacing: -.3px; }
.kr-compare-table tbody th { font-weight: 500; width: 28%; }
.kr-compare-table td { color: var(--muted); }
.kr-compare-table .is-us { background: #faf7f8; color: var(--ink); font-weight: 500; }
.kr-compare-table thead .is-us { font-weight: 400; }
.kr-compare .kr-note { max-width: 760px; font-size: 13px; }

/* Starter plans */
.kr-plans { margin-top: 56px; }
.kr-chip-row { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 16px; scrollbar-width: thin; }
.kr-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--kr-line); background: var(--surface); font-size: 14px; font-weight: 500; cursor: pointer; }
.kr-chip[aria-pressed="true"] { background: #000; color: #fff; border-color: #000; }
.kr-chip-count { font-size: 12px; opacity: .7; }
.kr-plan-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 16px 0 0; }
.kr-plan-card { background: var(--surface); border-radius: 22px; padding: 28px; box-shadow: var(--kr-shadow); display: flex; flex-direction: column; gap: 10px; }
.kr-section .kr-plan-card h3 { font-size: 26px; }
.kr-plan-description { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0; flex: 1; }
.kr-plan-meta { font-size: 13px; font-weight: 500; margin: 6px 0 0; padding-top: 14px; border-top: 1px solid var(--kr-line); }
.kr-plan-download { align-self: flex-start; font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; padding: 6px 0; }
.kr-plan-more { display: flex; justify-content: center; margin-top: 28px; }
.kr-button--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--kr-line); }
.kr-plans-note { font-size: 14px; color: var(--muted); margin: 24px auto 0; max-width: 720px; text-align: center; }

.kr-preview { margin-top: 96px; background: var(--surface); border-radius: var(--kr-radius); padding: 40px; box-shadow: var(--kr-shadow); }
.kr-section .kr-preview-title { font-size: 36px; letter-spacing: -.8px; }
.kr-preview-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 32px; }
.kr-preview-tab { min-height: 44px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--kr-line); background: transparent; font-size: 14px; font-weight: 500; cursor: pointer; }
.kr-preview-tab[aria-selected="true"] { background: #000; color: #fff; border-color: #000; }
.kr-preview-panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; }
.kr-preview-head { display: grid; gap: 8px; margin-bottom: 28px; }
.kr-section .kr-preview-plan { font: 400 30px/1.15 var(--font-display); letter-spacing: -.5px; }
.kr-preview-col h5 { color: var(--muted); margin-bottom: 14px; }
.kr-preview-habits, .kr-preview-tasks { list-style: none; margin: 0; padding: 0; }
.kr-preview-habits li { display: grid; gap: 2px; padding: 14px 0; border-top: 1px solid var(--kr-line); }
.kr-habit-name { font-size: 16px; font-weight: 500; }
.kr-habit-schedule { font-size: 13px; color: var(--muted); }
.kr-preview-download { margin-top: 12px; }
.kr-preview-col--week { border-left: 1px solid var(--kr-line); padding-left: 48px; }
.kr-preview-week-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.kr-preview-week-head h5 { margin: 0; }
.kr-stepper { display: flex; align-items: center; gap: 8px; }
.kr-preview-week { font-size: 14px; font-weight: 500; min-width: 108px; text-align: center; margin: 0; }
.kr-step-button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--kr-line); background: transparent; cursor: pointer; font-size: 16px; }
.kr-step-button:disabled { opacity: .35; cursor: default; }
.kr-week-title { font-size: 14px; font-weight: 500; margin: 24px 0 0; }
.is-stepped .kr-week-title { display: none; }
.kr-preview-bar { height: 4px; border-radius: 4px; background: var(--kr-line); margin: 18px 0 8px; overflow: hidden; }
.kr-preview-bar span { display: block; height: 100%; background: var(--kr-accent); }
.kr-preview-tasks li { display: flex; align-items: flex-start; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--kr-line); font-size: 16px; line-height: 1.5; }
.kr-task-box { flex: 0 0 18px; height: 18px; margin-top: 3px; border: 1.5px solid var(--ink); border-radius: 5px; }
.kr-task-times { margin-left: auto; padding-left: 12px; font-size: 13px; color: var(--muted); white-space: nowrap; }

/* Package bento */
.kr-bento { display: grid; grid-template-columns: 1.15fr 1fr; grid-auto-rows: minmax(220px, auto); gap: 20px; margin-top: 72px; }
.kr-bento-card { overflow: hidden; background: var(--surface); border-radius: var(--kr-radius); padding: 36px; box-shadow: var(--kr-shadow); display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; }
.kr-bento-card--large { grid-row: span 3; justify-content: flex-start; }
.kr-section .kr-bento-card--large h3 { font-size: clamp(40px, 4vw, 56px); line-height: 1; letter-spacing: -1.2px; }
.kr-bento-image { width: calc(100% + 72px); max-width: none; margin: -36px -36px 24px; border-bottom: 1px solid var(--kr-line); flex: 1; min-height: 300px; object-fit: cover; object-position: top left; }

/* Pricing */
.kr-pricing-stack { display: grid; gap: 24px; margin-top: 64px; }
.kr-pricing-card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; padding: 44px; background: var(--surface); border-radius: var(--kr-radius); box-shadow: var(--kr-shadow); }
.kr-pricing-summary { display: flex; flex-direction: column; align-items: flex-start; }
.kr-pricing-summary h3 { margin: 18px 0 10px; }
.kr-pricing-summary > h3:first-child { margin-top: 0; }
.kr-pricing-description { font-size: 16px; line-height: 1.65; color: var(--muted); margin: 0 0 28px; }
.kr-pricing-purchase { margin-top: auto; width: 100%; }
.kr-pricing-price { margin: 0 0 6px; }
.kr-pricing-price strong { font: 400 64px/1 var(--font-display); letter-spacing: -2px; }
.kr-pricing-purchase .kr-future { margin: 0 0 10px; }
.kr-pricing-terms { font-size: 14px; color: var(--muted); margin: 0; }
.kr-pricing-note { font-size: 14px; font-weight: 500; margin: 14px 0 22px; }
.kr-pricing-button { width: 100%; padding: 17px 24px; font-size: 15px; }
.kr-pricing-purchase .kr-note { margin: 12px 0 0; }
.kr-pricing-features { border-left: 1px solid var(--kr-line); padding-left: 48px; }
.kr-pricing-features h4 { font-size: 16px; margin: 4px 0 24px; }
.kr-pricing-features ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.kr-pricing-features li { display: flex; gap: 12px; font-size: 16px; line-height: 1.5; }
.kr-check { flex: 0 0 22px; height: 22px; display: grid; place-items: center; margin-top: 1px; border-radius: 50%; background: var(--kr-accent-deep); color: #fff; font-size: 12px; font-weight: 600; }

/* FAQ */
.kr-faq { display: grid; gap: 12px; margin-top: 56px; max-width: 880px; }
.kr-faq details { background: var(--surface); border: 1px solid var(--kr-line); border-radius: 16px; }
.kr-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px; font-size: 18px; font-weight: 500; line-height: 1.4; cursor: pointer; list-style: none; }
.kr-faq summary::-webkit-details-marker { display: none; }
.kr-plus { position: relative; flex: 0 0 18px; height: 18px; transition: transform 200ms ease-in-out; }
.kr-plus::before, .kr-plus::after { content: ""; position: absolute; inset: 8px 0 auto; height: 1.5px; background: currentColor; }
.kr-plus::after { transform: rotate(90deg); }
.kr-faq details[open] .kr-plus { transform: rotate(45deg); }
.kr-faq details p { margin: 0; padding: 0 24px 24px; font-size: 16px; line-height: 1.7; color: var(--muted); max-width: 720px; }

/* Closing */
.kr-closing .kr-inner { text-align: center; padding-block: 160px; }
.kr-closing .kr-head { margin: 0 auto; }
.kr-closing .kr-intro { margin-inline: auto; }

/* ============================================================ responsive */
@media (max-width: 1100px) {
  .kr-js .kr-nav-grid { grid-template-columns: 1fr auto; }
  .kr-js .kr-menu-toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 0 10px 10px; border: 0; background: none; font-size: 14px; font-weight: 500; cursor: pointer; }
  .kr-menu-icon { width: 20px; height: 10px; border-block: 1.5px solid currentColor; transition: transform 200ms; }
  .kr-menu-toggle[aria-expanded="true"] .kr-menu-icon { transform: rotate(90deg); }
  .kr-js .kr-nav { display: none; position: absolute; top: 76px; inset-inline: var(--kr-gutter); padding: 12px 24px; background: var(--surface); border-radius: 20px; box-shadow: 0 20px 40px rgba(15, 23, 42, .12); }
  .kr-js .kr-nav[data-open="true"] { display: block; }
  .kr-js .kr-nav ul { flex-direction: column; gap: 0; }
  .kr-js .kr-nav a { display: block; padding: 14px 0; border-bottom: 1px solid var(--kr-line); }
  .kr-js .kr-nav li:last-child a { border-bottom: 0; }
  html:not(.kr-js) .kr-nav-grid { grid-template-columns: 1fr auto; }
  html:not(.kr-js) .kr-nav { grid-column: 1 / -1; grid-row: 2; }
  html:not(.kr-js) .kr-nav ul { flex-wrap: wrap; gap: 4px 24px; }
}
@media (max-width: 1080px) {
  .kr-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kr-product, .kr-devices { grid-template-columns: minmax(0, 1fr); }
  .kr-frame { order: -1; }
  .kr-preview-panel, .kr-pricing-card { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .kr-preview-col--week, .kr-pricing-features { border-left: 0; padding-left: 0; border-top: 1px solid var(--kr-line); padding-top: 28px; }
}
@media (max-width: 860px) {
  :root { --kr-gutter: 24px; }
  .kr-nav-grid { padding-block: 18px; }
  .kr-header-cta { display: none; }
  .kr-hero h1 { font-size: 48px; letter-spacing: -1.5px; }
  .kr-hero-content { padding-top: calc(88px + 6svh); padding-bottom: 140px; }
  .kr-hero-text { font-size: 17px; }
  .kr-inner { padding-block: 80px; }
  .kr-steps { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 48px; }
  .kr-bento { grid-template-columns: minmax(0, 1fr); margin-top: 48px; }
  .kr-bento-card--large { grid-row: auto; }
  .kr-plan-grid { grid-template-columns: minmax(0, 1fr); }
  .kr-preview { padding: 28px 22px; margin-top: 64px; }
  .kr-pricing-card { padding: 28px 22px; }
  .kr-pricing-price strong { font-size: 52px; }
  .kr-compare-table th, .kr-compare-table td { padding: 16px 18px; }
  .kr-closing .kr-inner { padding-block: 104px; }
  .kr-phone { width: min(158px, 42vw); padding: 6px; border-radius: 30px; }
  .kr-phone img { border-radius: 26px; }
  .kr-phone--back { margin-left: -20px; margin-top: 40px; }
  .kr-phones { overflow: hidden; padding-inline: 8px; }
  .kr-footer-grid { grid-template-columns: minmax(0, 1fr); }
  .kr-footer .footer-nav { flex-wrap: wrap; gap: 32px 48px; }
  .kr-section .button { width: auto; }
  .kr-pricing-button { width: 100%; }
}
@media (max-width: 420px) {
  .kr-button--hero { padding-inline: 36px; }
  .kr-hero-offer strong { font-size: 34px; }
  .kr-faq summary { font-size: 16px; padding: 20px; }
  .kr-faq details p { padding: 0 20px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .kr-rise { animation: none; }
}
@media (forced-colors: active) {
  .kr-chip[aria-pressed="true"], .kr-preview-tab[aria-selected="true"], .kr-product-item[aria-pressed="true"] { outline: 2px solid Highlight; }
}

/* Value strip under the hero (from the October review of the first shop design). */
.kr-value-strip { list-style: none; margin: 0 auto; padding: 22px var(--kr-gutter); max-width: var(--kr-page); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; border-bottom: 1px solid var(--kr-line); color: var(--muted, #5f6584); font-size: .95rem; }
.kr-value-strip li { flex: 1 1 180px; text-align: center; }
@media (max-width: 640px) { .kr-value-strip li { flex-basis: 45%; } }

/* Hero: the poster appears once the script has picked this visit's video (no flash of a different one).
   Without JavaScript the <noscript> rule in the template shows it at once. */
.kr-hero .kr-poster { opacity: 0; transition: opacity .35s ease; }
.kr-hero[data-hero-pick] .kr-poster { opacity: 1; }