/* PuppLit v2 for every page except the homepage. Loads after style.css, hero3d.css and v2-base.css and keeps their
   class names (product, industry and checkout pages are built by js/*-page.js from the same classes), so one file
   moves the whole site to the new look: flat violet, night ink, one warm yellow for the main action, Big Shoulders
   for big headings, Schibsted for reading; ruled columns instead of rounded cards; no gradients, glows, shadows,
   icon tiles, pill labels or fade-ins on every section. */

:root {
  --purple: #5b3df5;
  --purple-deep: #5b3df5;
  --blue: #3f22d6;
  --blue-deep: #3f22d6;
  --ink: #150c2e;
  --ink-soft: #4a4560;
  --ink-faint: #5f5a73;
  --bg: #f8f7fc;
  --bg-alt: #eceaf3;
  --card: #ffffff;
  --line: rgba(21, 12, 46, .14);
  --grad: linear-gradient(#5b3df5, #5b3df5);
  --grad-soft: #eceaf3;
  --radius: 6px;
  --radius-lg: 8px;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  /* the old "heading font" also dresses tabs, toggles, labels and prices: those take the reading face; the display
     face is set below only on real headlines and big numbers */
  --font-head: var(--text);
  --font-body: "Schibsted", "Segoe UI", system-ui, -apple-system, sans-serif;
  --max: 1280px;
}

body { font-size: 17px; line-height: 1.55; background: var(--paper); }
.container { padding: 0 var(--gutter); }
h1, h2 { font-family: var(--display); font-weight: 800; line-height: .92; letter-spacing: -.005em; }
h3, h4 { font-family: var(--text); font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.h-xl { font-size: clamp(3.2rem, 11vw, 7rem); }
.h-lg { font-size: clamp(2.7rem, 7.5vw, 5.2rem); }
.h-md { font-size: clamp(2rem, 4.6vw, 3rem); }
.h-sm { font-family: var(--text); font-size: 1.25rem; }
/* small headings that label a panel read better in the text face */
.checkout-form h2, .order-summary h2, .foot h2, .menu-cols h2, .form-card h2, .auth-card h2, .dash-main h2, .cookie-banner h4 {
  font-family: var(--text); font-weight: 700; letter-spacing: -.01em; line-height: 1.25;
}
.checkout-form h2, .order-summary h2 { font-size: 1.15rem; }
.sub { color: var(--ink-soft); font-size: clamp(1.05rem, 1.4vw, 1.2rem); max-width: 640px; }
.section { padding: clamp(80px, 12vh, 140px) 0; }
.section-tight { padding: clamp(56px, 8vh, 96px) 0; }

/* no coloured words, no gradient text, no pill labels over headings */
.grad-text, .accent, .stat-num, .metric .num {
  background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important;
  color: inherit !important; -webkit-text-fill-color: currentColor;
}
.stat-num, .metric .num { color: var(--violet) !important; font-family: var(--display); }
.eyebrow { display: none !important; }
.announce { display: none; }

/* one orchestrated moment per page is the stage; sections simply sit there */
.reveal { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ---------- buttons ---------- */
.btn { font-family: var(--text); font-weight: 700; border: 0; border-radius: 999px; min-height: 50px; padding: 0 24px; box-shadow: none; }
.btn:hover { transform: none; box-shadow: none; }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--bulb); color: var(--night); }
.btn-primary:hover { background: #ffe066; }
.btn-dark { background: var(--night); color: var(--paper); }
.btn-dark:hover { background: #24184a; }
.btn-ghost { background: transparent; color: var(--night); box-shadow: inset 0 0 0 1.5px var(--night); }
.btn-ghost:hover { background: rgba(21, 12, 46, .06); color: var(--night); box-shadow: inset 0 0 0 1.5px var(--night); }
.btn-light { background: var(--paper); color: var(--night); }
.btn-outline-light { color: var(--paper); box-shadow: inset 0 0 0 1.5px rgba(248, 247, 252, .7); }
.btn-outline-light:hover { background: rgba(248, 247, 252, .12); }
.btn-lg { min-height: 56px; padding: 0 30px; font-size: 1.05rem; }
.btn-sm { min-height: 42px; padding: 0 18px; font-size: .92rem; }
.stat-link, .related-card .rc-cat { color: var(--violet); }

/* ---------- heroes ---------- */
.hero::before, .page-hero::before { display: none; }
.hero, .page-hero { background: var(--chalk); }
.page-hero { padding: clamp(56px, 10vh, 110px) 0 clamp(48px, 8vh, 90px); }
.page-hero .h-xl, .page-hero h1 { max-width: 16ch; margin-left: auto; margin-right: auto; }
/* the pages without a 3D stage (checkout, sign in, legal): the same left-aligned big heading as everywhere else */
.page-hero:not(.hero-3d) { text-align: left; padding: clamp(48px, 9vh, 96px) 0 clamp(40px, 7vh, 80px); }
.page-hero:not(.hero-3d) h1, .page-hero:not(.hero-3d) .h-xl, .page-hero:not(.hero-3d) .h-lg { margin-left: 0; font-size: clamp(3rem, 12vw, 6rem); max-width: 14ch; }
.page-hero:not(.hero-3d) .sub { margin-left: 0; }
.page-hero:not(.hero-3d) .breadcrumb { justify-content: flex-start; }
.legal-body { margin: 0; }
.legal-body h2 { font-size: clamp(2rem, 6vw, 2.8rem); }
.breadcrumb { font-size: .9rem; }
.breadcrumb a:hover { color: var(--violet); }

/* the 3D heroes: chalk stage, two warm stage lights behind the scene, the words over a soft chalk wash */
.hero.hero-3d, .page-hero.hero-3d { background: var(--chalk); }
/* the lights sit behind the scene and the words: the hero is its own layer and both beams go to its back */
.hero-3d .hero-top { isolation: isolate; }
.hero-3d .hero-top::before, .hero-3d .hero-top::after { z-index: -1 !important; }
.hero-3d .hero-top::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); z-index: 0; pointer-events: none;
  background: var(--beam); clip-path: polygon(44% 0, 60% 0, 82% 100%, 40% 100%);
}
.hero-3d .hero-top::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); z-index: 0; pointer-events: none;
  background: #fff0b8; clip-path: polygon(78% 0, 88% 0, 100% 100%, 76% 100%);
}
.hero-stage picture::before { display: none; }
.hero-3d .hero-copy { text-align: left; }
.hero-3d .hero-ctas { justify-content: flex-start; }
.hero-3d .hero-copy .sub { margin-left: 0; margin-right: 0; }
.hero-3d .h-xl { font-size: clamp(3rem, 12.5vw, 5rem); line-height: .9; }
.hero-3d .hero-top { height: calc(100vh - var(--bar-h)); height: calc(100svh - var(--bar-h)); }
html:not(.no-3d) .hero-3d .hero-top { top: var(--bar-h); }
@media (max-width: 1023px) {
  .hero-stage::after { background: linear-gradient(180deg, rgba(236, 234, 243, .94) 0%, rgba(236, 234, 243, .6) 30%, rgba(236, 234, 243, 0) 46%); }
  .hero-3d .hero-top::before { clip-path: polygon(10% 0, 34% 0, 76% 100%, 30% 100%); }
  .hero-3d .hero-top::after { clip-path: polygon(70% 0, 86% 0, 98% 100%, 66% 100%); }
  .hero-3d .hero-ctas { justify-content: flex-start; }
}
@media (min-width: 1024px) {
  .hero-3d .hero-copy { max-width: 560px; }
  .hero.hero-3d .h-xl, .page-hero.hero-3d .h-xl { font-size: clamp(3.6rem, 5.6vw, 5.6rem); }
  .hero-stage::after { background: linear-gradient(90deg, rgba(236, 234, 243, .92) 0%, rgba(236, 234, 243, .66) 30%, rgba(236, 234, 243, 0) 50%); }
}

