/* Light homepage hero with dashboard mock + content calendar (EN + DE). Data and animation: content-calendar.js */

/* ---- Light nav on the homepage ---- */
nav { background: rgba(255,255,255,.92); border-bottom: 1px solid #EFEFEC; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
nav .nav-logo-text { color: var(--black); }
nav .nav-links a { color: #3A3A3A; }
nav .nav-links a:hover { color: var(--black); }
nav .nav-lang { color: var(--gray); }
nav .nav-lang:hover { color: var(--black); }
nav .nav-ai { color: #3A3A3A; }
nav .nav-ai:hover, nav .nav-ai:focus-visible { color: var(--black); background: #F2F2EF; }
nav .nav-cta { background: var(--black); color: #fff; border-color: var(--black); }
nav .nav-cta:hover { background: #222; border-color: #222; color: #fff; }

/* ---- Hero ---- */
.hero.hero-light {
  background: radial-gradient(1100px 320px at 50% -60px, #F1F1EE 0%, rgba(241,241,238,0) 70%), #FAFAF8;
  text-align: left; padding-top: 104px; padding-bottom: 96px; overflow: visible;
}
.hero-light h1 { color: var(--black); max-width: 15ch; margin: 0; font-size: clamp(40px, 6.6vw, 84px); letter-spacing: -0.045em; line-height: 1.02; }
.hero-light h1 .hl { color: var(--forest); }
.hero-light .sub { max-width: 54ch; margin: 28px 0 0; font-size: clamp(17px, 1.7vw, 21px); font-weight: 400; line-height: 1.5; color: #2A2A2A; }
.hero-row { display: flex; align-items: center; gap: 22px; margin-top: 34px; flex-wrap: wrap; }
.btn-hero {
  display: inline-flex; align-items: center; justify-content: center; min-width: 208px;
  background: var(--forest); color: #fff; font: 700 15px var(--font); letter-spacing: -0.01em;
  padding: 18px 30px; border-radius: 8px; text-decoration: none;
  box-shadow: 0 14px 30px rgba(27,67,50,.28); transition: transform .18s ease, box-shadow .18s ease;
}
.btn-hero:hover { transform: translateY(-2px); box-shadow: 0 18px 34px rgba(27,67,50,.32); }
.hero-dare { font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #9A9EA3; line-height: 1.7; }
.hero-dare a { display: inline-block; margin-top: 2px; color: var(--forest); text-decoration: none; border-bottom: 1.5px solid rgba(27,67,50,.25); transition: border-color .15s ease; }
.hero-dare a:hover { border-color: var(--forest); }
.hero-chips-wrap { display: flex; width: max-content; animation: chips 38s linear infinite; }
.hero-light .wrap { overflow: visible; }
.hero-chips-mask { margin-top: 64px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.hero-chips { list-style: none; display: flex; gap: 10px; padding-right: 10px; flex-shrink: 0; }
.hero-chips li { display: inline-flex; align-items: center; gap: 9px; background: #fff; border: 1px solid #E4E4E0; border-radius: 8px; padding: 9px 14px; font-size: 14px; font-weight: 600; color: #222; white-space: nowrap; }
.hero-chips li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #9AD94A; }
.hero-chips-mask:hover .hero-chips-wrap { animation-play-state: paused; }
@keyframes chips { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- Dashboard mock ---- */
.dash { margin-top: 64px; display: grid; grid-template-columns: 216px minmax(0, 1fr); background: #fff; border: 1px solid #ECECE8; border-radius: 14px; box-shadow: 0 30px 80px rgba(20,30,25,.10), 0 2px 8px rgba(0,0,0,.04); overflow: hidden; }
.dash-side { border-right: 1px solid #F0F0EC; padding: 22px 14px; }
.dash-side h6 { font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #A3A7AC; margin: 18px 8px 8px; }
.dash-side h6:first-child { margin-top: 0; }
.dash-side ul { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.dash-side li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: #3D4146; padding: 8px 10px; border-radius: 8px; }
.dash-side li svg { width: 16px; height: 16px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: #6B7075; }
.dash-side li.on { background: #F2F2EF; color: var(--black); font-weight: 600; box-shadow: inset 3px 0 0 var(--forest); }
.dash-side li.on svg { color: var(--black); }
.dash-side li em { margin-left: auto; font-style: normal; font-size: 10.5px; font-weight: 700; color: #fff; background: var(--forest); border-radius: 50px; min-width: 18px; height: 18px; display: grid; place-items: center; }
.dash-main { padding: 22px 24px 24px; min-width: 0; }

.dash-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 2px 0 12px; flex-wrap: wrap; }
.dash-h b { font-size: 15px; letter-spacing: -0.01em; }
.ccal-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.ccal-tabs button {
  font: 600 12.5px var(--font); color: #3A3A3A; background: #fff; border: 1px solid #E2E2DE; border-radius: 50px;
  padding: 6px 12px; cursor: pointer; position: relative; overflow: hidden; transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.ccal-tabs button:hover { border-color: #9A9A9A; }
.ccal-tabs button[aria-selected="true"] { background: var(--forest); border-color: var(--forest); color: #fff; }
.ccal-tabs button i { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }

.ccal { border: 1px solid #ECECE8; border-radius: 12px; overflow: hidden; }
.ccal-days, .ccal-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ccal-days { background: #F7F7F5; border-bottom: 1px solid #ECECE8; }
.ccal-days span { font-size: 11.5px; font-weight: 700; color: var(--gray); padding: 6px 10px; }
.ccal-cell { height: 86px; padding: 6px 8px 8px; border-right: 1px solid #F0F0EC; border-bottom: 1px solid #F0F0EC; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ccal-cell:nth-child(5n) { border-right: 0; }
.ccal-cell:nth-last-child(-n+5) { border-bottom: 0; }
.ccal-dt { font-size: 11px; color: #B5B9BD; font-weight: 600; }
.ccal-dt i { font-style: normal; display: none; }
.ccal-ev { border-left: 3px solid var(--forest); background: var(--tint); border-radius: 5px; padding: 5px 7px 6px; opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease; }
.ccal-ev.on { opacity: 1; transform: none; }
.ccal-ev.li { border-color: #2D6CB5; background: #EAF1FA; }
.ccal-ev.rep { border-color: var(--gray2); background: #F4F4F2; }
.ccal-ti { font-size: 12px; font-weight: 700; line-height: 1.28; color: var(--black); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ccal-kw { font-size: 10.5px; color: var(--gray); margin-top: 3px; display: flex; gap: 5px; line-height: 1.3; }
.ccal-kw span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ccal-kw b { flex-shrink: 0; color: var(--forest); font-variant-numeric: tabular-nums; }
.ccal-ev.li .ccal-kw b { color: #2D6CB5; }

/* ---- Estimate strip ---- */
.est { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.est > div { position: relative; border: 1px solid #ECECE8; border-radius: 12px; padding: 12px 14px 13px; }
.est > div:not(:last-child)::after { content: "→"; position: absolute; right: -12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1px solid #ECECE8; display: grid; place-items: center; font-size: 10px; font-weight: 800; color: var(--accent-ink); z-index: 1; }
.est .k { font-size: 11px; font-weight: 600; color: var(--gray); }
.est b { display: block; font-size: 24px; font-weight: 900; letter-spacing: -0.035em; line-height: 1.1; margin-top: 4px; color: var(--black); font-variant-numeric: tabular-nums; }
.est .last { background: var(--tint); border-color: var(--tint); }
.est .last b { color: var(--forest); }
.est small { display: block; font-size: 11px; color: var(--gray); margin-top: 3px; }
.est label { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--gray); margin-top: 4px; white-space: nowrap; }
.est input { width: 64px; min-width: 0; font: 600 11px var(--font); color: var(--black); border: 1px solid #D8D8D4; border-radius: 5px; padding: 2px 5px; background: #fff; }
.est-note { font-size: 11px; color: #9A9EA3; line-height: 1.5; margin-top: 10px; }

@media (max-width: 900px) {
  .hero.hero-light { padding-top: 64px; padding-bottom: 64px; }
  .hero-chips-mask { margin-top: 40px; }
  .dash { grid-template-columns: minmax(0, 1fr); margin-top: 44px; }
  .dash-side { display: none; }
  .dash-main { padding: 16px; }
  .ccal-days { display: none; }
  .ccal-grid { grid-template-columns: minmax(0, 1fr); max-height: 420px; overflow-y: auto; }
  .ccal-cell { height: auto; border-right: 0; border-bottom: 1px solid #F0F0EC !important; display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 8px; padding: 8px 12px; }
  .ccal-dt i { display: inline; }
  .ccal-kw span { white-space: normal; }
  .est { grid-template-columns: 1fr 1fr; }
  .est > div::after { display: none; }
}
@media (max-width: 600px) {
  .hero.hero-light { padding-top: 44px; }
  .btn-hero { width: 100%; }
  .hero-chips li { font-size: 13px; padding: 7px 11px; }
  .hero-dare { letter-spacing: .1em; }
}
@media (prefers-reduced-motion: reduce) { .ccal-ev { transition: none; } .hero-chips-wrap { animation: none; flex-wrap: wrap; width: auto; } .hero-chips[aria-hidden] { display: none; } .hero-chips { flex-wrap: wrap; } }

/* ---- Final CTA: one button, demo as text link ---- */
.cta-alt { margin-top: 18px; font-size: 15px; color: rgba(255,255,255,.65); }
.cta-alt a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.35); }
.cta-alt a:hover { text-decoration-color: #fff; }

/* ---- Footer ---- */
.ft { background: #FAFAF8; border-top: 1px solid #ECECE8; padding: 64px 0 28px; font-size: 14px; color: var(--gray); }
.ft-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; }
.ft-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.ft-logo img { width: 36px; height: 36px; border-radius: 8px; display: block; }
.ft-logo span { font-size: 19px; font-weight: 900; letter-spacing: -0.04em; color: var(--black); }
.ft-tag { margin-top: 14px; font-weight: 700; color: var(--black); }
.ft-desc { margin-top: 6px; color: var(--gray); line-height: 1.6; max-width: 34ch; }
.ft-col h4 { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--black); margin-bottom: 14px; }
.ft-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.ft-col a { color: var(--gray); text-decoration: none; transition: color .14s; }
.ft-col a:hover { color: var(--black); }
.ft-plain { color: var(--gray); }
.ft-bottom { margin-top: 48px; padding-top: 20px; border-top: 1px solid #ECECE8; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 13px; }
.ft-legal { display: flex; gap: 20px; flex-wrap: wrap; }
.ft-legal a { color: var(--gray); text-decoration: none; }
.ft-legal a:hover { color: var(--black); }
@media (max-width: 900px) { .ft-grid { grid-template-columns: 1fr 1fr; } .ft-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .ft { padding-top: 48px; } .ft-grid { grid-template-columns: 1fr; gap: 28px; } }


/* ---- Shared section head ---- */
.sec-head { max-width: 760px; margin-bottom: 48px; }
.sec-head .eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 14px; }
.sec-sub { font-size: 18px; line-height: 1.6; color: var(--gray); margin-top: 18px; max-width: 62ch; }

/* ---- Before / after calendar ---- */
.ba-section { background: #fff; }
.ba-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ba-panel { border-radius: 18px; padding: 24px; border: 1px solid #ECECE8; }
.ba-before { background: #FBF8F5; }
.ba-after { background: #F3F8F5; border-color: #DCEBE2; }
.ba-h { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 16px; }
.ba-dot { width: 10px; height: 10px; border-radius: 50%; background: #C9772F; }
.ba-after .ba-dot { background: var(--accent); }
.ba-weeks { display: grid; grid-template-columns: repeat(3, 1fr); font-size: 12px; font-weight: 700; color: var(--gray); border-bottom: 1px solid rgba(0,0,0,.07); padding-bottom: 8px; }
.ba-weeks span { padding-left: 4px; }
.ba-board { position: relative; height: 252px; margin-top: 10px; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(33.333% - 1px), rgba(0,0,0,.06) calc(33.333% - 1px), rgba(0,0,0,.06) 33.333%); }
.ba-item { position: absolute; left: 0; width: 33.333%; height: 54px; padding: 0 4px; transition: transform .7s cubic-bezier(.3,.7,.2,1), opacity .4s ease; }
.ba-item[data-row="0"] { top: 0; } .ba-item[data-row="1"] { top: 64px; } .ba-item[data-row="2"] { top: 128px; } .ba-item[data-row="3"] { top: 192px; }
.ba-item > * { position: relative; }
.ba-item::before { content: ""; position: absolute; inset: 0 4px; background: #fff; border: 1px solid #E8E2DA; border-radius: 9px; box-shadow: 0 2px 6px rgba(0,0,0,.04); }
.ba-t { display: block; font-size: 12.5px; font-weight: 700; line-height: 1.25; padding: 8px 10px 0; color: var(--black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ba-tag { display: inline-block; margin: 4px 0 0 10px; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 50px; background: #F1F1EE; color: var(--gray); }
.ba-before .ba-tag.moved { background: #FCEBDD; color: #B4532A; }
.ba-before .ba-tag.dropped { background: #F3E1E1; color: #A33A3A; }
.ba-before .ba-item.dropped .ba-t { text-decoration: line-through; color: var(--gray); }
.ba-after .ba-item::before { border-color: #DCEBE2; }
.ba-after .ba-tag.s1 { background: #FFF3D6; color: #8A6410; }
.ba-after .ba-tag.s2 { background: var(--tint); color: var(--accent-ink); }
.ba-after .ba-tag.s3 { background: var(--forest); color: #fff; }
.ba-pts { list-style: none; margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.ba-pts li { position: relative; padding-left: 22px; font-size: 15px; line-height: 1.5; color: #3A3A3A; }
.ba-pts li::before { content: "–"; position: absolute; left: 4px; color: #C9772F; font-weight: 700; }
.ba-after .ba-pts li::before { content: "✓"; left: 2px; color: var(--accent-ink); }

/* ---- Cycle ---- */
.cy-section { background: #FAFAF8; }
.cy-wrap { display: grid; grid-template-columns: 600px 1fr; gap: 48px; align-items: center; }
.cy-ring { position: relative; width: 600px; height: 520px; }
.cy-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cy-arc { transform-origin: 300px 260px; transform: rotate(-155deg); }
.cy-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; }
.cy-center b { display: block; font-size: 24px; font-weight: 900; letter-spacing: -0.03em; color: var(--forest); }
.cy-center span { font-size: 14px; color: var(--gray); }
.cy-node { position: absolute; width: 200px; transform: translate(-50%, -50%); background: #fff; border: 1.5px solid #E6E6E1; border-radius: 14px; padding: 13px 15px 14px; box-shadow: 0 4px 14px rgba(0,0,0,.05); transition: border-color .3s ease, box-shadow .3s ease; }
.cy-node em { font-style: normal; font-size: 12px; font-weight: 800; color: var(--accent-ink); }
.cy-node b { display: block; font-size: 17px; letter-spacing: -0.015em; margin-top: 1px; }
.cy-node p { font-size: 12.5px; color: var(--gray); line-height: 1.45; margin-top: 4px; }
.cy-node.n1 { left: 300px; top: 70px; } .cy-node.n2 { left: 490px; top: 260px; } .cy-node.n3 { left: 300px; top: 450px; } .cy-node.n4 { left: 110px; top: 260px; }
.cy-node.on { border-color: var(--accent); box-shadow: 0 8px 24px rgba(47,138,94,.22); }
.cy-side { display: flex; flex-direction: column; gap: 22px; }
.cy-you { background: var(--forest); color: #fff; border-radius: 16px; padding: 24px 26px; }
.cy-you .k { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.cy-you p:last-child { color: rgba(255,255,255,.88); font-size: 17px; line-height: 1.55; margin-top: 8px; }
.cy-link { font-weight: 700; color: var(--forest); text-decoration: none; border-bottom: 1.5px solid rgba(27,67,50,.25); align-self: flex-start; padding-bottom: 2px; }
.cy-link:hover { border-color: var(--forest); }

/* ---- Case studies ---- */
.cs-section { background: #fff; }
.cs-feat { display: grid; grid-template-columns: 360px 1fr; gap: 40px; background: var(--forest); color: #fff; border-radius: 20px; padding: 36px 40px; }
.cs-feat .cs-ind { color: var(--accent); }
.cs-feat-num b { display: block; font-size: clamp(48px, 6vw, 76px); font-weight: 900; letter-spacing: -0.05em; line-height: 1; margin-top: 10px; font-variant-numeric: tabular-nums; }
.cs-feat .cs-unit { color: rgba(255,255,255,.75); font-size: 16px; margin-top: 8px; }
.cs-steps { display: grid; gap: 18px; }
.cs-steps dt { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.cs-steps dd { font-size: 16px; line-height: 1.55; color: rgba(255,255,255,.9); margin-top: 4px; }
.cs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 16px; }
.cs-card { border: 1px solid #ECECE8; border-radius: 16px; padding: 22px; display: flex; flex-direction: column; }
.cs-ind { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gray); }
.cs-num { font-size: 40px; font-weight: 900; letter-spacing: -0.045em; line-height: 1; color: var(--forest); margin-top: 12px; font-variant-numeric: tabular-nums; }
.cs-unit { font-size: 14.5px; font-weight: 700; margin-top: 6px; line-height: 1.35; }
.cs-txt { font-size: 14px; color: var(--gray); line-height: 1.55; margin-top: 10px; }
.cs-card blockquote { margin-top: auto; padding-top: 14px; border-top: 1px solid #ECECE8; font-size: 14px; font-style: italic; color: var(--black); line-height: 1.5; }
.cs-card blockquote cite { display: block; font-style: normal; font-size: 12px; color: var(--gray); margin-top: 6px; }
.cs-card:has(blockquote) .cs-txt { margin-bottom: 14px; }
.cs-total { margin-top: 22px; font-size: 15px; color: var(--gray); }
.cs-total b { color: var(--forest); font-size: 20px; font-weight: 900; letter-spacing: -0.03em; margin-right: 4px; }

@media (max-width: 1100px) {
  .cy-wrap { grid-template-columns: 1fr; }
  .cy-ring { margin: 0 auto; }
  .cs-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .ba-grid { grid-template-columns: 1fr; }
  .cs-feat { grid-template-columns: 1fr; gap: 24px; padding: 28px 24px; }
  .cy-ring { width: auto; height: auto; display: flex; flex-direction: column; gap: 10px; }
  .cy-ring svg, .cy-center { display: none; }
  .cy-node { position: static; transform: none; width: auto; }
}
@media (max-width: 600px) {
  .sec-sub { font-size: 16px; }
  .cs-grid { grid-template-columns: 1fr; }
  .ba-panel { padding: 16px; }
  .ba-t { font-size: 11.5px; padding: 7px 8px 0; white-space: normal; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
  .ba-tag { margin-left: 8px; }
}

/* =====================================================================
   Less generic: Geist type, mono numbers, left-aligned blocks, rules over cards
   ===================================================================== */
:root { --font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --black: #141613; }
body { font-feature-settings: "ss01" 1; }
h1, h2, h3 { font-weight: 700; letter-spacing: -0.04em; }
h2 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.08; }
.hero-light h1 { font-weight: 700; font-size: clamp(40px, 5.8vw, 74px); letter-spacing: -0.05em; line-height: 1; }
em { font-style: normal; }
.btn, .btn-hero, .nav-cta { letter-spacing: -0.005em; }
.btn-hero:active, .btn:active, .nav-cta:active { transform: translateY(1px) scale(.99); }

/* numbers in mono */
.ccal-kw b, .est b, .ccal-dt { font-family: var(--mono); letter-spacing: -0.02em; }
.est b { font-weight: 600; }
.cs-num, .cs-feat-num b, .cs-total b, .stat-num { font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: -0.045em; }

/* section index instead of green uppercase eyebrows */
.idx { display: flex; align-items: baseline; gap: 12px; font-size: 14px; font-weight: 500; color: var(--gray); margin-bottom: 18px; letter-spacing: 0; text-transform: none; }
.idx span { font-family: var(--mono); font-size: 12px; color: var(--forest); padding: 2px 7px; border: 1px solid rgba(27,67,50,.25); border-radius: 5px; }

/* hero quote: left aligned, sans, between hairlines */
.hero-quote { background: #fff; border-top: 1px solid #ECECE8; border-bottom: 1px solid #ECECE8; padding: 56px 0; }
.hero-quote-block { text-align: left; max-width: 920px; margin: 0; display: grid; grid-template-columns: 56px 1fr; column-gap: 8px; }
.hero-quote-block::before { content: "\201C"; font-size: 72px; line-height: .9; color: var(--accent); font-weight: 600; }
.hq-text { font-family: var(--font); font-style: normal; font-weight: 500; font-size: clamp(22px, 2.5vw, 32px); line-height: 1.3; letter-spacing: -0.025em; color: var(--black); margin-bottom: 14px; grid-column: 2; }
.hq-src { grid-column: 2; font-size: 13px; letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--gray); }

/* comparison: heading left, intro right */
.diff-head { display: grid; grid-template-columns: 1.15fr 1fr; gap: 12px 56px; text-align: left; max-width: none; margin: 0 0 48px; align-items: end; }
.diff-head .idx { grid-column: 1 / -1; margin-bottom: 4px; }
.diff-head h2 { margin: 0; }
.diff-head .body { margin: 0; font-weight: 400; font-size: 17px; }
.compare .no { color: #B4B7BA; font-weight: 500; font-size: 13px; }

/* quality: text left, numbered rules right */
.quality-section .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 0 72px; align-items: start; }
.quality-head { text-align: left; margin: 0; max-width: none; grid-column: 1; grid-row: 1; }
.quality-head .body { font-weight: 400; }
.quality-foot { grid-column: 1; grid-row: 2; justify-content: flex-start; margin-top: 28px; }
.quality-grid { grid-column: 2; grid-row: 1 / span 2; display: block; border-top: 2px solid var(--black); }
.quality-card { background: none; border-radius: 0; padding: 22px 0 22px 52px; border-bottom: 1px solid rgba(27,67,50,.15); position: relative; }
.quality-card .q-num { position: absolute; left: 0; top: 22px; background: none; width: auto; height: auto; font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--forest); white-space: nowrap; }
.quality-card h3 { font-size: 19px; }
.quality-card p { font-weight: 400; }

/* founder */
.about-exp { background: none; padding: 0; color: var(--gray); font-weight: 500; }
.about-bio { font-weight: 400; }

/* case cards as ruled columns */
.cs-card { border: 0; border-top: 2px solid var(--black); border-radius: 0; padding: 18px 0 0; }
.cs-grid { gap: 32px; margin-top: 48px; }
.cs-feat { border-radius: 14px; }

/* before/after + cycle panels: a bit flatter */
.ba-panel { border-radius: 14px; }
.cy-you { border-radius: 14px; }
.sec-sub, .ba-pts li, .cs-txt, .cy-node p { font-weight: 400; }

/* final CTA: split, left aligned */
.cta-final { text-align: left; }
.cta-final .wrap { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-areas: "h btn" "s alt" "s trust"; gap: 0 64px; align-items: end; }
.cta-final h2 { grid-area: h; margin: 0; max-width: 16ch; }
.cta-final .sub { grid-area: s; margin: 20px 0 0; align-self: start; }
.cta-final .btn-row { grid-area: btn; justify-content: flex-start; }
.cta-final .cta-alt { grid-area: alt; align-self: start; }
.cta-final .trust { grid-area: trust; align-self: start; margin-top: 8px; }
.cta-final::after { background: radial-gradient(700px 300px at 85% 110%, rgba(82,183,136,.16), transparent 70%); }

@media (max-width: 900px) {
  .diff-head, .quality-section .wrap { grid-template-columns: 1fr; }
  .quality-grid { grid-column: 1; grid-row: auto; margin-top: 32px; }
  .quality-foot { grid-row: auto; }
  .cta-final .wrap { grid-template-columns: 1fr; grid-template-areas: "h" "s" "btn" "alt" "trust"; }
  .cta-final .btn-row { margin-top: 28px; }
  .hero-quote-block { grid-template-columns: 36px 1fr; }
  .hero-quote-block::before { font-size: 52px; }
}

/* =====================================================================
   Amie-inspired pass: white canvas, one action colour, hairline-shadow cards,
   pills for tags, one highlighted phrase in the hero
   ===================================================================== */
:root {
  --ink: #111312; --body: #5c5c5c; --muted: #a0a0a0; --hair: #ebebeb; --surface: #fafafa;
  --ring: rgba(0,0,0,.06) 0 0 0 1px, rgba(0,0,0,.06) 0 1px 1px -.5px, rgba(0,0,0,.06) 0 3px 3px -1.5px;
  --pop: rgba(0,0,0,.08) 0 0 0 1px, rgba(0,0,0,.06) 0 12px 32px -12px;
  --action: #1B4332; --action-hover: #143527; --mark: #c7ecd6;
  --black: var(--ink); --gray: var(--body);
}
body { background: #fff; color: var(--ink); }
section { padding: 96px 0; }
h2 { font-weight: 600; font-size: clamp(28px, 3.2vw, 40px); letter-spacing: -0.03em; line-height: 1.12; }
h3 { font-weight: 600; }
em, .em-ink em { color: inherit; }

/* nav */
nav { background: rgba(255,255,255,.85); border-bottom: 1px solid var(--hair); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
nav .nav-links a { font-weight: 500; color: var(--ink); }
nav .nav-links a:hover { color: var(--body); }
nav .nav-cta { background: var(--action); border-color: var(--action); border-radius: 12px; padding: 10px 20px; font-weight: 600; }
nav .nav-cta:hover { background: var(--action-hover); border-color: var(--action-hover); }

/* hero */
.hero.hero-light { background: #fff; padding-top: 96px; padding-bottom: 88px; }
.hero-light h1 { font-size: clamp(40px, 5.2vw, 64px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.06; max-width: 14ch; }
.hero-light h1 .hl { color: var(--ink); background: linear-gradient(to bottom, transparent 22%, var(--mark) 22%, var(--mark) 94%, transparent 94%); padding: 0 .08em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hero-light .sub { color: var(--body); font-size: clamp(17px, 1.5vw, 19px); line-height: 1.6; max-width: 52ch; margin-top: 24px; }
.hero-row { gap: 10px; margin-top: 32px; }
.btn-hero { min-width: 0; background: var(--action); border-radius: 12px; padding: 13px 28px; font-size: 15px; font-weight: 600; box-shadow: none; }
.btn-hero:hover { background: var(--action-hover); box-shadow: none; transform: none; }
.hero-dare { font-size: 13.5px; letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--muted); margin-top: 14px; max-width: 60ch; }
.hero-chips-mask { margin-top: 56px; }
.hero-chips li { border: 0; box-shadow: var(--ring); border-radius: 9999px; padding: 7px 14px 7px 12px; font-size: 13px; font-weight: 500; color: var(--ink); }
.hero-chips li::before { width: 6px; height: 6px; background: var(--action); opacity: .55; }

/* dashboard */
.dash { box-shadow: var(--pop); border: 0; border-radius: 12px; margin-top: 56px; }
.dash-side { border-color: var(--hair); background: var(--surface); }
.dash-side li.on { background: #fff; box-shadow: var(--ring); }
.ccal { border: 0; box-shadow: var(--ring); border-radius: 12px; }
.ccal-days { background: var(--surface); border-color: var(--hair); }
.ccal-cell { border-color: var(--hair); }
.ccal-tabs button { border: 0; box-shadow: var(--ring); border-radius: 9999px; font-weight: 500; }
.ccal-tabs button[aria-selected="true"] { box-shadow: none; }
.est > div { border: 0; box-shadow: var(--ring); border-radius: 12px; }
.est > div::after { border: 0; box-shadow: var(--ring); }
.est .last { background: var(--surface); }
.est .last b { color: var(--ink); }
.est input { border: 0; box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset; border-radius: 6px; }

/* quote */
.hero-quote { border-color: var(--hair); }
.hero-quote-block::before { color: var(--muted); }

/* section labels as grey pills */
.idx { gap: 0; }
.idx span { display: none; }
.idx { display: inline-flex; background: var(--hair); color: var(--ink); border-radius: 9999px; padding: 5px 12px; font-size: 13px; font-weight: 500; margin-bottom: 18px; }
.sec-sub, .diff-head .body, .quality-head .body { color: var(--body); }

/* before / after: white cards, colour only in dots and status pills */
.ba-before, .ba-after { background: #fff; border: 0; box-shadow: var(--ring); border-radius: 12px; }
.ba-weeks { border-color: var(--hair); }
.ba-item::before { border: 0; box-shadow: var(--ring); border-radius: 8px; }
.ba-after .ba-item::before { border: 0; }
.ba-tag { border-radius: 9999px; }
.ba-after .ba-tag.s3 { background: var(--action); }

/* cycle */
.cy-section { background: #fff; }
.cy-node { border: 0; box-shadow: var(--ring); border-radius: 12px; }
.cy-node.on { box-shadow: rgba(27,67,50,.55) 0 0 0 1.5px, rgba(27,67,50,.12) 0 10px 24px -8px; }
.cy-you { background: var(--surface); color: var(--ink); box-shadow: var(--ring); border-radius: 12px; }
.cy-you .k { color: var(--body); text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 14px; }
.cy-you p:last-child { color: var(--ink); }

/* cases */
.cs-feat { background: var(--surface); color: var(--ink); box-shadow: var(--ring); border-radius: 12px; }
.cs-feat .cs-ind, .cs-steps dt { color: var(--body); }
.cs-feat .cs-unit { color: var(--body); }
.cs-steps dd { color: var(--ink); }
.cs-ind { letter-spacing: .02em; text-transform: none; font-size: 13px; font-weight: 500; }
.cs-steps dt { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; }
.cs-num { color: var(--ink); }
.cs-card { border-top: 1px solid var(--hair); }
.cs-total b { color: var(--ink); }

/* comparison: light GetMarketing column */
.compare .gm-col { background: var(--surface); color: var(--ink); box-shadow: inset 1px 0 0 var(--hair), inset -1px 0 0 var(--hair); }
.compare thead .gm-col { color: var(--action); font-weight: 700; }
.gm-col .yes { color: var(--action); }
.compare td, .compare th { border-color: var(--hair) !important; }

/* quality: white, ruled list */
.quality-section { background: #fff; }
.quality-grid { border-top: 1px solid var(--ink); }
.quality-card { border-color: var(--hair); }

/* founder */
.about-section { background: #fff; }

/* final CTA: light card, one action */
.cta-final { background: #fff; color: var(--ink); padding: 40px 0 96px; }
.cta-final::after { display: none; }
.cta-final .wrap { background: var(--surface); box-shadow: var(--ring); border-radius: 16px; padding: 56px; max-width: calc(var(--maxw) - 56px); }
.cta-final h2 { color: var(--ink); }
.cta-final .sub { color: var(--body); font-weight: 400; }
.cta-final .btn-light { background: var(--action); color: #fff; border-radius: 12px; padding: 13px 28px; font-weight: 600; }
.cta-final .btn-light:hover { background: var(--action-hover); opacity: 1; transform: none; }
.cta-alt { color: var(--body); }
.cta-alt a { color: var(--ink); text-decoration-color: rgba(0,0,0,.25); }
.cta-alt a:hover { text-decoration-color: var(--ink); }
.cta-final .trust { color: var(--muted); }

/* footer */
.ft { background: #fff; border-color: var(--hair); }
.ft-bottom { border-color: var(--hair); }

@media (max-width: 900px) {
  section { padding: 72px 0; }
  .cta-final .wrap { padding: 32px 24px; }
}
@media (max-width: 600px) {
  .hero-row > a { width: 100%; justify-content: center; }
  .cta-final .wrap { margin: 0 16px; }
}

/* =====================================================================
   Colour moments: green stage under the dashboard, coloured chip dots,
   accent words, dark cycle band, dark featured case and final CTA
   ===================================================================== */
.hero-dare a { color: var(--action); font-weight: 600; text-decoration: none; border-bottom: 1.5px solid rgba(27,67,50,.3); }
.hero-dare a:hover { border-color: var(--action); }
h2 em, .hero-light h1 em { color: var(--accent-ink); }

/* hero: dashboard floats over a green band */
.hero.hero-light { background: linear-gradient(to bottom, #fff 0, #fff calc(100% - 380px), var(--forest) calc(100% - 380px)); padding-bottom: 72px; }
.hero.hero-light::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 380px; background: radial-gradient(700px 260px at 80% 100%, rgba(82,183,136,.28), transparent 70%); pointer-events: none; }
.hero.hero-light > .wrap { position: relative; z-index: 1; }
.dash { box-shadow: rgba(0,0,0,.08) 0 0 0 1px, rgba(10,30,20,.35) 0 30px 60px -20px; }

/* coloured category dots on the chips */
.hero-chips li:nth-child(5n+1)::before { background: #2F8A5E; opacity: 1; }
.hero-chips li:nth-child(5n+2)::before { background: #2D6CB5; opacity: 1; }
.hero-chips li:nth-child(5n+3)::before { background: #E0A526; opacity: 1; }
.hero-chips li:nth-child(5n+4)::before { background: #E46B6B; opacity: 1; }
.hero-chips li:nth-child(5n+5)::before { background: #1FA2A6; opacity: 1; }

/* quote sits right after the green band */
.hero-quote { border-top: 0; }

/* before / after tinted again */
.ba-before { background: #FCF8F3; }
.ba-after { background: #F2F8F4; }
.ba-after .ba-tag.s3 { background: var(--accent); color: var(--forest); }
.ba-note { font-size: 12px; color: var(--muted); margin-top: 14px; }

/* cycle on a dark band */
.cy-section { background: var(--forest); color: #fff; position: relative; overflow: hidden; }
.cy-section::after { content: ""; position: absolute; inset: 0; background: radial-gradient(800px 400px at 15% 0%, rgba(82,183,136,.18), transparent 70%); pointer-events: none; }
.cy-section .wrap { position: relative; z-index: 1; }
.cy-section h2 { color: #fff; }
.cy-section h2 em { color: var(--accent); }
.cy-section .sec-sub { color: rgba(255,255,255,.7); }
.cy-ring svg circle:first-child { stroke: rgba(255,255,255,.15); }
.cy-center b { color: #fff; }
.cy-center span { color: rgba(255,255,255,.6); }
.cy-node { box-shadow: none; }
.cy-node.on { box-shadow: 0 0 0 2px var(--accent), 0 14px 30px -10px rgba(0,0,0,.4); }
.cy-you { background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.cy-you .k { color: var(--accent); }
.cy-you p:last-child { color: #fff; }
.cy-link { color: #fff; border-color: rgba(255,255,255,.35); }
.cy-link:hover { border-color: #fff; }

/* featured case dark again, accent number */
.cs-feat { background: var(--forest); color: #fff; box-shadow: none; }
.cs-feat .cs-ind, .cs-steps dt { color: var(--accent); }
.cs-feat-num b { color: #fff; }
.cs-feat .cs-unit { color: rgba(255,255,255,.75); }
.cs-steps dd { color: rgba(255,255,255,.9); }
.cs-num { color: var(--forest); }
.cs-card { border-top: 2px solid var(--forest); }

/* comparison column strong again */
.compare .gm-col { background: var(--forest); color: #fff; box-shadow: none; }
.compare thead .gm-col { color: #fff; }
.gm-col .yes { color: var(--accent); }

/* quality on a soft green band */
.quality-section { background: var(--tint); }
.quality-grid { border-top-color: var(--forest); }
.quality-card { border-color: rgba(27,67,50,.15); }

/* final CTA: dark card, one light button */
.cta-final .wrap { background: var(--forest); box-shadow: none; position: relative; overflow: hidden; }
.cta-final .wrap::after { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 300px at 90% 120%, rgba(82,183,136,.3), transparent 70%); pointer-events: none; }
.cta-final .wrap > * { position: relative; z-index: 1; }
.cta-final h2 { color: #fff; }
.cta-final .sub { color: rgba(255,255,255,.72); }
.cta-final .btn-light { background: #fff; color: var(--forest); }
.cta-final .btn-light:hover { background: #F2F8F4; }
.cta-alt { color: rgba(255,255,255,.7); }
.cta-alt a { color: #fff; text-decoration-color: rgba(255,255,255,.4); }
.cta-final .trust { color: rgba(255,255,255,.5); }

@media (max-width: 900px) {
  .hero.hero-light { background: linear-gradient(to bottom, #fff 0, #fff calc(100% - 300px), var(--forest) calc(100% - 300px)); }
  .hero.hero-light::after { height: 300px; }
}
.ba-tag { white-space: nowrap; }
@media (max-width: 600px) { .ba-tag { font-size: 9.5px; padding: 2px 6px; margin-left: 6px; } }

/* chips: room for the pill ring so the marquee is not clipped top and bottom */
.hero-chips-mask { padding: 6px 0; margin-top: 50px; }

/* cycle step numbers as badges, readable on mobile */
.cy-node em { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--forest); font-size: 13px; font-weight: 700; }
.cy-node b { margin-top: 8px; }
@media (max-width: 900px) {
  .cy-node em { width: 30px; height: 30px; font-size: 16px; }
  .cy-node b { font-size: 19px; }
  .cy-node p { font-size: 14.5px; }
}

/* your part: one line, plus the small aside */
.cy-you p.cy-task { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; margin: 0; color: #fff; }
.cy-you p.cy-task b { color: var(--accent); font-weight: 600; }
.cy-you p.cy-alt { font-size: 14px; line-height: 1.5; margin-top: 8px; color: rgba(255,255,255,.62); }

/* final CTA without the sub line */
.cta-final .btn-row { margin-top: 28px; }

/* cycle cards sit on the dark band but are white: keep their titles dark */
.cy-node { color: var(--ink); }

/* quality list uses the same number badges as the cycle */
.quality-card .q-num { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--forest); font-family: var(--font); font-size: 14px; font-weight: 700; top: 20px; }

/* header: short CTA, ChatGPT button sits right next to the menu button */
nav .nav-ai { margin-left: -8px; }
@media (max-width: 420px) { nav .nav-ai { display: flex; } }
@media (max-width: 600px) { nav .nav-cta { padding: 8px 16px; font-size: 13px; } }
@media (max-width: 400px) { nav .nav-inner { gap: 8px; } nav .nav-ai { margin-left: -4px; } nav .nav-logo { gap: 8px; } nav .nav-logo-text { font-size: 16px; } nav .nav-cta { padding: 7px 12px; } }

/* hero dare link wraps on phones: underline every line */
.hero-dare a { display: inline; border-bottom: 0; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: rgba(27,67,50,.3); }
.hero-dare a:hover { text-decoration-color: var(--action); }
@media (max-width: 350px) { nav .nav-lang { display: none; } nav .nav-cta { margin-left: auto; } }