/* ettebiz.ai — shared design system */
:root{
  --navy:#0B2545;
  --navy-2:#0f2f57;
  --navy-3:#14396b;
  --blue:#1F6FEB;
  --blue-deep:#1455BF;
  --sky:#7FB0E8;
  --green:#3FA45B;
  --off-white:#F4F6F9;
  --ink-muted:rgba(244,246,249,.68);
  --ink-faint:rgba(244,246,249,.46);
  --rule:rgba(244,246,249,.2);
  --font-display:"Fraunces",Georgia,serif;
  --font-body:"Libre Franklin",-apple-system,BlinkMacSystemFont,sans-serif;
  --font-mono:ui-monospace,"Cascadia Mono",Consolas,"SF Mono",monospace;
  --measure:42em;
}
*{box-sizing:border-box;}
html{height:100%;scroll-behavior:smooth;}
body{
  margin:0;min-height:100%;
  background:var(--navy);color:var(--off-white);
  font-family:var(--font-body);font-size:1.0625rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--sky);text-decoration:none;border-bottom:1px solid var(--rule);}
a:hover{border-color:var(--sky);}
a:focus-visible,button:focus-visible{outline:2px solid var(--sky);outline-offset:3px;border-radius:2px;}
h1,h2,h3,blockquote{font-family:var(--font-display);text-wrap:balance;color:var(--off-white);}
img{max-width:100%;display:block;}
ul{margin:0;padding:0;}

/* ── Masthead / nav ── */
.masthead{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem 1.5rem;
  padding:1.15rem clamp(1.5rem,5vw,4rem);border-bottom:1px solid var(--rule);
  position:sticky;top:0;background:rgba(11,37,69,.92);backdrop-filter:blur(10px);z-index:50;
}
.masthead .wordmark{font-family:var(--font-display);font-weight:600;font-size:1.1875rem;letter-spacing:.01em;color:var(--off-white);border-bottom:none;}
.masthead .wordmark .tld{font-style:italic;font-weight:500;color:var(--sky);}
.site-nav{display:flex;flex-wrap:wrap;align-items:center;gap:1.75rem;}
.site-nav a{color:var(--ink-muted);border-bottom:none;font-size:.92rem;font-weight:500;}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--off-white);}
.site-nav .btn{margin-left:.25rem;}

/* ── Buttons ── */
.btn{
  display:inline-block;padding:.8125rem 1.625rem;border-radius:8px;
  background:var(--blue);color:#fff;font-weight:600;font-size:1rem;
  text-decoration:none;border:none;border-bottom:none;cursor:pointer;
  transition:background-color 160ms ease;
}
.btn:hover{background:var(--blue-deep);border-color:transparent;}
.btn-outline{background:transparent;border:1px solid var(--rule);color:var(--off-white);}
.btn-outline:hover{border-color:var(--sky);background:rgba(127,176,232,.08);}
.plain-link{font-weight:500;text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:2px;}
.plain-link:hover{border-color:var(--sky);}

/* ── Sections ── */
main{min-width:0;}
section{padding:5.5rem clamp(1.5rem,5vw,4rem);border-bottom:1px solid var(--rule);scroll-margin-top:5rem;}
section .inner{max-width:var(--measure);margin:0 auto;}
section .inner.wide{max-width:74rem;}
.eyebrow{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sky);margin:0 0 .9rem;}
h2.title{font-weight:600;font-size:clamp(1.9rem,3.4vw,2.6rem);line-height:1.15;letter-spacing:-.01em;margin:0 0 1.6rem;}
p{margin:0 0 1.15rem;}
.lede{font-size:1.16rem;color:var(--off-white);max-width:44rem;}

/* ── Hero ── */
.hero{padding:clamp(4.5rem,10vh,7rem) clamp(1.5rem,5vw,4rem) 4rem;}
.hero .inner{max-width:52rem;}
.hero h1{font-weight:600;font-size:clamp(2.4rem,5.6vw,4rem);line-height:1.08;letter-spacing:-.015em;margin:0 0 1.4rem;}
.hero h1 .blue{color:var(--sky);font-style:italic;}
.hero .deck{font-size:clamp(1.05rem,1.5vw,1.24rem);color:var(--ink-muted);max-width:38em;margin:0 0 1.9rem;text-wrap:pretty;}
.hero .actions{display:flex;flex-wrap:wrap;gap:1rem 1.25rem;align-items:center;margin-bottom:1rem;}
.hero .fineprint{font-size:.92rem;color:var(--ink-faint);margin-top:1.25rem;}

