:root {
  --page: #15100c;
  --page-deep: #100c09;
  --panel: #211a14;
  --panel-raised: #2a211a;
  --panel-soft: #1b1510;
  --text: #f1e8dd;
  --muted: #bdb0a1;
  --faint: #817468;
  --line: rgba(241, 232, 221, .13);
  --line-strong: rgba(241, 232, 221, .24);
  --luce: #C8862B;
  --selra: #3A5F41;
  --incisa: #6B4E71;
  --serif: Georgia, "Times New Roman", serif;
  --sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html {
  overflow-x: hidden;
  overflow-x: clip;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--page);
  color: var(--text);
  font-family: var(--sans);
}

a { color: inherit; text-decoration: none; }
button { font: inherit; }

:focus-visible {
  outline: 2px solid var(--luce);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  top: -4rem;
  left: 1rem;
  z-index: 60;
  padding: .75rem 1rem;
  background: var(--text);
  color: var(--page-deep);
  font-size: .8rem;
  transition: top .2s ease;
}

.skip-link:focus { top: 1rem; }

.site-header {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 4.75rem;
  padding: 0 clamp(1.25rem, 4vw, 4.25rem);
  border-bottom: 1px solid var(--line);
  background: rgba(13, 14, 13, .86);
  backdrop-filter: blur(12px);
}

.wordmark {
  justify-self: start;
  font-family: var(--serif);
  font-size: 1.15rem;
  letter-spacing: -.04em;
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 2.5vw, 2.4rem);
  color: var(--muted);
  font-size: .72rem;
}

.desktop-nav a {
  position: relative;
  padding: 0;
  transition: color .2s ease;
}

.desktop-nav a:hover { color: var(--text); }

.desktop-nav a[aria-current="page"] { color: var(--text); }

.desktop-nav a.is-active { color: var(--text); }

.desktop-nav a.is-active::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--luce);
  content: "";
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: .95rem;
}

.quiet-action { color: var(--muted); font-size: .7rem; }
.quiet-action:hover { color: var(--text); }

.primary-action,
.button-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 2.35rem;
  padding: .58rem .86rem;
  border: 1px solid var(--luce);
  background: var(--luce);
  color: #1b1005;
  font-size: .68rem;
  font-weight: 750;
  letter-spacing: .02em;
  transition: transform .2s ease, background .2s ease;
}

.primary-action:hover,
.button-primary:hover {
  background: #d89537;
  transform: translateY(-1px);
}

.menu-toggle,
.mobile-nav { display: none; }

.pricing-hero {
  position: relative;
  display: grid;
  min-height: 37rem;
  padding: clamp(5rem, 10vw, 8rem) 1.25rem;
  overflow: hidden;
  isolation: isolate;
  place-items: center;
  text-align: center;
  background:
    radial-gradient(ellipse 44% 48% at 50% 42%, rgba(200, 134, 43, .15), transparent 72%),
    linear-gradient(145deg, #19130e 0%, #120e0b 52%, #0f0c09 100%);
}

.pricing-hero::before {
  position: absolute;
  z-index: -1;
  inset: -34% -16%;
  background:
    linear-gradient(112deg, transparent 0 28%, rgba(200, 134, 43, .025) 35%, rgba(222, 158, 62, .17) 44%, rgba(200, 134, 43, .035) 52%, transparent 61%),
    linear-gradient(69deg, transparent 0 42%, rgba(118, 79, 33, .08) 48%, rgba(210, 145, 50, .13) 53%, transparent 61%),
    linear-gradient(157deg, transparent 0 55%, rgba(241, 207, 149, .06) 60%, transparent 67%);
  content: "";
  filter: blur(2px);
  transform: rotate(-7deg) scale(1.08);
}

.pricing-hero::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .38) .45px, transparent .65px);
  background-size: 5px 5px;
  content: "";
  mix-blend-mode: soft-light;
  opacity: .1;
  pointer-events: none;
}

.hero-copy { max-width: 34rem; animation: settle-in .7s cubic-bezier(.2, .75, .3, 1) both; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .48rem;
  margin: 0 0 1rem;
  color: #e0ba7b;
  font-size: .61rem;
  font-weight: 750;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.eyebrow span {
  width: .35rem;
  height: .35rem;
  border-radius: 50%;
  background: var(--luce);
}

h1,
h2,
h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.065em; }

h1 {
  max-width: 9.8ch;
  margin: 0 auto;
  font-size: clamp(3.9rem, 6.65vw, 7.2rem);
  line-height: .89;
}