/* ---------- ruled columns instead of cards ---------- */
.feature-grid, .stat-cards, .steps, .testi-grid, .related-grid, .case-grid { gap: 0 clamp(24px, 3.4vw, 48px); }
.feature-card, .stat-card, .step, .testi, .related-card, .metric, .case-card {
  background: transparent; border: 0; border-top: 2px solid var(--night); border-radius: 0; box-shadow: none;
  padding: 22px 0 36px; transition: none;
}
.feature-card:hover, .stat-card:hover, .related-card:hover, .case-card:hover { transform: none; box-shadow: none; border-color: var(--night); }
.related-card:hover h4, .case-card:hover .case-name { color: var(--violet); }
.feature-icon { display: none; }
.feature-card h3, .step h3 { font-size: 1.25rem; }
.feature-card p, .step p, .stat-desc, .related-card p { color: var(--ink-soft); }
.center .feature-card, .center .step, .center .stat-card { text-align: left; }
.metric-strip { gap: 0 clamp(16px, 3vw, 40px); }
.metric { text-align: left; padding: 18px 0 8px; }
.metric .num { font-size: clamp(2.6rem, 5vw, 3.6rem); }
.step-num { background: none; color: var(--violet); width: auto; height: auto; display: block; border-radius: 0;
  font-family: var(--display); font-weight: 800; font-size: 3.2rem; line-height: .9; margin-bottom: 14px; }