/* ── Path / tier cards ── */
.tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:2.2rem;}
.tier-card{border:1px solid var(--rule);background:var(--navy-2);padding:1.9rem 1.8rem;position:relative;}
.tier-card--featured{border-color:var(--blue);background:linear-gradient(180deg,rgba(31,111,235,.14),rgba(31,111,235,.03));}
.tier-kicker{display:inline-block;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sky);margin-bottom:.85rem;}
.tier-card--featured .tier-kicker{color:#fff;background:var(--blue);padding:.2rem .6rem;border-radius:99px;}
.tier-card h3{font-size:1.4rem;margin:0 0 .7rem;}
.tier-card p{font-size:.95rem;color:var(--ink-muted);margin:0 0 1rem;}
.tier-card ul{list-style:none;display:grid;gap:.55rem;margin-bottom:1rem;}
.tier-card ul li{position:relative;padding-left:1.1rem;font-size:.9rem;color:var(--off-white);line-height:1.4;}
.tier-card ul li::before{content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;border-radius:2px;background:var(--sky);}
.tier-note{font-size:.82rem;color:var(--ink-faint);line-height:1.5;margin:0;}

/* ── Stat ledger ── */
.ledger{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin:2.2rem 0;}
.ledger .cell{background:var(--navy-2);padding:1.5rem 1.4rem;}
.stat-value{font-family:var(--font-display);font-weight:700;font-size:2.2rem;color:var(--sky);font-variant-numeric:tabular-nums;line-height:1.05;display:block;}
.stat-label{display:block;font-size:.87rem;color:var(--ink-muted);margin-top:.5rem;line-height:1.4;}

/* ── Divider list / checklist ── */
.divider-list{list-style:none;margin:1.6rem 0;padding:0;border-top:1px solid var(--rule);}
.divider-list li{padding:1.1rem 0;border-bottom:1px solid var(--rule);}
.divider-list li strong{display:block;margin-bottom:.25rem;color:var(--off-white);}
.divider-list li span{color:var(--ink-muted);font-size:.94rem;}

.check-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem 1.6rem;margin:2rem 0 0;list-style:none;}
.check-grid li{display:grid;grid-template-columns:20px 1fr;gap:.7rem;align-items:start;}
.check-grid li::before{content:"";width:14px;height:18px;margin-top:.15rem;border-radius:3px;border:2px solid var(--sky);background:linear-gradient(180deg,transparent 58%,rgba(127,176,232,.22) 58%);}
.check-grid strong{display:block;color:var(--off-white);font-size:.95rem;}
.check-grid span{color:var(--ink-muted);font-size:.84rem;line-height:1.4;}