h1 em,
h2 em { color: #f3ca89; font-weight: inherit; }

.hero-lead {
  max-width: 27rem;
  margin: 1.6rem auto 0;
  color: var(--muted);
  font-size: .91rem;
  line-height: 1.58;
}

.hero-footnote { max-width: 27rem; margin: 1.3rem auto 0; color: var(--faint); font-size: .62rem; line-height: 1.45; }

.hero-actions,
.closing-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem 1.25rem;
  margin-top: 2rem;
}

.button {
  min-height: 2.75rem;
  padding: .65rem .9rem;
  font-size: .69rem;
}

.button-text {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 2.7rem;
  padding: 0;
  border-bottom: 1px solid transparent;
  color: var(--text);
  font-size: .71rem;
  transition: border-color .2s ease;
}

.button-text:hover { border-bottom-color: var(--text); }

.suite-section { padding: clamp(4.8rem, 10vw, 9rem) 1.25rem; background: var(--page-deep); }

.suite-card {
  display: grid;
  grid-template-columns: minmax(17rem, .95fr) minmax(17rem, .85fr);
  gap: clamp(3rem, 9vw, 8rem);
  width: min(100%, 75rem);
  min-height: 28.5rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 4.4vw, 3.7rem);
  border: 1px solid var(--line);
  border-top: 2px solid var(--luce);
  background: linear-gradient(135deg, #211912, #17110d 65%);
}

.suite-copy { max-width: 28rem; }