.avatar { background: var(--violet); font-family: var(--text); }
.stars, .stars-svg [data-icon] { color: var(--bulb); }

/* the old purple band and the dark closing call */
.band { background: var(--night); }
.band::before { display: none; }
.band .sub { color: #c9c3e6; }
.band .step { background: transparent; border-color: rgba(248, 247, 252, .5); backdrop-filter: none; }
.band .step p { color: #c9c3e6; }
.band .step-num { background: none; color: var(--bulb); }
.band-pills a, .band .pill-tab { border-radius: 999px; }
.dark-cta { background: var(--violet); }
.dark-cta::before { display: none; }
.dark-cta .sub { color: #ece8ff; }
.dark-cta .btn-primary { background: var(--bulb); color: var(--night); }

/* ---------- pricing ---------- */
.price-toggle { background: var(--chalk); border: 0; }
.price-toggle button.active { background: var(--night); color: var(--paper); box-shadow: none; }
.save-badge { background: none; color: var(--violet); padding: 0; }
.pricing-grid { gap: 0 clamp(20px, 3vw, 40px); align-items: stretch; }
.price-card { background: transparent; border: 0; border-top: 2px solid var(--night); border-radius: 0; padding: 26px 0 34px; transform: none; }
.price-card:hover { transform: none; box-shadow: none; }
.price-card.featured { background: var(--night); color: var(--paper); border-top-color: var(--night); padding: 26px 24px 34px; transform: none; box-shadow: none; }
.price-card.featured:hover { transform: none; }
.price-card.featured .plan-for, .price-card.featured .plan-setup, .price-card.featured .per, .price-card.featured .plan-features li { color: #c9c3e6; }
.price-card.featured .btn-primary { background: var(--bulb); color: var(--night); }
.popular-tag { background: var(--bulb); color: var(--night); font-family: var(--text); text-transform: none; letter-spacing: 0; font-size: .82rem; border-radius: 4px; top: -13px; left: 24px; transform: none; }
.plan-name { font-family: var(--display); font-size: 2.4rem; line-height: 1; }
.plan-price .amount { font-family: var(--display); font-size: 3.6rem; letter-spacing: 0; }
.plan-features .ck, .buy-box .ck, .checkout-guarantees .ck { background: none; }
.plan-features .ck::before, .buy-box .ck::before, .checkout-guarantees .ck::before { border-color: var(--violet); }
.price-card.featured .plan-features .ck::before { border-color: var(--bulb); }
/* not in this plan: readable, struck through, instead of faded out */
.plan-features li.dim { opacity: 1; color: var(--slate); text-decoration: line-through; text-decoration-thickness: 1px; }
.price-card.featured .plan-features li.dim { color: #9d97bd; }
.plan-features li.dim .ck::before { border-color: #9d97bd; }
.plan-divider { text-transform: none; letter-spacing: 0; font-family: var(--text); font-size: .9rem; }
.compare-wrap { border: 0; border-radius: 0; background: transparent; border-top: 2px solid var(--night); }
.compare thead th { background: transparent; font-family: var(--text); }
.compare .yes, .compare [data-icon] { color: var(--violet); }

/* ---------- questions ---------- */
.faq-list { gap: 0; }
.faq-item { background: transparent; border: 0; border-top: 2px solid var(--night); border-radius: 0; }
.faq-item:last-child { border-bottom: 2px solid var(--night); }
.faq-q { font-family: var(--text); font-size: 1.1rem; padding: 22px 0; }
.faq-a-inner { padding: 0 0 24px; }
.faq-q .chev { color: var(--night); }

/* ---------- panels that hold a task keep a plain container ---------- */
.form-card, .checkout-form, .order-summary, .buy-box, .auth-card, .cookie-banner {
  background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: none;
}
.buy-box { background: #fff; border: 2px solid var(--night); }
.buy-price-panel { border-left-color: var(--line); }
.form-field label { font-family: var(--text); font-weight: 700; }
.form-field input, .form-field select, .form-field textarea { border-radius: 6px; border: 1.5px solid rgba(21, 12, 46, .22); background: var(--paper); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(91, 61, 245, .18); }
.billing-toggle button { border-radius: 6px; font-family: var(--text); }
.billing-toggle button.active { border-color: var(--night); color: var(--paper); background: var(--night); }
.billing-toggle button.active span { color: #c9c3e6 !important; }
.order-line.total, .order-product .op-name { font-family: var(--text); }
.cookie-banner { background: var(--night); color: var(--paper); border: 0; }
.cookie-banner h4 { font-family: var(--text); }
.cookie-banner p { color: #c9c3e6; }
.cookie-banner p a { color: var(--bulb); }
.cookie-banner .btn-ghost { color: var(--paper); box-shadow: inset 0 0 0 1.5px rgba(248, 247, 252, .6); }

/* ---------- small pieces ---------- */
.pill-tab { border-radius: 999px; box-shadow: none !important; }
.pill-tab.active { background: var(--night) !important; color: var(--paper) !important; border-color: var(--night) !important; }
.industry-card .tags, .case-card .tags { gap: 2px 14px; }
.industry-card .tags span, .case-card .tags span { background: none; border: 0; padding: 0; border-radius: 0; color: var(--slate); font-size: .86rem; font-weight: 700; }
.price-card, .price-card .plan-features li { text-align: left; }
.price-card .plan-features li { justify-content: flex-start; }
.packages-shot { border-radius: 8px; box-shadow: none; }
.packages-shot:hover { transform: none; box-shadow: none; }
.ico-inline { color: var(--violet); }
.mock, .mock-body, .flow-panel, .showcase, .dash-card { box-shadow: none !important; }
.cm-tile { box-shadow: none; border-color: transparent; border-radius: 6px; }
.client-filter button { border-radius: 999px; font-family: var(--text); }
.client-filter button.active, .client-filter button[aria-pressed="true"] { background: var(--night); color: var(--paper); border-color: var(--night); }
.case-name { font-family: var(--display); font-size: 2rem; line-height: 1; }
.legal-body h2 { font-size: 2rem; }
.split h2 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); }
.badge { border-radius: 4px; }

/* phones: the scene's frames are drawn over the poster, in the same box */
.hero-stage picture .hero-frames { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* the calendar on the contact page */
.book-now { background: var(--paper); }
.book-now .sub.left { margin-left: 0; }
.cal-embed { position: relative; margin-top: 32px; height: 760px; background: #fff; border: 2px solid var(--night); border-radius: 8px; overflow: hidden; }
.cal-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.cal-fallback { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.cal-embed.is-ready .cal-fallback { display: none; }
@media (max-width: 640px) { .cal-embed { height: 1000px; margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); border-radius: 0; border-left: 0; border-right: 0; } }

@media (max-width: 640px) {
  .feature-grid, .stat-cards, .steps, .testi-grid, .related-grid, .case-grid, .pricing-grid { gap: 0; }
  .price-card.featured { margin: 0 calc(var(--gutter) * -1); padding-left: var(--gutter); padding-right: var(--gutter); }
}