/* ── Process rail ── */
.rail{display:grid;grid-template-columns:repeat(6,1fr);gap:1.4rem;margin-top:2.4rem;}
.rail-step{position:relative;padding-top:.5rem;}
.rail-num{width:2.1rem;height:2.1rem;border-radius:50%;display:grid;place-items:center;background:var(--blue);color:#fff;font-weight:700;font-family:var(--font-mono);font-size:.9rem;margin-bottom:.9rem;}
.rail-step h3{font-size:.98rem;font-family:var(--font-body);font-weight:700;margin:0 0 .35rem;color:var(--off-white);}
.rail-step p{font-size:.82rem;color:var(--ink-muted);line-height:1.45;margin:0;}

/* ── Maturity comparison ── */
.maturity{display:grid;grid-template-columns:.85fr 1.25fr;gap:1.4rem;margin-top:2rem;align-items:stretch;}
.maturity-col{padding:1.7rem;border-radius:10px;border:1px solid var(--rule);background:var(--navy-2);}
.maturity-col--ette{border-color:var(--blue);background:linear-gradient(180deg,rgba(31,111,235,.16),rgba(31,111,235,.04));}
.maturity-label{display:inline-block;font-family:var(--font-mono);font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sky);margin-bottom:.8rem;}
.maturity-col--ette .maturity-label{color:#fff;background:var(--blue);padding:.2rem .6rem;border-radius:99px;}
.maturity-col h3{font-size:1.2rem;margin:0 0 .9rem;}
.maturity-list{list-style:none;display:grid;gap:.55rem;}
.maturity-col--ette .maturity-list{grid-template-columns:1fr 1fr;gap:.55rem 1.3rem;}
.maturity-list li{position:relative;padding-left:1.05rem;font-size:.87rem;color:var(--ink-muted);line-height:1.4;}
.maturity-list li::before{content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;border-radius:2px;background:var(--sky);}

/* ── Pull quote / plaque ── */
.plaque{border:1px solid var(--rule);background:var(--navy-2);padding:2.1rem 2rem;margin:2.2rem 0;position:relative;}
.plaque::before{content:"";position:absolute;top:0;left:0;width:3px;height:100%;background:var(--blue);}
.plaque blockquote{font-size:1.2rem;line-height:1.5;margin:0 0 .9rem;font-style:italic;font-weight:500;}
.plaque cite{font-family:var(--font-mono);font-size:.72rem;color:var(--ink-faint);font-style:normal;letter-spacing:.02em;}

/* ── Cards (light, on-dark callout) ── */
.card-light{background:var(--off-white);color:var(--navy);border:1px solid var(--rule);padding:1.8rem 1.9rem;margin:1.8rem 0;}
.card-light h3{color:var(--navy);font-size:1.1rem;margin:0 0 .7rem;}
.card-light a{color:var(--blue-deep);border-bottom-color:rgba(20,85,191,.35);}
.card-light .eyebrow{color:var(--blue-deep);}
.card-light p{color:rgba(11,37,69,.82);}

/* ── CTA band ── */
.cta-band{background:var(--navy-2);text-align:center;}
.cta-band h2{max-width:38rem;margin-left:auto;margin-right:auto;}
.cta-band .actions{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem 1.25rem;margin-top:1.8rem;}

/* ── Footer ── */
.page-footer{border-top:1px solid var(--rule);padding:1.75rem clamp(1.5rem,5vw,4rem);display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 1.5rem;font-size:.875rem;color:var(--ink-muted);}
.page-footer a{color:var(--ink-muted);border-bottom:none;}
.page-footer a:hover{color:var(--sky);}
.page-footer .foot-links{display:flex;flex-wrap:wrap;gap:1.25rem;}

/* ── Case study: meta row, model rail, timeline, example/outcome/participant grids ── */
.hero-meta{display:flex;flex-wrap:wrap;gap:.75rem 1.75rem;margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--rule);font-size:.85rem;color:var(--ink-faint);}

.rail--5{grid-template-columns:repeat(5,1fr);}

.timeline{border-top:1px solid var(--rule);margin-top:1.6rem;}
.timeline-item{display:grid;grid-template-columns:110px 1fr;gap:1.2rem;padding:1rem 0;border-bottom:1px solid var(--rule);}
.timeline-date{font-family:var(--font-mono);font-size:.78rem;color:var(--sky);}
.timeline-title{font-weight:700;margin-bottom:.2rem;color:var(--off-white);}
.timeline-desc{color:var(--ink-muted);font-size:.87rem;}

.example-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem;margin-top:2rem;}
.example-card{border:1px solid var(--rule);background:var(--navy-2);padding:1.6rem;}
.example-card--featured{border-color:var(--blue);background:linear-gradient(180deg,rgba(31,111,235,.14),rgba(31,111,235,.03));}
.example-cat{font-family:var(--font-mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;color:var(--sky);margin-bottom:.6rem;display:block;}
.example-card h3{font-size:1.12rem;margin:0 0 .7rem;}
.example-card p{font-size:.9rem;color:var(--ink-muted);margin:0 0 1rem;}
.example-result{font-size:.84rem;font-weight:700;color:var(--off-white);border-top:1px solid var(--rule);padding-top:.8rem;margin:0;}

.outcome-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2rem;}
.outcome-card{padding:1.5rem;border:1px solid var(--rule);}
.outcome-card h3{font-size:1.02rem;margin:0 0 .6rem;}
.outcome-card p{font-size:.87rem;color:var(--ink-muted);margin:0;}

.participant-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem;margin-top:2rem;}
.participant-card{border:1px solid var(--rule);background:var(--navy-2);padding:1.5rem 1.6rem;}
.participant-name{font-weight:700;font-size:1.02rem;color:var(--off-white);}
.participant-role{font-size:.8rem;color:var(--ink-faint);margin-bottom:.8rem;}
.participant-contrib{font-size:.87rem;color:var(--ink-muted);margin:0 0 .9rem;}
.participant-quote{font-size:.85rem;font-style:italic;color:var(--sky);border-left:2px solid var(--blue);padding-left:.8rem;margin:0;}

