/* Zen layer: fewer boxes, more air, one grid. Colour comes from line icons drawn in the app's tones
   (flat strokes, no tiles), from the label colours, and from the app itself in the screenshots. */

@font-face { font-family: 'Sora'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/sora-latin-600-normal.woff2) format('woff2'); }

/* ---------- The orbit logo ---------- */
.brand { gap: 9px; }
.logo-mark { display: block; flex: none; overflow: visible; }
.wordmark { font-family: 'Sora', 'Inter', system-ui, sans-serif; font-weight: 600; font-size: 23px; line-height: 1; letter-spacing: -0.03em; color: #111111; position: relative; top: -1px; }
.foot .wordmark { font-size: 20px; }
.cmp-brand .logo-mark { width: 20px; height: 20px; }
.logo-orbit { margin: 0 auto 30px; }
.page-head .logo-orbit { margin: 0 0 28px; }

/* ---------- Drawn icons ---------- */
.fi { display: inline-flex; flex: none; width: 34px; height: 34px; }
.fi .i { width: 100%; height: 100%; stroke-width: 1.5; }
.fi-violet { color: #7A63F0; }
.fi-blue { color: #3D7FE0; }
.fi-teal { color: #1F9D87; }
.fi-pink { color: #D9467A; }
.fi-amber { color: #E8892B; }
.fi-green { color: #3E9A3A; }

/* ---------- Rhythm: more air between sections ---------- */
.section { padding-top: 144px; }
.section-head { margin-bottom: 56px; }
.section-head .lead { margin-top: 18px; }
.show + .show { margin-top: 144px; }
.show { gap: 72px; }
.show-media .window, .show.flip .show-media .window { margin: 0; }
.window video { display: block; width: 100%; height: auto; }
.window.crop video { height: 100%; object-fit: cover; object-position: right top; }

/* ---------- Hero ---------- */
.hero { padding-top: 104px; }
.eyebrow-text { margin: 0 0 26px; font-size: 14px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.hero .h-display { max-width: 980px; font-size: clamp(44px, 7vw, 84px); line-height: 1; letter-spacing: -0.045em; }
.hero .lead { max-width: 600px; margin-top: 28px; }
.hero-cta { margin-top: 40px; }
.hero-note { margin-top: 22px; font-size: 14px; color: var(--ink-4); }
.hero-shot { margin-top: 88px; }

/* ---------- Eyebrows with a drawn icon ---------- */
.eyebrow-icon { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 14.5px; font-weight: 600; color: var(--ink-2); }
.eyebrow-icon .fi { width: 24px; height: 24px; }
.eyebrow-icon .fi .i { stroke-width: 1.75; }

/* ---------- Feature lists: icon, title, line. No cards. ---------- */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px 48px; }
.feature { min-width: 0; }
.feature h3 { margin-top: 20px; font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }
.feature p { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--ink-3); max-width: 340px; }

/* ---------- «Replaces»: five quiet columns ---------- */
.reps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 40px 32px; }
.rep { padding: 0; }
.rep .fi { width: 30px; height: 30px; }
.rep h3 { margin-top: 18px; font-size: 17px; font-weight: 600; }
.rep p { margin-top: 6px; font-size: 14.5px; color: var(--ink-3); }
.rep a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; }
.rep a:hover { color: var(--ink); text-decoration-color: var(--ink); }
.more-links { margin-top: 48px; display: flex; flex-wrap: wrap; gap: 14px 32px; }

/* ---------- Steps: numerals in the tones, no circles ---------- */
.steps { gap: 48px; }
.step { padding: 0; }
.step-n { display: block; width: auto; height: auto; border-radius: 0; background: none; color: #6A4DF4; font-size: 40px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.steps > li:nth-child(2) .step-n { color: #1F9D87; }
.steps > li:nth-child(3) .step-n { color: #E8892B; }
.step h3 { margin-top: 18px; }

/* ---------- Feature groups (Funksjoner): plain grids under a drawn icon ---------- */
.fgroup { padding-top: 112px; }
.fgroup-head, .group-head { display: flex; align-items: center; gap: 14px; margin-bottom: 36px; }
.fgroup-head .fi, .group-head .fi { width: 30px; height: 30px; }
.group-head h2 { font-size: 26px; letter-spacing: -0.028em; }
.flist { padding: 0; gap: 40px 48px; }
.fitem { padding: 0; gap: 14px; border-radius: 0; }
.fitem > .i { width: 22px; height: 22px; stroke-width: 1.6; margin-top: 0; }
.flist .fitem:nth-child(6n+1) > .i { color: #7A63F0; }
.flist .fitem:nth-child(6n+2) > .i { color: #3D7FE0; }
.flist .fitem:nth-child(6n+3) > .i { color: #1F9D87; }
.flist .fitem:nth-child(6n+4) > .i { color: #D9467A; }
.flist .fitem:nth-child(6n+5) > .i { color: #E8892B; }
.flist .fitem:nth-child(6n+6) > .i { color: #3E9A3A; }
.fshot { margin-top: 56px; }

/* ---------- Security and similar bands: no box, same grid as the features ---------- */
.band { padding: 0; }
.wrap.band { padding: 0 var(--gutter); }
.band-grid { margin-top: 0; gap: 56px 48px; }
.band-grid h3 { margin: 20px 0 8px; font-size: 17px; }
.band-grid p { max-width: 340px; }
.band .section-head { margin-bottom: 56px; }
.ticks-2 { margin-top: 0; }

/* ---------- Closing call to action: centred, no card ---------- */
.cta { margin-top: 160px; padding: 0; text-align: center; background: none; box-shadow: none; }
.cta .lead { margin: 18px auto 0; }
.cta .hero-cta { margin-top: 36px; }

/* ---------- One edge for everything: sub-page heads and lists start at the container's left ---------- */
.page-head { padding-top: 96px; }
.page-head .h-display, .page-head .h-page { max-width: 900px; }
.plans.two { max-width: none; margin: 0; }
.plans-note, .access { text-align: left; }
.faq { margin: 0; }

/* ---------- Alternatives hub ---------- */
.alt-group + .alt-group { margin-top: 72px; }

/* The hero shows the desktop app on wide screens and the phone app on phones. */
@media (min-width: 641px) { .hero-shot .phone { display: none; } }

/* ---------- Small screens ---------- */
@media (max-width: 1080px) {
  .features, .band-grid, .steps { grid-template-columns: repeat(2, 1fr); }
  .reps { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .show, .show.flip { gap: 40px; }
}
@media (max-width: 640px) {
  .section { padding-top: 96px; }
  .show + .show { margin-top: 96px; }
  .hero { padding-top: 56px; }
  .hero-shot { margin-top: 56px; }
  .features, .band-grid { grid-template-columns: 1fr; gap: 40px; }
  .reps { grid-template-columns: 1fr 1fr; }
  .fgroup { padding-top: 80px; }
  .cta { margin-top: 112px; }
  .page-head { padding-top: 56px; }
}

/* Guides: the reading column starts on the same left edge as everything else. */
.wrap-prose { max-width: var(--max); }
.wrap-prose > *, .page-head .wrap-prose > * { max-width: 820px; }
.guide-cta { max-width: 820px; }

/* Card grids use the same column lines as the plain grids. */
.alt-cards, .guide-cards { gap: 24px 48px; }