@font-face { font-family: "Schibsted Grotesk"; src: url(/fonts/schibsted.woff2) format("woff2"); font-weight: 500 900; font-style: normal; font-display: swap; }
:root { --display: "Schibsted Grotesk", var(--sys); --field: #0065db; }
@media (prefers-color-scheme: dark) { :root { --field: #0b4aa3; } }
h1 { font-weight: 800; }
h2 { font-weight: 800; font-size: clamp(30px, 4.2vw, 48px); }
h3 { font-size: 20px; font-weight: 700; }

.hero { background: var(--field); color: #fff; padding: 72px 0 84px; }
.hero .wrap { display: grid; gap: 44px 64px; grid-template-columns: 1fr; align-items: center; }
.hero h1 { font-size: clamp(40px, 5.6vw, 76px); max-width: 13ch; letter-spacing: -.04em; }
.hero .lede { color: rgb(255 255 255 / 88%); margin-top: 24px; max-width: 34ch; }
.hero .cta-row { margin-top: 32px; }
.hero .link-arrow { color: #fff; }
.hero-note { margin-top: 18px; font-size: 14px; color: rgb(255 255 255 / 78%); }
.offer { background: var(--bg); color: var(--ink); border-radius: 28px; padding: 34px 32px 32px; box-shadow: 0 50px 90px -50px rgb(0 20 60 / 70%), 0 3px 8px rgb(0 20 60 / 18%); }
.offer h2 { font-size: 30px; margin-bottom: 20px; }
.offer .check { margin-bottom: 24px; }
.offer-price { color: var(--muted); margin-bottom: 22px; }
.offer-price b { color: var(--ink); }
.offer .btn { width: 100%; }
@media (min-width: 1000px) { .hero .wrap { grid-template-columns: 7fr 5fr; } }

.promises ul { display: grid; grid-template-columns: 1fr; }
.promises li { padding: 26px 0; border-bottom: 1px solid var(--line); font-family: var(--display); font-size: clamp(20px, 2.2vw, 26px); font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.promises li:last-child { border-bottom: 0; }
@media (min-width: 900px) {
  .promises ul { grid-template-columns: repeat(3, 1fr); }
  .promises li { padding: 40px 36px 40px 32px; border-bottom: 0; border-left: 1px solid var(--line); }
  .promises li:first-child { padding-left: 0; border-left: 0; }
}

.hire { padding: 40px 0 92px; }
.cols { display: grid; gap: 28px 44px; grid-template-columns: 1fr; margin-top: 44px; }
.cols > div { border-top: 2px solid var(--ink); padding-top: 20px; }
.cols p { color: var(--muted); margin-top: 8px; }
@media (min-width: 860px) { .cols { grid-template-columns: repeat(3, 1fr); } }

.shipped { background: var(--band); padding: 88px 0 80px; }
.work-list { margin-top: 36px; }
.work-list li { border-top: 1px solid var(--line); }
.work-list li:last-child { border-bottom: 1px solid var(--line); }
.work-list a { display: grid; gap: 6px 32px; grid-template-columns: 1fr auto; align-items: center; padding: 30px 0; }
.wl-name { font-family: var(--display); font-weight: 800; font-size: clamp(26px, 3.6vw, 42px); letter-spacing: -.035em; line-height: 1.1; transition: color 150ms ease-out; grid-column: 1; }
.wl-line { color: var(--muted); grid-column: 1; max-width: 52ch; }
.work-list .i { grid-column: 2; grid-row: 1 / span 2; width: 28px; height: 28px; color: var(--muted); transition: transform 220ms var(--ease), color 150ms ease-out; }
.work-list a:hover .wl-name { color: var(--accent); }
.work-list a:hover .i { transform: translateX(6px); color: var(--accent); }
@media (min-width: 900px) { .work-list a { grid-template-columns: 4fr 5fr auto; } .wl-line { grid-column: 2; } .work-list .i { grid-column: 3; grid-row: 1; } }

.how-short { padding: 84px 0 92px; }
.line { display: grid; gap: 0; grid-template-columns: 1fr; margin: 40px 0 36px; }
.line li { position: relative; padding: 32px 8px 22px 0; border-top: 2px solid var(--line); }
.line li::before { content: ""; position: absolute; left: 0; top: -8px; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px var(--bg); }
.line p { color: var(--muted); margin-top: 8px; max-width: 30ch; }
@media (max-width: 859px) { .line li::before { display: none; } .line li { padding-top: 22px; } }
@media (min-width: 860px) { .line { grid-template-columns: repeat(4, 1fr); gap: 28px; } .line li { padding-bottom: 0; } }
.page-head + .how-short { padding-top: 24px; }

.close { background: var(--night); color: var(--night-ink); padding: 100px 0; --bg: var(--night); --ink: var(--night-ink); --muted: var(--night-muted); --accent: #84b9ff; --accent-hover: #a9cfff; --accent-ink: #0b2342; }
.close h2 { max-width: 16ch; font-size: clamp(32px, 5vw, 60px); letter-spacing: -.04em; }
.close p { margin: 16px 0 30px; font-size: 19px; color: var(--muted); max-width: 40ch; }
.close .cta-row { margin-top: 30px; }
.close p + .cta-row { margin-top: 0; }

.page-head { padding: 84px 0 48px; }
.page-head h1 { font-size: clamp(40px, 6.4vw, 80px); max-width: 14ch; letter-spacing: -.04em; }
.page-head .lede { margin-top: 20px; }
.crumbs { margin-bottom: 18px; font-size: 15px; font-weight: 600; }
.crumbs a { color: var(--accent); }
.crumbs a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.crumbs .i { width: 16px; height: 16px; transform: rotate(180deg); }

.cases .case { display: grid; gap: 28px 64px; grid-template-columns: 1fr; align-items: center; padding: 60px 0; border-top: 1px solid var(--line); }
.cases .case h2 { margin-bottom: 14px; }
.case-text p { font-size: 18px; color: var(--muted); max-width: 40ch; margin-bottom: 8px; }
.spec { background: var(--band); border-radius: 28px; padding: 30px 32px; }
.spec h3 { margin: 22px 0 12px; }
.spec h3:first-child { margin-top: 0; }
.frame { border: 1px solid var(--line); border-radius: 20px; overflow: clip; background: #fafaf8; box-shadow: 0 40px 80px -48px rgb(24 32 44 / 45%), 0 2px 6px rgb(24 32 44 / 8%); }
.frame img { width: 100%; }
@media (min-width: 940px) { .cases .case { grid-template-columns: 5fr 6fr; } .case.flip .case-text { order: 2; } .case.flip { grid-template-columns: 6fr 5fr; } }
.cases + .close { margin-top: 0; }

.case-head { padding-bottom: 36px; }
.case-body { padding: 8px 0 100px; }
.two-col { display: grid; gap: 36px 64px; grid-template-columns: 1fr; margin-bottom: 40px; }
.two-col h2 { font-size: 28px; margin-bottom: 18px; }
@media (min-width: 860px) { .two-col { grid-template-columns: 1fr 1fr; } }
.facts > div, .story > div { display: grid; gap: 4px 40px; grid-template-columns: 1fr; padding: 20px 0; border-top: 1px solid var(--line); }
.facts, .story { margin: 8px 0 40px; }
.facts > div:last-child, .story > div:last-child { border-bottom: 1px solid var(--line); }
.facts dt, .story dt { font-weight: 700; }
.facts dd, .story dd { margin: 0; color: var(--muted); line-height: 1.6; max-width: 60ch; }
@media (min-width: 760px) { .facts > div, .story > div { grid-template-columns: 220px 1fr; } }
.case-body .frame { margin: 8px 0 16px; }
.fig-note { font-size: 13px; color: var(--muted); margin-bottom: 36px; }

.plans-sec { padding: 40px 0 88px; }
.plans { display: grid; gap: 16px; grid-template-columns: 1fr; margin: 40px 0 48px; }
.plan { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--line); border-radius: 24px; padding: 30px; }
.plan.hot { border: 2px solid var(--accent); }
.plan-name { font-family: var(--display); font-size: 28px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.plan-price { font-size: 20px; font-weight: 700; color: var(--accent); line-height: 1.2; margin: 4px 0 16px; }
.plan .check { margin-bottom: 18px; }
.plan .note { margin-top: auto; padding-top: 6px; }
.plan .btn { margin-top: 20px; }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(3, 1fr); } }
.guards { display: grid; gap: 24px 44px; grid-template-columns: 1fr; }
.guards > div { border-top: 2px solid var(--ink); padding-top: 18px; }
.guards dt { font-weight: 700; margin-bottom: 6px; }
.guards dd { margin: 0; color: var(--muted); line-height: 1.6; }
@media (min-width: 860px) { .guards { grid-template-columns: repeat(3, 1fr); } }

.faq { padding: 24px 0 100px; }
.faq .qa { max-width: 820px; margin-top: 28px; }

.contact .two { display: grid; gap: 48px 72px; grid-template-columns: 1fr; align-items: start; }
.contact h1 { max-width: 13ch; }
.bring { font-size: 20px; margin: 44px 0 14px; letter-spacing: -.01em; }
.person img { width: 100%; max-width: 380px; border-radius: 32px; }
.person figcaption { margin-top: 16px; display: grid; gap: 2px; }
.person figcaption span { color: var(--muted); font-size: 15px; max-width: 34ch; }
@media (min-width: 900px) { .contact .two { grid-template-columns: 7fr 5fr; } }

@media (max-width: 759px) {
  .frame { overflow-x: auto; }
  .frame img { width: 190%; max-width: none; }
  .hero { padding: 52px 0 60px; }
  .hero .cta-row .btn { width: 100%; }
  .offer { padding: 26px 22px; border-radius: 24px; }
  .hire { padding-bottom: 64px; }
  .shipped, .how-short { padding-block: 64px; }
  .close { padding: 68px 0; }
  .close .btn { width: 100%; }
  .page-head { padding: 52px 0 32px; }
  .cases .case { padding: 44px 0; }
  .spec { padding: 24px; }
  .plans-sec { padding-bottom: 64px; }
  .plan { padding: 24px; }
  .case-body { padding-bottom: 64px; }
  .faq { padding-bottom: 64px; }
}