/* ── Readiness check ── */
.readiness-panel{background:var(--off-white);border-radius:16px;padding:clamp(1.5rem,4vw,2.75rem);}
.readiness-workspace{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:2rem;align-items:start;margin-top:0;}
.score-card{border:1px solid rgba(11,37,69,.12);background:#fff;box-shadow:0 12px 32px rgba(11,37,69,.08);padding:1.7rem 1.8rem;margin-bottom:1.4rem;border-radius:10px;}
.score-card legend{font-family:var(--font-display);font-size:1.3rem;font-weight:600;color:var(--navy);padding:0;margin:0 0 .3rem;}
.readiness-question{padding:1.1rem 0;border-top:1px solid rgba(11,37,69,.1);}
.readiness-question:first-of-type{border-top:0;padding-top:1rem;}
.readiness-question p{color:rgba(11,37,69,.78);font-size:.94rem;margin:0 0 .8rem;}
.score-options{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;}
.score-options label{cursor:pointer;}
.score-options input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.score-options span{display:grid;place-items:center;min-height:54px;padding:.5rem;border-radius:8px;border:1px solid rgba(11,37,69,.18);background:var(--off-white);color:var(--navy);font-weight:700;text-align:center;font-size:.88rem;transition:border-color 160ms ease,background 160ms ease,color 160ms ease,transform 160ms ease;}
.score-options small{display:block;margin-top:.15rem;color:rgba(11,37,69,.5);font-size:.72rem;font-weight:600;}
.score-options label:hover span{border-color:var(--blue);transform:translateY(-1px);}
.score-options input:focus-visible+span{outline:2px solid var(--blue-deep);outline-offset:2px;}
.score-options input:checked+span{background:var(--navy);border-color:var(--navy);color:#fff;}
.score-options input:checked+span small{color:rgba(255,255,255,.8);}

.readiness-result{position:sticky;top:5.5rem;padding:1.8rem;border-radius:12px;background:var(--navy);border:1px solid var(--rule);box-shadow:0 20px 50px rgba(11,37,69,.28);}
.readiness-total{display:flex;align-items:baseline;gap:.5rem;margin:.4rem 0 1rem;font-family:var(--font-display);font-size:2.6rem;color:var(--off-white);letter-spacing:-.02em;}
.readiness-total small{font-family:var(--font-body);font-size:1rem;font-weight:700;color:var(--sky);}
.readiness-progress{height:8px;border-radius:99px;overflow:hidden;background:rgba(244,246,249,.14);margin-bottom:1rem;}
.readiness-progress span{display:block;height:100%;width:0;background:var(--blue);border-radius:inherit;transition:width 200ms ease;}
.readiness-categories{display:grid;gap:.6rem;margin-bottom:1.2rem;}
.readiness-categories div{display:flex;justify-content:space-between;padding:.55rem .7rem;border-radius:7px;background:rgba(244,246,249,.06);font-size:.85rem;color:var(--ink-muted);}
.readiness-categories strong{color:var(--sky);}
.readiness-result h3{font-size:1.2rem;margin:0 0 .6rem;}
.readiness-result p{font-size:.9rem;color:var(--ink-muted);}
.readiness-gaps{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--rule);}
.readiness-gaps h4{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sky);margin:0 0 .7rem;}
.readiness-gaps ul{list-style:none;display:grid;gap:.55rem;}
.readiness-gaps li{position:relative;padding-left:1rem;font-size:.82rem;color:var(--ink-muted);line-height:1.4;}
.readiness-gaps li::before{content:"";position:absolute;left:0;top:.45em;width:5px;height:5px;border-radius:50%;background:var(--sky);}
.readiness-actions{margin-top:1.3rem;display:flex;flex-direction:column;gap:.6rem;}
.readiness-actions .btn,.readiness-actions .btn-outline{text-align:center;width:100%;}
.readiness-actions button{width:100%;font:inherit;}

@media (max-width:900px){
  .tier-grid{grid-template-columns:1fr;}
  .maturity{grid-template-columns:1fr;}
  .rail{grid-template-columns:repeat(3,1fr);}
  .rail--5{grid-template-columns:repeat(2,1fr);}
  .check-grid{grid-template-columns:1fr;}
  .example-grid,.outcome-grid,.participant-grid{grid-template-columns:1fr;}
  .ledger{grid-template-columns:1fr 1fr;}
  .readiness-workspace{grid-template-columns:1fr;}
  .readiness-result{position:static;}
}
@media (max-width:520px){
  .score-options{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .rail{grid-template-columns:1fr 1fr;}
  .ledger{grid-template-columns:1fr 1fr;}
  .site-nav{gap:1rem;}
  .timeline-item{grid-template-columns:1fr;gap:.3rem;}
}

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