.suite-kicker {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: 0 0 1.25rem;
  padding: .35rem .6rem;
  border: 1px solid rgba(200, 134, 43, .42);
  color: #e5bc79;
  font-size: .57rem;
  font-weight: 750;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.suite-kicker span { color: var(--luce); font-size: .76rem; }

.suite-copy h2,
.section-intro h2,
.principles-intro h2,
.closing h2 {
  max-width: 10.5ch;
  margin: 0;
  font-size: clamp(3.3rem, 5.2vw, 5.8rem);
  line-height: .9;
}

.suite-copy > p:not(.suite-kicker) {
  max-width: 28rem;
  margin: 1.45rem 0 0;
  color: var(--muted);
  font-size: .85rem;
  line-height: 1.58;
}

.price-line { display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; gap: .48rem; margin: 2rem 0 1.45rem; }
.price-line > span { color: #dec091; font-size: .68rem; font-weight: 750; letter-spacing: .06em; }
.price-line strong { font-family: var(--serif); font-size: clamp(2.6rem, 4.2vw, 4.1rem); font-weight: 400; letter-spacing: -.065em; line-height: .82; }
.price-line small { max-width: 7.5rem; color: #a99b8a; font-size: .61rem; line-height: 1.35; }

.suite-details { display: flex; flex-direction: column; justify-content: center; }
.details-label { margin: 0 0 .7rem; color: #ab9d8d; font-size: .59rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

.suite-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.suite-list li { display: grid; grid-template-columns: 1.7rem 1fr; gap: .7rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.product-mark { display: grid; width: 1.45rem; height: 1.45rem; place-items: center; border: 1px solid currentColor; font-size: .72rem; }
.suite-list strong { display: block; font-family: var(--serif); font-size: 1.5rem; font-weight: 400; letter-spacing: -.05em; line-height: .9; }
.suite-list small { display: block; margin-top: .27rem; color: var(--muted); font-size: .66rem; }
.suite-selra { color: #82a88a; }
.suite-luce { color: #e5ae58; }
.suite-incisa { color: #b294b8; }

.suite-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; margin: 1.35rem 0 0; }
.suite-facts div { padding: .75rem .55rem; border: 1px solid rgba(241, 232, 221, .1); background: rgba(0, 0, 0, .09); }
.suite-facts dt { color: #edc67f; font-family: var(--serif); font-size: 1.25rem; letter-spacing: -.04em; }
.suite-facts dd { margin: .25rem 0 0; color: #a99c8d; font-size: .58rem; line-height: 1.28; }

.single-section { width: min(100% - 2.5rem, 75rem); margin: 0 auto; padding: clamp(6rem, 13vw, 12rem) 0; }

.section-intro { max-width: 42rem; margin: 0 auto clamp(3rem, 7vw, 6rem); text-align: center; }
.section-intro .eyebrow,
.principles-intro .eyebrow,
.closing .eyebrow { justify-content: center; }
.section-intro h2 { max-width: 12ch; margin-inline: auto; }
.section-intro > p:last-child { max-width: 32rem; margin: 1.4rem auto 0; color: var(--muted); font-size: .84rem; line-height: 1.58; }

.license-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }

.license-card {
  display: flex;
  min-height: 28rem;
  flex-direction: column;
  padding: clamp(1.35rem, 2.5vw, 2rem);
  border: 1px solid var(--line);
  background: var(--panel-soft);
}

.card-selra { --card-accent: var(--selra); --card-accent-text: #a8cfaf; }
.card-luce { --card-accent: var(--luce); --card-accent-text: #f1c67f; }
.card-incisa { --card-accent: var(--incisa); --card-accent-text: #c8acd0; }

.license-card:hover { border-color: color-mix(in srgb, var(--card-accent) 72%, transparent); }

.card-heading { display: flex; align-items: center; justify-content: flex-end; color: var(--card-accent-text); }
.card-symbol { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; border: 1px solid var(--card-accent); font-size: .9rem; }

.license-card h3 { margin: 1.5rem 0 0; font-size: clamp(2.35rem, 3.2vw, 3.25rem); line-height: .9; }
.card-subtitle { min-height: 2.5rem; margin: .65rem 0 0; color: var(--muted); font-size: .75rem; line-height: 1.46; }

.card-price { display: grid; gap: .2rem; margin: 2rem 0 1.2rem; }
.card-price strong { font-family: var(--serif); font-size: 1.95rem; font-weight: 400; letter-spacing: -.045em; }
.card-price span { color: #a89b8b; font-size: .58rem; font-weight: 700; letter-spacing: .04em; }

.license-card ul { display: grid; gap: .7rem; margin: 0; padding: 1.1rem 0; border-top: 1px solid var(--line); list-style: none; }
.license-card li { position: relative; padding-left: 1.1rem; color: #d1c6b8; font-size: .69rem; line-height: 1.35; }
.license-card li::before { position: absolute; left: 0; color: var(--card-accent-text); content: "✓"; }

.card-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 2.55rem;
  margin-top: auto;
  border: 1px solid var(--card-accent);
  color: var(--card-accent-text);
  font-size: .65rem;
  font-weight: 750;
  letter-spacing: .035em;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}

.card-link:hover { background: var(--card-accent); color: #150f0b; transform: translateY(-1px); }
.card-actions { display: grid; gap: .8rem; margin-top: auto; padding-top: .45rem; }
.card-actions .card-link { margin-top: 0; }
.card-detail { justify-self: center; padding-bottom: .18rem; border-bottom: 1px solid rgba(241,232,221,.25); color: var(--muted); font-size: .62rem; }
.card-detail:hover { color: var(--text); border-color: currentColor; }

.principles { padding: clamp(5rem, 10vw, 9rem) 1.25rem; background: var(--page-deep); }
.principles-intro { max-width: 39rem; margin: 0 auto clamp(3rem, 7vw, 5.5rem); text-align: center; }
.principles-intro h2 { margin-inline: auto; }
.principles-intro > p:last-child { max-width: 31rem; margin: 1.4rem auto 0; color: var(--muted); font-size: .81rem; line-height: 1.55; }

.trust-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; width: min(100%, 75rem); margin: 0 auto; border: 1px solid var(--line); background: var(--line); }

.trust-card {
  display: grid;
  align-content: start;
  justify-items: center;
  min-height: 24.9rem;
  padding: clamp(2.6rem, 4vw, 3.35rem) clamp(1.4rem, 2.4vw, 2rem);
  background: #1a140f;
  text-align: center;
}
.trust-icon { display: block; width: 2.72rem; height: 2.72rem; margin-bottom: 2.65rem; color: #f3ad55; }
.trust-icon svg { display: block; width: 100%; height: 100%; }
.trust-card h3 {
  margin: 0;
  color: var(--text);
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 650;
  letter-spacing: .25em;
  line-height: 1.58;
  text-transform: uppercase;
}
.trust-card p {
  margin: 1.12rem 0 0;
  color: #d8c6b5;
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  font-weight: 450;
  letter-spacing: -.025em;
  line-height: 1.52;
}

.closing {
  display: grid;
  justify-items: center;
  padding: clamp(7rem, 14vw, 13rem) 1.25rem;
  text-align: center;
}

.closing h2 { max-width: 13ch; }
.closing > p:not(.eyebrow) { max-width: 34rem; margin: 1.5rem auto 0; color: var(--muted); font-size: .86rem; line-height: 1.58; }
.closing-actions { justify-content: center; }

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 5rem;
  padding: 0 clamp(1.25rem, 4vw, 4.25rem);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .67rem;
}

.site-footer p { margin: 0; }
.site-footer > a:last-child { display: inline-flex; align-items: center; gap: .45rem; color: #ebc27f; font-size: .7rem; }

@keyframes settle-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
  .pricing-hero { min-height: 32rem; }
  .suite-card { gap: 3rem; }
  .license-grid { gap: .7rem; }
  .trust-card { padding: 1.1rem; }
}

@media (max-width: 760px) {
  .site-header { grid-template-columns: 1fr auto; min-height: 4.25rem; }
  .desktop-nav,
  .quiet-action,
  .header-actions > .primary-action { display: none; }
  .menu-toggle {
    display: grid;
    width: 2.35rem;
    height: 2.2rem;
    padding: .65rem;
    gap: .34rem;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--text);
    cursor: pointer;
  }
  .menu-toggle span { display: block; width: 100%; height: 1px; background: currentColor; transition: transform .2s ease; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }
  .mobile-nav {
    position: absolute;
    top: calc(100% + 1px);
    right: 0;
    left: 0;
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    border-bottom: 0 solid var(--line);
    background: var(--panel);
    transition: grid-template-rows .28s ease, border-color .28s ease;
  }
  .mobile-nav a { min-height: 0; overflow: hidden; padding: 0 1.25rem; color: var(--muted); font-size: .94rem; line-height: 0; }
  .mobile-nav.is-open { grid-template-rows: repeat(5, 1fr); padding: .65rem 0; border-bottom-width: 1px; }
  .mobile-nav.is-open a { min-height: 2.55rem; line-height: 2.55rem; }
  .mobile-nav a[aria-current="page"],
  .mobile-nav a:last-child { color: #efc77f; }
  .pricing-hero { min-height: 0; padding: 5rem 1rem 5.2rem; }
  .hero-copy { max-width: 34rem; }
  .suite-card { grid-template-columns: 1fr; gap: 2.7rem; }
  .suite-details { max-width: 34rem; }
  .license-grid { grid-template-columns: 1fr; gap: .9rem; }
  .license-card { min-height: 0; }
  .card-subtitle { min-height: 0; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-card { min-height: 22rem; padding: 2.4rem 1.25rem; }
  .trust-icon { margin-bottom: 2.15rem; }
}

@media (max-width: 480px) {
  .single-section { width: min(100% - 2rem, 75rem); }
  h1 { font-size: clamp(3.55rem, 16vw, 5.4rem); }
  .suite-copy h2,
  .section-intro h2,
  .principles-intro h2,
  .closing h2 { font-size: clamp(3rem, 14vw, 4.45rem); }
  .suite-section,
  .principles { padding-inline: 1rem; }
  .suite-card { padding: 1.25rem; }
  .price-line { grid-template-columns: auto 1fr; }
  .price-line small { grid-column: 1 / -1; margin-left: .1rem; }
  .suite-facts { grid-template-columns: 1fr; }
  .suite-facts div { display: grid; grid-template-columns: 2.2rem 1fr; align-items: baseline; gap: .5rem; }
  .suite-facts dd { margin: 0; }
  .trust-grid { grid-template-columns: 1fr; }
  .site-footer { align-items: flex-start; flex-direction: column; justify-content: center; padding-block: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

.motion-ready [data-motion-reveal] {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition: opacity .56s cubic-bezier(.2, .75, .3, 1), transform .56s cubic-bezier(.2, .75, .3, 1);
  transition-delay: var(--motion-delay, 0ms);
}
.motion-ready [data-motion-reveal].is-revealed { opacity: 1; transform: none; }
html[data-motion="off"] [data-motion-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }

@media (max-width: 760px) {
  .mobile-nav {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: grid-template-rows .28s ease, border-color .28s ease, opacity .2s ease, visibility 0s linear .28s;
  }
  .mobile-nav.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0s;
  }
}

@media (hover: hover) and (pointer: fine) {
  html[data-motion="on"] .motion-ready [data-motion-reveal].is-revealed:is(.license-card, .trust-card):hover {
    transform: translate3d(0, -3px, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-ready [data-motion-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Header and link type scale: readable at a glance without losing the quiet layout. */
.desktop-nav,
.quiet-action { font-size: .88rem; }
.primary-action,
.button-primary,
.button,
.card-detail,
.site-footer > a:last-child { font-size: .8rem; }

@media (max-width: 760px) {
  .mobile-nav a { font-size: 1.06rem; }
}
