/* ==========================================================================
   sayantannandi.com — 2026 visual refresh
   Editorial, restrained, professional. Navy + cobalt on warm white.
   ========================================================================== */

:root {
  --paper: #F7F8FA;
  --paper-2: #EEF1F6;
  --panel: #FFFFFF;
  --ink: #101828;
  --ink-2: #344054;
  --ink-muted: #667085;
  --navy: #102A5C;
  --blue: #123F91;
  --blue-2: #1D56C6;
  --blue-soft: #E9F0FF;
  --rule: #D8DEE9;
  --rule-soft: #E8ECF2;
  --earning: #A16A16;
  --exit: #123F91;
  --signal: #123F91;
  --dark: #0B1731;

  --display: "Fraunces", Georgia, serif;
  --body: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --step--1: clamp(.82rem, .79rem + .14vw, .92rem);
  --step-0: clamp(1rem, .97rem + .15vw, 1.08rem);
  --step-1: clamp(1.18rem, 1.1rem + .38vw, 1.42rem);
  --step-2: clamp(1.55rem, 1.36rem + .8vw, 2.08rem);
  --step-3: clamp(2rem, 1.65rem + 1.6vw, 3rem);
  --step-4: clamp(2.65rem, 1.95rem + 3vw, 4.8rem);

  --gutter: clamp(1.2rem, 4vw, 3.4rem);
  --measure: 40rem;
  --radius: 20px;
  --shadow: 0 20px 65px rgba(16, 42, 92, .10);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: var(--step-0); line-height: 1.66; font-synthesis-weight: none; }
main, header, footer { position: relative; z-index: 1; }
img { max-width: 100%; display: block; }
::selection { background: #DCE7FF; color: var(--navy); }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 500; line-height: 1.08; letter-spacing: -.025em; margin: 0 0 .55em; text-wrap: balance; }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p { margin: 0 0 1.2em; }
a { color: inherit; text-decoration-color: #A8B4C7; text-underline-offset: .22em; text-decoration-thickness: 1px; transition: color .18s ease, text-decoration-color .18s ease, opacity .18s ease, transform .18s ease; }
a:hover { color: var(--blue); text-decoration-color: var(--blue); }
strong { font-weight: 600; }

.eyebrow { font-family: var(--mono); font-size: .69rem; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin: 0 0 1rem; display: block; font-weight: 500; }
.eyebrow--earning { color: var(--earning); }
.eyebrow--exit { color: var(--blue); }
.eyebrow--light { color: #AFC4F6; }
.lede { font-size: var(--step-1); line-height: 1.55; color: var(--ink-2); }
.muted { color: var(--ink-muted); }
.mono { font-family: var(--mono); }
.measure { max-width: var(--measure); }

.wrap { width: 100%; max-width: 76rem; margin-inline: auto; padding-inline: var(--gutter); }
.wrap--wide { max-width: 92rem; }
.wrap--narrow { max-width: 50rem; }
.section { padding-block: clamp(4rem, 9vw, 7rem); }
.section + .section { border-top: 1px solid var(--rule-soft); }
.section--tint { background: var(--paper-2); }
.section--dark { background: var(--dark); color: white; border-top: 0 !important; }

/* Header */
.masthead { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid rgba(216,222,233,.9); background: rgba(247,248,250,.90); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); }
.masthead__inner { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.wordmark { display: flex; flex-direction: column; gap: .12rem; text-decoration: none; min-width: max-content; }
.wordmark:hover { color: var(--ink); }
.wordmark__name { font-family: var(--display); font-size: 1.23rem; font-weight: 600; letter-spacing: -.02em; }
.wordmark__tag { font-family: var(--mono); color: var(--ink-muted); font-size: .56rem; letter-spacing: .075em; text-transform: uppercase; }
.nav { display: flex; align-items: center; gap: clamp(.85rem, 2vw, 1.55rem); font-size: .84rem; font-weight: 500; }
.nav a { text-decoration: none; color: var(--ink-2); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--blue); }
.nav__cta { border: 1px solid var(--navy); border-radius: 999px; padding: .64rem 1rem; color: white !important; background: var(--navy); }
.nav__cta:hover { background: var(--blue); border-color: var(--blue); color: white !important; }
.nav-toggle { display: none; width: 42px; height: 42px; border: 1px solid var(--rule); background: white; border-radius: 999px; padding: 0; align-items: center; justify-content: center; flex-direction: column; gap: 5px; }
.nav-toggle span { display: block; width: 16px; height: 1.5px; background: var(--ink); transition: transform .2s ease; }

/* Homepage */
.hero-visual { padding: clamp(1rem, 3vw, 2.2rem) 0 clamp(2.5rem, 5vw, 4.2rem); background: linear-gradient(180deg,#F7F8FA 0%,#F1F3F8 100%); }
.framework-figure { margin: 0; border: 1px solid #D9DFE9; border-radius: 28px; overflow: hidden; background: #ECEEF3; box-shadow: var(--shadow); }
.framework-figure img { width: 100%; height: auto; }
.section--intro { border-top: 0 !important; }
.intro-grid { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(20rem,.9fr); gap: clamp(3rem, 8vw, 7rem); align-items: start; }
.intro-grid h1 { max-width: 13ch; }
.intro-copy { padding-top: .4rem; max-width: 35rem; }
.section-head { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(18rem,.7fr); gap: clamp(2rem,6vw,6rem); align-items: end; margin-bottom: clamp(2rem,4vw,3.5rem); }
.section-head > p { color: var(--ink-muted); margin: 0; max-width: 34rem; }
.feature-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
.feature-card { min-height: 24rem; background: white; border: 1px solid var(--rule); border-radius: var(--radius); padding: clamp(1.4rem,3vw,2.2rem); display: flex; flex-direction: column; box-shadow: 0 12px 35px rgba(16,42,92,.04); position: relative; overflow: hidden; }
.feature-card::before { content:""; position:absolute; inset:0 0 auto 0; height:4px; background: var(--blue); }
.feature-card--earning::before { background: var(--earning); }
.feature-card--optional::before { background: var(--navy); }
.feature-card h3 { margin-top: auto; font-size: clamp(1.75rem,2.2vw,2.45rem); }
.feature-card p { color: var(--ink-muted); font-size: var(--step--1); }
.card-index { font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; color: var(--ink-muted); }
.text-link { display: inline-flex; align-items: center; gap: .45rem; font-size: .9rem; font-weight: 600; text-decoration: none; color: var(--blue); }
.text-link:hover { gap: .65rem; }
.newsletter-band { display: grid; grid-template-columns: 1fr minmax(19rem,.72fr); gap: clamp(3rem,8vw,7rem); align-items: center; }
.newsletter-band h2 { max-width: 12ch; }
.newsletter-band p { color: #C8D1E1; max-width: 37rem; }
.newsletter-inline { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15); padding: clamp(1.2rem,3vw,1.8rem); border-radius: 16px; }

/* About */
.about-hero { padding-top: clamp(3rem,7vw,6rem); }
.about-grid { display: grid; grid-template-columns: minmax(0,1.18fr) minmax(18rem,.72fr); gap: clamp(3rem,8vw,7rem); align-items: center; }
.about-hero__copy h1 { max-width: 15ch; }
.about-hero__copy .lede { max-width: 40rem; margin-top: 1.5rem; }
.portrait-card { margin: 0; background: white; border: 1px solid var(--rule); border-radius: 24px; padding: .7rem; box-shadow: var(--shadow); transform: rotate(1deg); }
.portrait-card img { border-radius: 18px; aspect-ratio: 1 / 1; object-fit: cover; }
.portrait-card figcaption { font-family: var(--mono); font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); padding: .75rem .55rem .25rem; }
.story-grid { display: grid; grid-template-columns: 14rem minmax(0,42rem); gap: clamp(3rem,8vw,8rem); justify-content: center; align-items: start; }
.story-aside { position: sticky; top: 7rem; border-top: 2px solid var(--navy); padding-top: 1.1rem; }
.story-aside p { font-size: .94rem; }
.prose--large { max-width: 42rem; }

/* Signature ledger */
.ledger { border: 1px solid var(--rule); border-radius: var(--radius); margin-block: clamp(2.25rem,5vw,3.5rem); background: white; overflow: hidden; box-shadow: 0 14px 42px rgba(16,42,92,.05); }
.ledger__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; }
.ledger__col { padding: clamp(1.5rem,3.5vw,2.5rem) clamp(1.1rem,3vw,2rem); }
.ledger__op { display:grid; place-items:center; min-width:clamp(3.5rem,9vw,7rem); border-inline:1px solid var(--rule); font-family:var(--display); font-size:clamp(2.4rem,7vw,4.5rem); color:var(--blue); line-height:1; }
.ledger__label { font-family:var(--mono); font-size:.68rem; letter-spacing:.15em; text-transform:uppercase; margin:0 0 .7rem; }
.ledger__col--a .ledger__label { color:var(--earning); } .ledger__col--b .ledger__label { color:var(--exit); }
.ledger__title { font-family:var(--display); font-size:var(--step-2); margin:0 0 .55rem; line-height:1.15; }
.ledger__body { font-size:var(--step--1); color:var(--ink-muted); margin:0; line-height:1.55; }
.ledger__sum { border-top:1px solid var(--rule); padding:1.15rem; margin:0; text-align:center; font-family:var(--mono); font-size:clamp(.68rem,1.7vw,.82rem); letter-spacing:.12em; text-transform:uppercase; }
.ledger__sum b { color:var(--blue); }

/* Cards / panels / grids */
.panel { background:white; border:1px solid var(--rule); border-radius:var(--radius); padding:clamp(1.25rem,3.5vw,2.25rem); box-shadow:0 12px 35px rgba(16,42,92,.04); }
.panel--edge-earning { border-left:4px solid var(--earning); }
.panel--edge-exit { border-left:4px solid var(--exit); }
.grid { display:grid; gap:1rem; background:transparent; border:0; }
.grid--2 { grid-template-columns:repeat(auto-fit,minmax(17rem,1fr)); }
.grid--3 { grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); }
.grid > * { background:white; border:1px solid var(--rule); border-radius:16px; padding:clamp(1.2rem,3vw,1.8rem); }
.stack > * + * { margin-top:1.5rem; } .stack--tight > * + * { margin-top:.75rem; }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:46px; font-size:.83rem; font-weight:600; letter-spacing:.01em; padding:.78rem 1.25rem; border:1px solid var(--navy); border-radius:999px; background:var(--navy); color:white; text-decoration:none; cursor:pointer; transition:transform .18s ease, background .18s ease, border-color .18s ease; }
.btn:hover { background:var(--blue); border-color:var(--blue); color:white; transform:translateY(-1px); }
.btn--ghost { background:transparent; color:var(--navy); }
.btn--ghost:hover { color:white; }
.btn--light { background:white; color:var(--navy); border-color:white; }
.btn--light:hover { background:#EAF0FC; border-color:#EAF0FC; color:var(--navy); }

/* Forms */
.field { display:block; margin-bottom:1rem; }
.field__label { display:block; font-family:var(--mono); font-size:.67rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:.45rem; }
.field__label--light { color:#C8D1E1; }
.field__hint { font-size:.78rem; color:var(--ink-muted); margin:.5rem 0 0; }
.field__hint--light { color:#9EABC1; }
input[type="text"], input[type="email"], input[type="number"], select, textarea { width:100%; font-family:var(--body); font-size:1rem; padding:.82rem .95rem; background:#fff; border:1px solid #C9D2E1; border-radius:10px; color:var(--ink); box-shadow:0 1px 2px rgba(16,24,40,.03); }
input[type="number"] { font-family:var(--mono); }
input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible, button:focus-visible { outline:3px solid rgba(29,86,198,.22); outline-offset:2px; border-color:var(--blue-2); }
textarea { min-height:9rem; resize:vertical; } .hp { position:absolute; left:-9999px; }

/* Calculator */
.calc { border:1px solid var(--rule); background:white; border-radius:var(--radius); padding:clamp(1.3rem,3.5vw,2.2rem); box-shadow:0 16px 42px rgba(16,42,92,.05); }
.calc--home { max-width:58rem; }
.calc__row { display:grid; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); gap:1rem; }
.calc__out { margin-top:1.7rem; padding-top:1.35rem; border-top:1px solid var(--rule-soft); display:flex; align-items:baseline; gap:.8rem; flex-wrap:wrap; }
.calc__num { font-family:var(--mono); font-size:clamp(2.4rem,8vw,4.2rem); line-height:1; font-weight:500; color:var(--blue); font-variant-numeric:tabular-nums; }
.calc__unit { font-family:var(--mono); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-muted); }
.calc__read { margin-top:1rem; font-size:var(--step--1); color:var(--ink-muted); max-width:36rem; }
.meter { display:flex; gap:4px; margin-top:1rem; }
.meter__seg { height:8px; flex:1; background:var(--rule-soft); border-radius:99px; }
.meter__seg.is-on { background:var(--exit); } .meter__seg.is-on-earning { background:var(--earning); }
.q { border-top:1px solid var(--rule-soft); padding-block:1.4rem; } .q:first-of-type { border-top:0; }
.q__prompt { font-family:var(--display); font-size:var(--step-1); margin:0 0 .9rem; line-height:1.25; }
.opts { display:grid; gap:.55rem; } .opt { display:flex; gap:.75rem; align-items:flex-start; cursor:pointer; font-size:var(--step--1); line-height:1.5; }
.opt input { margin-top:.35rem; accent-color:var(--blue); flex:none; }

/* Lists / writing */
.list-plain { list-style:none; padding:0; margin:0; }
.list-plain li { padding-block:.95rem; border-top:1px solid var(--rule-soft); } .list-plain li:first-child { border-top:0; }
.entry { display:block; text-decoration:none; padding:1.55rem 0; border-top:1px solid var(--rule-soft); }
.entry:first-of-type { border-top:0; }
.entry__meta { font-family:var(--mono); font-size:.66rem; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-muted); }
.entry__title { font-family:var(--display); font-size:var(--step-2); margin:.45rem 0 .35rem; line-height:1.15; }
.entry:hover .entry__title { color:var(--blue); }
.entry__blurb { margin:0; color:var(--ink-muted); font-size:var(--step--1); max-width:42rem; }
.prose { max-width:var(--measure); }
.prose h2 { font-size:var(--step-2); margin-top:2.5em; }
.prose h3 { font-size:var(--step-1); margin-top:2em; }
.prose blockquote { margin:2.2rem 0; padding:1.4rem 0 1.4rem 1.5rem; border-left:3px solid var(--blue); font-family:var(--display); font-size:var(--step-2); line-height:1.35; color:var(--navy); }
.prose ul, .prose ol { padding-left:1.2rem; } .prose li { margin-bottom:.5em; }
.pull { font-family:var(--display); font-size:var(--step-2); line-height:1.28; border-block:1px solid var(--rule); padding-block:1.6rem; margin-block:2.5rem; text-wrap:balance; color:var(--navy); }

/* Footer */
.foot { background:#08142B; color:white; padding-block:clamp(3rem,6vw,4.5rem); font-size:var(--step--1); }
.foot__top { display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; padding-bottom:2rem; border-bottom:1px solid rgba(255,255,255,.14); margin-bottom:2.25rem; }
.foot__brand { font-family:var(--display); font-size:1.6rem; text-decoration:none; }
.foot__top p { margin:0; color:#AAB5C8; text-align:right; }
.foot__grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); gap:2rem; }
.foot__head { font-family:var(--mono); font-size:.64rem; letter-spacing:.13em; text-transform:uppercase; color:#8392AA; margin:0 0 .85rem; }
.foot a { display:block; padding-block:.22rem; text-decoration:none; color:#C8D1E1; }
.foot a:hover { color:white; }
.foot__legal { margin-top:2.6rem; padding-top:1.6rem; border-top:1px solid rgba(255,255,255,.12); color:#8392AA; font-size:.74rem; max-width:50rem; }

.flow-cta { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:1.8rem; }
.hide { display:none !important; }

@media (max-width: 58rem) {
  .wordmark__tag { display:none; }
  .nav-toggle { display:flex; }
  .nav { position:absolute; top:calc(100% + 1px); left:var(--gutter); right:var(--gutter); display:none; flex-direction:column; align-items:stretch; gap:0; background:white; border:1px solid var(--rule); border-radius:16px; padding:.6rem; box-shadow:var(--shadow); }
  .nav.is-open { display:flex; }
  .nav a { padding:.78rem .85rem; border-radius:10px; }
  .nav__cta { text-align:center; margin-top:.35rem; }
  .intro-grid, .section-head, .newsletter-band, .about-grid, .story-grid { grid-template-columns:1fr; }
  .feature-grid { grid-template-columns:1fr; }
  .feature-card { min-height:19rem; }
  .story-aside { position:static; max-width:24rem; }
  .about-hero__copy h1 { max-width:16ch; }
  .portrait-card { max-width:34rem; transform:none; }
}

@media (max-width: 38rem) {
  .masthead__inner { min-height:68px; }
  .hero-visual { padding-top:.65rem; }
  .wrap--wide { padding-inline:.65rem; }
  .framework-figure { border-radius:14px; }
  .foot__top { align-items:flex-start; flex-direction:column; }
  .foot__top p { text-align:left; }
  .ledger__row { grid-template-columns:1fr; }
  .ledger__op { border-inline:0; border-block:1px solid var(--rule); padding-block:.5rem; }
  .btn { width:auto; }
}

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