@font-face {
  font-family:Pretendard;
  src:url("assets/fonts/PretendardVariable.woff2") format("woff2");
  font-style:normal;
  font-weight:100 900;
  font-display:swap
}
:root {
  --ink:#12251f;
  --lime:#d7ff63;
  --cream:#f5f7f0;
  --paper:#fff;
  --muted:#617068;
  --line:#d9e0d6;
  --font:Pretendard,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  color-scheme:light
}
* { box-sizing:border-box }
html { scroll-behavior:smooth; scroll-padding-top:76px }
body {
  min-width:320px;
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font);
  font-size:16px;
  line-height:1.55;
  word-break:keep-all;
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased
}
h1,h2,h3,p,figure,ol,ul,dl,dd { margin:0 }
ol,ul { padding:0; list-style:none }
a { color:inherit; text-decoration:none }
img { display:block; max-width:100%; height:auto }
button { font:inherit }
button,a { touch-action:manipulation }
[hidden] { display:none!important }
.shell { width:min(1320px,calc(100% - 96px)); margin-inline:auto }
.skip-link {
  position:fixed;
  z-index:100;
  left:16px;
  top:0;
  transform:translateY(-120%);
  padding:10px 16px;
  border-radius:99px;
  background:var(--lime);
  font-weight:800
}
.skip-link:focus { top:12px; transform:none }
a:focus-visible,button:focus-visible { outline:3px solid #356944; outline-offset:4px }
.featured a:focus-visible,.contact-panel a:focus-visible { outline-color:var(--lime) }

/* Header */
.site-header {
  position:sticky;
  z-index:20;
  top:0;
  border-bottom:1px solid rgba(18,37,31,.1);
  background:rgba(245,247,240,.93);
  backdrop-filter:blur(14px)
}
.header-inner { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:20px }
.brand-link { display:block; width:172px; flex:none }
.brand-link img { width:100% }
.site-nav { display:flex; align-items:center; gap:28px; flex:none; font-size:14px; font-weight:680 }
.site-nav>a:not(.nav-cta) { padding:12px 0; color:var(--muted) }
.site-nav>a:not(.nav-cta):hover { color:var(--ink) }
.nav-cta {
  min-height:44px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 18px;
  border-radius:99px;
  background:var(--ink);
  color:#fff;
  white-space:nowrap;
  transition:background .18s,color .18s
}
.nav-cta:hover { background:var(--lime); color:var(--ink) }
.nav-cta span { font-size:17px; line-height:1 }

/* Shared type */
.section-index,.eyebrow { font-size:11px; font-weight:800; line-height:1.25; letter-spacing:.1em }
.eyebrow { color:var(--muted); font-size:10px }
.section-index { margin-bottom:20px; color:var(--muted) }
.section-heading { max-width:790px }
.section-heading h2,.contact-copy h2 {
  font-size:clamp(39px,4vw,61px);
  line-height:1.13;
  letter-spacing:-.065em;
  font-weight:760
}
.section-heading>p:last-child { margin-top:20px; color:var(--muted); font-size:17px }
.split-heading {
  max-width:none;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,.62fr);
  gap:70px;
  align-items:end
}
.section-intro { padding-bottom:4px; color:var(--muted); font-size:17px; line-height:1.65 }
.button {
  min-height:54px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:28px;
  padding:13px 26px;
  border-radius:99px;
  font-size:15px;
  font-weight:750;
  transition:transform .18s,background .18s,color .18s
}
.button span { font-size:18px; font-weight:500 }
.button-primary { background:var(--ink); color:#fff }
.button-primary:hover { background:var(--lime); color:var(--ink); transform:translateY(-2px) }
.button-lime { margin-top:34px; background:var(--lime); color:var(--ink) }
.button-lime:hover { transform:translateY(-2px); background:#fff }

/* Hero */
.hero { padding:34px 0 24px }
.hero-grid {
  min-height:590px;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(400px,.85fr);
  align-items:center;
  gap:clamp(48px,7vw,120px);
  padding:35px 0 48px
}
.hero-copy,.hero-demo,.phone,.market-copy,.market-marquee,.flow-step,.comparison-card,.contact-copy,.onboarding-list,.business-info { min-width:0 }
.hero h1 { font-size:clamp(60px,6.35vw,94px); line-height:1.055; letter-spacing:-.075em; font-weight:780 }
.hero-lead { margin-top:30px; color:var(--muted); font-size:clamp(18px,1.5vw,22px); line-height:1.5; letter-spacing:-.035em }
.hero-lead strong { color:var(--ink); font-weight:750 }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:24px; margin-top:34px }
.hero-demo { width:min(100%,470px); justify-self:end }
.hero-demo figcaption { margin-top:16px; color:var(--muted); font-size:12px; text-align:center }

/* Kakao phone mockup (hero) */
.phone {
  width:min(100%,318px);
  margin:auto;
  padding:9px;
  border-radius:46px;
  background:#101418;
  box-shadow:0 0 0 1.5px #3a4046,0 30px 70px rgba(18,37,31,.28),inset 0 0 0 1px #000
}
.phone-screen {
  position:relative;
  display:flex;
  flex-direction:column;
  height:640px;
  overflow:hidden;
  border-radius:38px;
  background:#b2c7d9;
  color:#1d2a36;
  font-size:12.5px;
  line-height:1.4;
  letter-spacing:-.01em;
  -webkit-user-select:none;
  user-select:none
}
.status-bar { position:relative; display:flex; align-items:center; justify-content:space-between; height:46px; padding:8px 24px 0 28px }
.sb-time { font-size:14px; font-weight:700; letter-spacing:-.02em; color:#000 }
.sb-island { position:absolute; top:9px; left:50%; width:96px; height:28px; transform:translateX(-50%); border-radius:99px; background:#000 }
.sb-icons { display:flex; align-items:center; gap:5px }
.kakao-header { display:grid; grid-template-columns:32px 1fr 52px; align-items:center; height:44px; padding:0 12px }
.kh-back { justify-self:start }
.kh-title { text-align:center; font-size:15px; font-weight:750; letter-spacing:-.02em; color:#1d2a36 }
.kh-actions { display:flex; justify-content:flex-end; gap:14px }
.kakao-body { display:flex; flex:1; flex-direction:column; gap:10px; min-height:0; padding:12px 10px 14px; overflow-y:auto; overflow-x:hidden; scrollbar-width:none; -webkit-overflow-scrolling:touch }
.kakao-body::-webkit-scrollbar { display:none }
.kakao-date { align-self:center; margin-top:auto; margin-bottom:4px; flex:none; padding:4px 11px; border-radius:99px; background:rgba(0,0,0,.14); color:#fff; font-size:10px; font-weight:600 }
.kmsg { display:flex; flex:none; gap:7px; align-items:flex-start }
.kmsg.cont { margin-top:-4px; padding-left:44px }
.kmsg.out { justify-content:flex-end }
.kavatar { width:37px; height:37px; flex:none; border-radius:38%; object-fit:cover }
.kcol { display:grid; gap:4px; min-width:0; width:calc(100% - 44px) }
.kname { color:#3f4d5a; font-size:11px; font-weight:600 }
.krow { display:flex; align-items:flex-end; gap:5px }
.kbubble {
  position:relative;
  max-width:calc(100% - 46px);
  padding:8px 10px;
  border-radius:12px;
  background:#fff;
  color:#111;
  font-size:12.5px;
  line-height:1.45;
  word-break:keep-all;
  overflow-wrap:break-word;
  box-shadow:0 1px 1px rgba(0,0,0,.05)
}
.kmsg.in .kbubble::before { content:""; position:absolute; top:7px; left:-5px; border-style:solid; border-width:0 6px 7px 0; border-color:transparent #fff transparent transparent }
.kmsg.cont .kbubble::before { display:none }
.kmsg.cont .kcol { width:100% }
.kmsg.out .krow { max-width:calc(100% - 24px) }
.kmsg.out .kbubble { max-width:none; background:#fee500; color:#111 }
.kmsg.out .kbubble::before { content:""; position:absolute; top:7px; right:-5px; border-style:solid; border-width:0 0 7px 6px; border-color:transparent transparent transparent #fee500 }
.ktime { flex:none; padding-bottom:2px; color:#5f6f7f; font-size:9.5px; white-space:nowrap }
.kakao-input { display:flex; align-items:center; gap:10px; height:50px; padding:0 14px; background:#fff }
.ki-plus { display:grid; place-items:center; width:22px; height:22px }
.ki-field { flex:1; height:32px; border-radius:16px; background:#f5f6f7 }
.ki-hash { color:#3a4650; font-size:17px; font-weight:700 }
.ki-field { display:flex; align-items:center; padding:0 12px; overflow:hidden; white-space:nowrap; font-size:12.5px; color:#111 }
.ki-text { flex:none }
.ki-text::after { content:""; display:inline-block; width:1.5px; height:14px; margin-left:1px; background:#1d2a36; vertical-align:-2px; opacity:0 }
.is-typing .ki-text::after { opacity:1; animation:kcaret 1s steps(1) infinite }
@keyframes kcaret { 50% { opacity:0 } }
.ki-send { display:none; place-items:center; width:28px; height:28px; border-radius:50%; background:#fee500 }
.is-typing .ki-hash { display:none }
.is-typing .ki-send { display:grid }
/* Live chat sequencing (JS adds .is-live; without JS everything stays visible) */
.is-live .kmsg:not(.is-shown) { display:none }
.kmsg.is-shown { animation:kpop .28s cubic-bezier(.2,.8,.3,1) }
@keyframes kpop { from { opacity:0; transform:translateY(8px) scale(.97) } }
.ktyping { display:none }
.ktyping.is-shown { display:flex }
.ktyping.cont { padding-left:44px }
.ktyping.cont .kavatar,.ktyping.cont .kname { display:none }
.kdots { display:flex; align-items:center; gap:4px; min-height:34px; padding:8px 12px }
.kdots i { width:6px; height:6px; border-radius:50%; background:#9aa7b3; animation:kdot 1s ease-in-out infinite }
.kdots i:nth-child(2) { animation-delay:.15s }
.kdots i:nth-child(3) { animation-delay:.3s }
@keyframes kdot { 0%,60%,100% { transform:translateY(0); opacity:.5 } 30% { transform:translateY(-4px); opacity:1 } }
.kakao-body { transition:opacity .3s }
.home-indicator { height:22px; background:#fff }
.home-indicator::after { content:""; display:block; width:120px; height:5px; margin:8px auto 0; border-radius:99px; background:#111 }
.hero-demo figcaption .example-pill { display:inline-block; margin:0 6px 0 0; vertical-align:1px }
.example-pill {
  padding:3px 8px;
  border:1px solid var(--line);
  border-radius:99px;
  color:var(--muted);
  font-size:10px;
  font-weight:750;
  white-space:nowrap
}

/* Marketplace marquee */
.market-band {
  display:grid;
  grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);
  gap:24px;
  align-items:center;
  padding:14px 0;
  border-top:1px solid var(--line)
}
.market-copy { display:grid; gap:6px }
.market-copy strong { font-size:14px; letter-spacing:-.025em }
.market-marquee {
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)
}
.marquee-track { display:flex; width:max-content; gap:64px; animation:marquee 30s linear infinite }
.market-marquee:hover .marquee-track { animation-play-state:paused }
.marquee-set { display:flex; align-items:center; gap:64px; flex:none }
.marquee-set img { flex:none; width:auto; max-width:none }
.marquee-set .coupang-logo { width:145px }
.marquee-set .naver-logo { width:160px }
.marquee-set .toss-logo { width:190px }
@keyframes marquee { to { transform:translateX(calc(-50% - 32px)) } }
.market-note,.example-note { color:#647267; font-size:12px }
.market-note { margin-top:11px }

/* Workflow */
.work-section,.difference-section { padding:118px 0 }
.work-section { background:#fff }
.flow-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:64px }
.flow-step {
  position:relative;
  display:flex;
  flex-direction:column;
  padding:16px 16px 26px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--cream)
}
.flow-step::after {
  content:"→";
  position:absolute;
  z-index:2;
  top:106px;
  right:-20px;
  display:grid;
  place-items:center;
  width:26px;
  height:26px;
  border-radius:50%;
  background:var(--ink);
  color:var(--lime);
  font-size:13px;
  font-weight:800;
  line-height:1
}
.flow-step:last-child::after { display:none }
.flow-visual {
  min-height:212px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  box-shadow:0 10px 26px rgba(18,37,31,.06)
}
.flow-index { display:inline-block; margin-top:22px; color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.1em }
.flow-step h3 { margin-top:8px; font-size:19px; line-height:1.3; letter-spacing:-.045em; font-weight:760 }
.flow-step p { margin-top:10px; color:var(--muted); font-size:14px; line-height:1.65 }
.mini-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:6px;
  padding-bottom:9px;
  border-bottom:1px solid var(--line);
  color:var(--muted);
  font-size:11px;
  font-weight:750
}
.mini-head strong { color:var(--ink); font-size:12px }
.mini-row,.mini-file,.mini-check { display:flex; align-items:center; gap:9px; padding:7px 0 }
.mini-row>div,.mini-file>div,.mini-check>div { display:grid; flex:1; min-width:0; line-height:1.3 }
.mini-row b,.mini-file b,.mini-check b { font-size:12px; font-weight:720; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.mini-row small,.mini-file small,.mini-check small { margin-top:2px; color:var(--muted); font-size:10.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.mini-row img { width:30px; height:30px; flex:none; border-radius:7px; object-fit:cover }
.mini-tag { flex:none; padding:3px 7px; border:1px solid var(--line); border-radius:99px; background:var(--cream); font-size:10px; font-weight:750 }
.mini-file svg { flex:none }
.check-dot {
  display:grid;
  place-items:center;
  flex:none;
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--lime);
  font-style:normal;
  font-size:11px;
  font-weight:900
}
.mini-check>span { flex:none; font-size:12px; font-weight:800 }
.mini-check.is-pending .check-dot { background:var(--ink); color:var(--lime) }
.mini-check.is-pending>span { color:#75952a }
.mini-bubble {
  margin-top:6px;
  padding:11px 12px;
  border-radius:3px 12px 12px 12px;
  background:var(--cream);
  color:var(--muted);
  font-size:11.5px;
  line-height:1.5
}
.mini-bubble b { display:block; margin-bottom:3px; color:var(--ink); font-size:12px }
.mini-reply {
  width:max-content;
  max-width:100%;
  margin:10px 0 0 auto;
  padding:8px 11px;
  border-radius:12px 3px 12px 12px;
  background:var(--lime);
  font-size:11.5px;
  font-weight:650
}
/* A day with AutoSeller (Kakao-styled timeline) */
.day-block {
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:32px 64px;
  align-items:center;
  margin-top:64px;
  padding-top:56px;
  border-top:1px solid var(--line)
}
.day-copy h3 { margin-top:14px; font-size:clamp(24px,2.3vw,33px); line-height:1.25; letter-spacing:-.05em; font-weight:760 }
.day-copy p { margin-top:14px; color:var(--muted); font-size:15px; line-height:1.7 }
.day-legend { display:grid; gap:8px; margin-top:24px; padding-top:18px; border-top:1px solid var(--line) }
.day-legend li { display:grid; grid-template-columns:52px minmax(0,1fr); gap:10px; color:var(--muted); font-size:13px }
.day-legend b { color:var(--ink); font-variant-numeric:tabular-nums }
.day-panel {
  width:min(100%,560px);
  justify-self:end;
  overflow:hidden;
  border:1px solid #9fb3c4;
  border-radius:18px;
  background:#b2c7d9;
  color:#1d2a36;
  box-shadow:0 20px 50px rgba(18,37,31,.12);
  font-size:12.5px;
  line-height:1.4
}
.day-head { display:flex; align-items:center; justify-content:space-between; padding:16px 18px 0 }
.day-clock { font-size:22px; font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums }
.day-head .example-pill { border-color:rgba(29,42,54,.25); color:#3f4d5a }
.day-strip { position:relative; display:grid; grid-template-columns:repeat(4,1fr); margin:14px 18px 0; padding-top:16px }
.day-strip::before { content:""; position:absolute; top:5px; left:0; width:75%; height:2px; background:rgba(255,255,255,.6) }
.day-fill { position:absolute; top:5px; left:0; width:0; height:2px; background:var(--ink); transition:width .6s ease }
.day-strip li { position:relative; display:grid; gap:1px; color:#5a6a79; font-size:10.5px }
.day-strip li::before { content:""; position:absolute; top:-15px; left:0; width:8px; height:8px; border:2px solid #9fb3c4; border-radius:50%; background:#fff }
.day-strip li.is-active { color:var(--ink) }
.day-strip li.is-active::before { border-color:var(--ink); background:var(--ink) }
.day-strip b { font-size:12px; font-variant-numeric:tabular-nums }
.day-chat { display:flex; flex-direction:column; gap:12px; height:560px; padding:16px 14px 18px; overflow-x:hidden; overflow-y:auto; overscroll-behavior-y:contain; scrollbar-width:thin }
.day-chat>.kmsg:first-child { margin-top:auto }
.day-chat .kcol { gap:5px }
.day-chat .kbubble { max-width:min(calc(100% - 46px),380px) }
.kfile { display:flex; align-items:center; gap:10px; width:max-content; max-width:min(calc(100% - 46px),380px); padding:10px 12px }
.kfile-icon { flex:none }
.kfile>div { display:grid; min-width:0 }
.kfile b { overflow:hidden; font-size:12px; font-weight:720; text-overflow:ellipsis; white-space:nowrap }
.kfile small { margin-top:2px; color:#6b7b8a; font-size:10px }
.kfile-save { flex:none; margin-left:4px; padding:5px 9px; border-radius:6px; background:#f1f3f5; font-size:11px; font-weight:700 }
.growth-band {
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:18px 64px;
  align-items:start;
  margin-top:60px;
  padding-top:30px;
  border-top:1px solid var(--line)
}
.growth-copy { display:grid; gap:10px }
.growth-copy strong { font-size:23px; line-height:1.3; letter-spacing:-.045em }
.growth-body { color:var(--muted); font-size:15px; line-height:1.7 }
.growth-body p+p { margin-top:14px }
.growth-line { grid-column:1/-1; padding-top:8px; font-size:18px; letter-spacing:-.04em }
.example-note { margin-top:26px }

/* Comparison */
.difference-section { border-top:1px solid var(--line) }
.comparison-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; align-items:stretch; margin-top:59px }
.comparison-card { display:flex; flex-direction:column; padding:30px; background:#fff; border:1px solid var(--line) }
.option-label { color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.08em }
.comparison-card h3 { margin-top:22px; font-size:26px; line-height:1.28; letter-spacing:-.055em }
.cost-line { margin-top:27px; font-size:18px; font-weight:800; letter-spacing:-.035em }
.cost-line span { display:block; margin-top:5px; color:var(--muted); font-size:12px; font-weight:500; letter-spacing:-.01em; line-height:1.5 }
.comparison-card ul { margin-top:auto; padding-top:32px }
.comparison-card li {
  display:grid;
  grid-template-columns:36px minmax(0,1fr);
  gap:9px;
  padding:10px 0;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:14px;
  line-height:1.55
}
.comparison-card li span { color:var(--ink); font-size:11px; font-weight:850; letter-spacing:.04em }
.featured { border-color:var(--ink); background:var(--ink); color:#fff }
.featured-top { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px }
.featured-top img { width:126px; flex:none }
.featured-top span { color:var(--lime); font-size:11px; font-weight:800; letter-spacing:.07em }
.featured h3 { margin-top:29px }
.featured .cost-line { color:#fff }
.featured .cost-line span { color:#b6c5bb }
.featured ul { margin-top:24px }
.featured li { border-color:#3f544b; color:#d4ded6 }
.featured li span { color:var(--lime) }
.featured-link {
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:21px;
  color:var(--lime);
  font-size:13px;
  font-weight:750
}
.featured-link span { font-size:17px }
.human-ai-line {
  display:flex;
  flex-wrap:wrap;
  gap:9px 28px;
  align-items:center;
  margin-top:66px;
  padding-top:22px;
  border-top:1px solid var(--line);
  font-size:14px
}
.human-ai-line span { color:var(--muted) }
.human-ai-line strong { font-size:16px; letter-spacing:-.04em }

/* FAQ */
.faq-section { padding:118px 0; background:var(--cream); border-top:1px solid var(--line) }
.faq-grid { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:64px; align-items:start }
.faq-copy { position:sticky; top:96px }
.faq-copy h2 { font-size:clamp(39px,4vw,61px); line-height:1.13; letter-spacing:-.065em; font-weight:760 }
.faq-copy>p:not(.section-index) { margin-top:20px; color:var(--muted); font-size:17px; line-height:1.65 }
.faq-link { display:inline-flex; align-items:center; gap:10px; min-height:44px; margin-top:22px; font-size:15px; font-weight:750; color:var(--ink) }
.faq-link span { font-size:19px; line-height:1 }
.faq-link:hover { color:var(--muted) }
.faq-list { border-top:1px solid var(--ink); min-width:0 }
.faq-item { border-bottom:1px solid var(--line) }
.faq-item summary {
  display:grid;
  grid-template-columns:minmax(0,1fr) 28px;
  gap:20px;
  align-items:center;
  padding:22px 0;
  cursor:pointer;
  list-style:none
}
.faq-item summary::-webkit-details-marker { display:none }
.faq-item summary::after {
  content:"";
  width:28px;
  height:28px;
  border:1px solid var(--ink);
  border-radius:50%;
  background:
    linear-gradient(var(--ink),var(--ink)) center/12px 1.5px no-repeat,
    linear-gradient(var(--ink),var(--ink)) center/1.5px 12px no-repeat;
  transition:transform .25s ease,background-color .25s ease
}
.faq-item[open] summary::after {
  transform:rotate(45deg);
  background-color:var(--lime)
}
.faq-item summary:hover h3 { color:var(--muted) }
.faq-item summary:focus-visible { outline:2px solid var(--ink); outline-offset:4px }
.faq-item h3 { font-size:19px; line-height:1.4; letter-spacing:-.04em; font-weight:720; transition:color .2s }
.faq-answer { padding:0 48px 26px 0; color:var(--muted); font-size:16px; line-height:1.75 }
.faq-answer a { text-decoration:underline; text-underline-offset:3px; color:var(--ink) }

/* Contact */
.contact-section { padding:38px 0 0; background:var(--cream) }
.contact-panel {
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:56px;
  align-items:center;
  padding:64px;
  background:var(--ink);
  color:#fff
}
.contact-copy .section-index { color:var(--lime) }
.contact-copy h2 { color:#fff; font-size:clamp(38px,3.55vw,52px) }
.contact-copy>p:not(.section-index) { margin-top:25px; color:#bdcabe; font-size:16px }
.contact-copy .button { max-width:100% }
.contact-subnote { display:block; margin-top:12px; color:#9fb0a4; font-size:11px }
.fit-block { margin-top:30px; padding-top:22px; border-top:1px solid #40534a }
.fit-block .eyebrow { color:#9fb0a4 }
.fit-list { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px }
.fit-list li { padding:7px 12px; border:1px solid #40534a; border-radius:99px; color:#d4ded6; font-size:12px; font-weight:650 }
.onboarding-list { border-top:1px solid #40534a }
.onboarding-list li { display:grid; grid-template-columns:34px 1fr; gap:15px; padding:20px 0; border-bottom:1px solid #40534a }
.onboarding-list>li>span { color:var(--lime); font-size:10px; font-weight:850 }
.onboarding-list h3 { font-size:15px; letter-spacing:-.035em }
.onboarding-list p { margin-top:5px; color:#afc0b4; font-size:12px; line-height:1.55 }

/* Footer */
.site-footer { padding:62px 0 24px; background:#e7ece3 }
.footer-grid { display:grid; grid-template-columns:1fr 1.28fr .6fr; gap:55px }
.footer-brand img { width:166px }
.footer-brand p { margin-top:19px; color:var(--muted); font-size:12px }
.business-info { display:grid; align-content:start; gap:8px; color:var(--muted); font-size:11px }
.business-info strong { color:var(--ink); font-weight:700 }
.business-sep { margin:0 5px; color:#a6b0a7 }
.footer-links { display:grid; align-content:start; gap:4px }
.footer-links a { min-height:36px; display:flex; align-items:center; padding:4px 0; font-size:12px; font-weight:650 }
.footer-links a:hover { color:#598016 }
.footer-bottom {
  display:flex;
  justify-content:space-between;
  gap:25px;
  margin-top:51px;
  padding-top:17px;
  border-top:1px solid #ccd4ca;
  color:#7b887e;
  font-size:11px
}

/* Small desktop and tablet */
@media(max-width:1199px) {
  .shell { width:calc(100% - 64px) }
  .hero-grid { grid-template-columns:minmax(0,1.2fr) minmax(0,.9fr); gap:36px; min-height:510px }
  .hero h1 { font-size:clamp(50px,5.65vw,68px) }
  .hero-lead { font-size:19px }
  .hero-demo { max-width:360px }
  .work-section,.difference-section { padding:88px 0 }
  .split-heading { gap:32px; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr) }
  .flow-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:44px }
  .flow-step:nth-child(2n)::after { display:none }
  .growth-band { grid-template-columns:1fr; gap:14px; margin-top:48px }
  .day-block { grid-template-columns:1fr; gap:28px; margin-top:48px; padding-top:44px }
  .day-panel { justify-self:center }
  .comparison-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:40px }
  .comparison-card.featured { grid-column:1/-1; order:-1 }
  .comparison-card { padding:28px }
  .faq-section { padding:88px 0 }
  .faq-grid { grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:40px }
  .contact-panel { grid-template-columns:1fr; gap:40px; padding:48px }
  .contact-copy h2 { font-size:48px }
  .footer-grid { grid-template-columns:1fr 1.3fr; gap:32px }
  .footer-links { grid-column:1/-1; display:flex; flex-wrap:wrap; gap:12px 28px }
}
@media(max-width:999px) {
  .hero { padding:28px 0 24px }
  .hero-grid { grid-template-columns:1fr; min-height:0; gap:34px; padding:16px 0 30px }
  .hero-copy { width:100%; max-width:720px; margin:auto; text-align:center }
  .hero h1 { font-size:clamp(44px,6.8vw,66px) }
  .hero-lead { margin-top:24px }
  .hero-actions { justify-content:center; margin-top:26px }
  .hero-demo { width:min(100%,470px); max-width:none; margin:auto; justify-self:center }
  .market-band { grid-template-columns:1fr; gap:10px; padding:18px 0 }
  .market-copy { text-align:center }
  .market-note { text-align:center; margin-top:0 }
  .site-nav>a:not(.nav-cta) { display:none }
  .split-heading { grid-template-columns:1fr; gap:20px }
  .section-intro { max-width:650px; font-size:16px }
  .faq-grid { grid-template-columns:1fr; gap:32px }
  .faq-copy { position:static }
  .faq-copy>p:not(.section-index) { max-width:650px; font-size:16px }
  .contact-copy h2 { font-size:44px }
}
/* Phones */
@media(max-width:639px) {
  .shell { width:calc(100% - 40px) }
  .header-inner { min-height:66px; gap:12px }
  .brand-link { width:128px }
  .site-nav { gap:0 }
  .nav-cta { font-size:12px; padding:10px 13px; gap:6px }
  .nav-cta span { font-size:15px }
  .hero { padding-top:18px }
  .hero-grid { gap:26px; padding:8px 0 26px }
  .hero h1 { font-size:clamp(32px,10vw,50px); line-height:1.12; letter-spacing:-.06em }
  .hero-lead { font-size:17px; line-height:1.65; margin-top:20px }
  .hero-lead br { display:none }
  .hero-actions { flex-direction:column; gap:6px; margin-top:22px }
  .button { min-height:52px; font-size:14px; padding:13px 18px; gap:18px; max-width:100% }
  .hero-actions .button { width:100%; max-width:360px }
  .hero-demo figcaption { font-size:11px; margin-top:12px }
  .phone { padding:8px; border-radius:42px }
  .phone-screen { border-radius:35px }
  .market-band { padding:14px 0; gap:8px }
  .market-copy strong { font-size:13px }
  .eyebrow { font-size:9px }
  .marquee-track,.marquee-set { gap:40px }
  .marquee-set .coupang-logo { width:124px }
  .marquee-set .naver-logo { width:140px }
  .marquee-set .toss-logo { width:160px }
  @keyframes marquee { to { transform:translateX(calc(-50% - 20px)) } }
  .market-note { font-size:12px; line-height:1.6 }
  .work-section,.difference-section { padding:64px 0 }
  .section-index { font-size:10px; margin-bottom:16px }
  .section-heading h2,.contact-copy h2 { font-size:clamp(29px,7.7vw,43px); line-height:1.2; letter-spacing:-.045em }
  .section-heading>p:last-child,.section-intro { font-size:15px; line-height:1.7 }
  .section-intro br { display:none }
  .flow-grid { grid-template-columns:1fr; gap:14px; margin-top:28px }
  .flow-step::after { display:none }
  .flow-step { padding:14px 14px 22px }
  .flow-visual { min-height:0 }
  .flow-index { margin-top:18px }
  .flow-step h3 { font-size:18px }
  .flow-step p { font-size:14px }
  .growth-band { margin-top:36px; padding-top:22px }
  .day-block { margin-top:36px; padding-top:32px; gap:22px }
  .day-copy h3 { font-size:23px }
  .day-copy p { font-size:14px }
  .day-chat { height:640px; padding:14px 12px 16px }
  .day-head { padding:14px 14px 0 }
  .day-strip { margin:12px 14px 0 }
  .day-strip li span { display:none }
  .growth-copy strong { font-size:20px }
  .growth-body { font-size:14px }
  .growth-line { font-size:16px }
  .example-note { font-size:12px; line-height:1.7; margin-top:20px }
  .comparison-grid { grid-template-columns:1fr; gap:16px; margin-top:28px }
  .comparison-card.featured { grid-column:auto }
  .comparison-card { padding:24px }
  .comparison-card h3 { font-size:25px; margin-top:18px }
  .comparison-card ul { margin-top:24px; padding-top:8px }
  .comparison-card li { grid-template-columns:34px minmax(0,1fr); gap:12px; padding:12px 0 }
  .comparison-card li span { font-size:12px }
  .cost-line { margin-top:20px }
  .cost-line span { font-size:13px }
  .human-ai-line { display:grid; gap:6px; margin-top:32px; padding-top:20px }
  .faq-section { padding:64px 0 }
  .faq-copy h2 { font-size:clamp(29px,7.7vw,43px); line-height:1.2; letter-spacing:-.045em }
  .faq-copy>p:not(.section-index) { font-size:15px; line-height:1.7 }
  .faq-link { font-size:14px; margin-top:16px }
  .faq-grid { gap:28px }
  .faq-item summary { padding:18px 0; gap:14px; grid-template-columns:minmax(0,1fr) 26px }
  .faq-item summary::after { width:26px; height:26px }
  .faq-item h3 { font-size:16px }
  .faq-answer { padding:0 40px 22px 0; font-size:14px; line-height:1.7 }
  .contact-section { padding-top:0 }
  .contact-panel { width:100%; padding:48px 20px; gap:32px }
  .contact-copy>p:not(.section-index) { font-size:15px; line-height:1.7; margin-top:18px }
  .contact-copy>p:not(.section-index) br { display:none }
  .contact-copy .button { width:100%; margin-top:24px }
  .contact-subnote { font-size:12px }
  .fit-block { margin-top:24px; padding-top:18px }
  .fit-list li { font-size:12px; padding:7px 11px }
  .onboarding-list h3 { font-size:16px }
  .onboarding-list p { font-size:13px }
  .onboarding-list li { grid-template-columns:28px minmax(0,1fr); gap:12px; padding:18px 0 }
  .site-footer { padding:40px 0 24px }
  .footer-grid { grid-template-columns:1fr; gap:26px }
  .footer-brand img { width:150px }
  .footer-brand p { font-size:13px; margin-top:14px }
  .business-info { font-size:12px; line-height:1.8; gap:6px }
  .business-sep { display:none }
  .business-info strong:not(:first-child) { margin-left:8px }
  .footer-links { grid-column:auto; gap:4px 20px; display:flex; flex-wrap:wrap }
  .footer-links a { font-size:13px; min-height:44px }
  .footer-bottom { display:grid; gap:8px; margin-top:24px; line-height:1.65 }
}
@media(max-width:359px) {
  .shell { width:calc(100% - 32px) }
  .shell.contact-panel { width:100%; padding-inline:16px }
  .contact-copy h2 { font-size:26px }
  .brand-link { width:112px }
  .header-inner { gap:8px }
  .nav-cta { font-size:11px; padding:10px }
  .hero-lead { font-size:16px }
  .hero h1 { font-size:32px }
  .comparison-card { padding:20px }
  .comparison-card h3 { font-size:23px }
  .day-chat { height:700px }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important }
}

/* Blog */
.blog-body {
  background:var(--cream)
}

/* Blog index: editorial rows rather than cards */
.blog-index {
  padding:92px 0 132px
}
.blog-index .section-heading {
  max-width:820px
}
.blog-title {
  font-size:clamp(42px,4.5vw,66px);
  line-height:1.08;
  letter-spacing:-.068em;
  font-weight:770
}
.blog-index .section-heading>p:last-child {
  max-width:700px;
  margin-top:24px;
  font-size:18px;
  line-height:1.72
}
.post-list {
  display:block;
  max-width:1120px;
  margin-top:64px;
  border-top:1px solid var(--ink);
  counter-reset:post
}
.post-list li {
  list-style:none;
  border-bottom:1px solid var(--line);
  counter-increment:post
}
.post-list a {
  display:grid;
  grid-template-columns:58px minmax(0,1fr) 92px;
  column-gap:28px;
  align-items:start;
  min-width:0;
  padding:32px 0 34px;
  border:0;
  background:transparent;
  transform:none;
  transition:color .18s,background-color .18s
}
.post-list a::before {
  content:counter(post,decimal-leading-zero);
  grid-column:1;
  grid-row:1 / 5;
  padding-top:2px;
  color:var(--muted);
  font-size:12px;
  line-height:1.4;
  font-weight:800;
  letter-spacing:.08em
}
.post-list-meta {
  grid-column:2;
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
  font-weight:700;
  letter-spacing:.025em
}
.post-list h2 {
  grid-column:2;
  margin-top:10px;
  max-width:820px;
  font-size:clamp(24px,2.3vw,34px);
  line-height:1.28;
  letter-spacing:-.052em;
  font-weight:760;
  text-wrap:balance
}
.post-list h2+p {
  grid-column:2;
  max-width:760px;
  margin-top:12px;
  color:var(--muted);
  font-size:16px;
  line-height:1.7
}
.post-list-more {
  grid-column:3;
  grid-row:2 / 4;
  align-self:center;
  justify-self:end;
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  font-size:13px;
  font-weight:760;
  white-space:nowrap
}
.post-list-more span {
  transition:transform .18s
}
@media(hover:hover) {
  .post-list a:hover {
    background:rgba(215,255,99,.14);
    transform:none
  }
  .post-list a:hover h2 {
    text-decoration:underline;
    text-decoration-thickness:1px;
    text-underline-offset:5px
  }
  .post-list a:hover .post-list-more span {
    transform:translateX(4px)
  }
}
.post-list a:focus-visible {
  outline:3px solid #356944;
  outline-offset:6px
}

/* Post header and measure */
.post-shell {
  max-width:720px
}
.post-header {
  padding:72px 0 44px;
  border-bottom:1px solid var(--line);
  background:var(--cream)
}
.post-header .post-shell {
  max-width:920px
}
.crumbs {
  display:flex;
  flex-wrap:wrap;
  gap:8px 10px;
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
  font-weight:700
}
.crumbs a {
  min-height:32px;
  display:inline-flex;
  align-items:center
}
.crumbs a:hover {
  color:var(--ink)
}
.post-header h1 {
  max-width:900px;
  margin-top:26px;
  font-size:clamp(40px,4.15vw,58px);
  line-height:1.14;
  letter-spacing:-.062em;
  font-weight:770;
  text-wrap:balance;
  overflow-wrap:anywhere
}
.post-lead {
  max-width:720px;
  margin-top:24px;
  color:var(--muted);
  font-size:19px;
  line-height:1.68;
  letter-spacing:-.018em
}
.post-meta {
  max-width:720px;
  margin-top:22px;
  color:var(--muted);
  font-size:13px;
  line-height:1.7;
  font-weight:650;
  overflow-wrap:anywhere
}

/* Long-form typography and vertical rhythm */
.post-body {
  padding:52px 0 12px;
  color:#1f2f29;
  font-size:18px;
  line-height:1.82;
  letter-spacing:-.018em
}
.post-body>* {
  min-width:0;
  max-width:100%
}
.post-body>*+* {
  margin-top:24px
}
.post-body h2 {
  margin-top:76px;
  padding-top:24px;
  border-top:1px solid var(--line);
  color:var(--ink);
  font-size:31px;
  line-height:1.3;
  letter-spacing:-.052em;
  font-weight:760;
  scroll-margin-top:100px;
  text-wrap:balance
}
.post-body h3 {
  margin-top:48px;
  color:var(--ink);
  font-size:23px;
  line-height:1.42;
  letter-spacing:-.042em;
  font-weight:750;
  scroll-margin-top:100px
}
.post-body h4 {
  margin-top:36px;
  color:var(--ink);
  font-size:18px;
  line-height:1.5;
  letter-spacing:-.025em;
  font-weight:750;
  scroll-margin-top:100px
}
.post-body ul,
.post-body ol {
  padding-left:1.25em
}
.post-body ul {
  list-style:disc
}
.post-body ol {
  list-style:decimal
}
.post-body li {
  padding-left:.22em
}
.post-body li+li {
  margin-top:10px
}
.post-body li::marker {
  color:#50645a;
  font-weight:760
}
.post-body a {
  color:var(--ink);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:4px;
  text-decoration-color:#84978c
}
.post-body a:hover {
  text-decoration-color:var(--ink)
}
.post-body strong {
  color:var(--ink);
  font-weight:760
}
.post-body code {
  padding:.08em .28em;
  border-bottom:1px solid #9cab9f;
  background:rgba(18,37,31,.055);
  color:var(--ink);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.88em;
  line-height:1.5;
  word-break:break-word;
  overflow-wrap:anywhere
}
.post-body hr {
  margin-top:56px;
  border:0;
  border-top:1px solid var(--line)
}

/* Contents: ruled navigation rather than a white panel */
.post-toc {
  display:grid;
  grid-template-columns:132px minmax(0,1fr);
  gap:24px;
  padding:22px 0 24px;
  border:0;
  border-top:2px solid var(--ink);
  border-bottom:1px solid var(--line);
  background:transparent
}
.post-toc .eyebrow {
  padding-top:10px;
  color:var(--ink)
}
.post-toc ol {
  margin:0;
  padding:0;
  list-style:none;
  counter-reset:toc
}
.post-toc li {
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  gap:8px;
  padding:5px 0;
  counter-increment:toc
}
.post-toc li::before {
  content:counter(toc,decimal-leading-zero);
  padding-top:8px;
  color:var(--muted);
  font-size:10px;
  line-height:1.4;
  font-weight:800;
  letter-spacing:.04em
}
.post-toc a {
  min-height:38px;
  display:inline-flex;
  align-items:center;
  color:var(--ink);
  font-size:15px;
  line-height:1.55;
  text-decoration:none
}
.post-toc a:hover {
  text-decoration:underline;
  text-underline-offset:4px
}

/* Quotations and notices: accents in the margin rather than boxes */
.post-body blockquote {
  margin-left:0;
  padding:4px 0 4px 24px;
  border-left:4px solid #8eaa32;
  color:#425249;
  font-size:20px;
  line-height:1.7;
  letter-spacing:-.028em
}
.post-body blockquote>*+* {
  margin-top:12px
}
.callout {
  position:relative;
  padding:5px 0 5px 24px;
  border:0;
  border-left:4px solid var(--line);
  background:transparent;
  font-size:16px;
  line-height:1.78
}
.callout::before {
  display:block;
  margin-bottom:8px;
  color:var(--muted);
  font-size:10px;
  line-height:1.3;
  font-weight:850;
  letter-spacing:.12em
}
.callout>*+* {
  margin-top:10px
}
.callout-tip {
  border-left-color:#799619
}
.callout-tip::before {
  content:"TIP";
  color:#526900
}
.callout-warn {
  border-left-color:#aa5b1e
}
.callout-warn::before {
  content:"CHECK";
  color:#8a4512
}
.callout-note {
  border-left-color:#63766b
}
.callout-note::before {
  content:"NOTE"
}

/* Code and prompts: the only dark reading surface */
.post-body pre.codeblock {
  position:relative;
  max-width:100%;
  margin-bottom:0;
  padding:22px 24px;
  border:0;
  border-left:5px solid var(--lime);
  border-radius:0;
  background:var(--ink);
  color:#edf4ee;
  overflow-x:auto;
  font-size:14px;
  line-height:1.72;
  letter-spacing:-.01em;
  tab-size:2;
  white-space:pre-wrap;
  word-break:break-word;
  overflow-wrap:anywhere;
  -webkit-overflow-scrolling:touch
}
.post-body pre.codeblock code {
  display:block;
  min-width:0;
  padding:0;
  border:0;
  background:none;
  color:inherit;
  font-size:inherit;
  line-height:inherit;
  white-space:pre-wrap;
  word-break:break-word;
  overflow-wrap:anywhere
}
.post-body pre.codeblock[data-lang]::before {
  content:attr(data-lang);
  display:block;
  margin-bottom:12px;
  color:var(--lime);
  font-family:var(--font);
  font-size:10px;
  line-height:1.3;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase
}

/* Tables: horizontal data sheets with row rules */
.post-body .table-wrap {
  max-width:100%;
  overflow-x:auto;
  border-top:2px solid var(--ink);
  border-bottom:1px solid var(--ink);
  background:transparent;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch
}
.post-body table {
  width:100%;
  min-width:560px;
  border-collapse:collapse;
  table-layout:auto;
  font-size:15px;
  line-height:1.58
}
.post-body th,
.post-body td {
  padding:13px 14px;
  border:0;
  border-bottom:1px solid var(--line);
  text-align:left;
  vertical-align:top;
  word-break:keep-all;
  overflow-wrap:break-word
}
.post-body th {
  background:transparent;
  color:var(--ink);
  font-size:13px;
  font-weight:780;
  letter-spacing:-.015em
}
.post-body tbody tr:last-child td {
  border-bottom:0
}
.post-body img {
  width:auto;
  max-width:100%;
  height:auto;
  margin-inline:auto;
  border:0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}

/* Conversion and onward reading */
.post-cta {
  max-width:880px;
  margin-top:76px;
  padding:44px 48px 46px;
  border-top:6px solid var(--lime);
  background:var(--ink);
  color:#fff
}
.post-cta .eyebrow {
  color:var(--lime)
}
.post-cta-title {
  max-width:620px;
  margin-top:14px;
  font-size:30px;
  line-height:1.28;
  letter-spacing:-.052em;
  font-weight:760;
  text-wrap:balance
}
.post-cta>p:not(.eyebrow):not(.post-cta-title) {
  max-width:650px;
  margin-top:15px;
  color:#c5d0c7;
  font-size:16px;
  line-height:1.72
}
.post-cta .button {
  margin-top:26px
}
.post-related {
  max-width:880px;
  margin-top:52px;
  padding:0 0 112px
}
.post-related>.eyebrow {
  color:var(--ink)
}
.post-related ul {
  display:block;
  margin-top:14px;
  border-top:1px solid var(--ink)
}
.post-related li {
  list-style:none;
  border-bottom:1px solid var(--line)
}
.post-related a {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px 24px;
  align-items:center;
  min-height:72px;
  padding:16px 0;
  border:0;
  background:transparent
}
.post-related a:hover strong {
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:5px
}
.post-related strong {
  min-width:0;
  font-size:16px;
  line-height:1.5;
  letter-spacing:-.03em
}
.post-related span {
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
  white-space:nowrap
}

@media(max-width:999px) {
  .site-nav>a[href="/blog/"] {
    min-height:44px;
    display:inline-flex;
    align-items:center;
    padding:0;
    color:var(--ink);
    font-size:13px;
    font-weight:700
  }
  .site-nav {
    gap:14px
  }
  .blog-index {
    padding-top:72px
  }
  .post-list {
    max-width:none
  }
  .post-header .post-shell {
    max-width:820px
  }
}

@media(max-width:639px) {
  .blog-index {
    padding:44px 0 84px
  }
  .blog-title {
    font-size:clamp(31px,9vw,43px);
    line-height:1.16;
    letter-spacing:-.052em
  }
  .blog-index .section-heading>p:last-child {
    margin-top:18px;
    font-size:15px;
    line-height:1.72
  }
  .post-list {
    margin-top:36px
  }
  .post-list a {
    grid-template-columns:34px minmax(0,1fr);
    column-gap:12px;
    padding:24px 0 26px
  }
  .post-list a::before {
    grid-row:1 / 6;
    font-size:10px
  }
  .post-list-meta,
  .post-list h2,
  .post-list h2+p,
  .post-list-more {
    grid-column:2
  }
  .post-list h2 {
    margin-top:8px;
    font-size:22px;
    line-height:1.34
  }
  .post-list h2+p {
    margin-top:10px;
    font-size:14px;
    line-height:1.68
  }
  .post-list-more {
    grid-row:auto;
    justify-self:start;
    margin-top:10px;
    min-height:36px
  }
  .post-header {
    padding:38px 0 28px
  }
  .crumbs a {
    min-height:28px
  }
  .post-header h1 {
    margin-top:18px;
    font-size:clamp(29px,8.15vw,38px);
    line-height:1.2;
    letter-spacing:-.052em;
    text-wrap:pretty
  }
  .post-lead {
    margin-top:18px;
    font-size:16px;
    line-height:1.68
  }
  .post-meta {
    margin-top:16px;
    font-size:12px;
    line-height:1.72
  }
  .post-body {
    padding:34px 0 8px;
    font-size:16.5px;
    line-height:1.82;
    letter-spacing:-.014em
  }
  .post-body>*+* {
    margin-top:20px
  }
  .post-body h2 {
    margin-top:58px;
    padding-top:18px;
    font-size:25px;
    line-height:1.34;
    letter-spacing:-.044em
  }
  .post-body h3 {
    margin-top:40px;
    font-size:20px;
    line-height:1.42
  }
  .post-body h4 {
    margin-top:30px;
    font-size:17px
  }
  .post-body ul,
  .post-body ol {
    padding-left:1.15em
  }
  .post-toc {
    display:block;
    padding:18px 0 20px
  }
  .post-toc .eyebrow {
    padding:0
  }
  .post-toc ol {
    margin-top:10px
  }
  .post-toc li {
    grid-template-columns:26px minmax(0,1fr);
    padding:2px 0
  }
  .post-toc a {
    min-height:44px;
    font-size:14px
  }
  .post-body blockquote {
    padding-left:18px;
    font-size:18px
  }
  .callout {
    padding-left:18px;
    font-size:15px
  }
  .post-body pre.codeblock {
    padding:18px 16px 19px;
    border-left-width:4px;
    font-size:13px;
    line-height:1.68
  }
  .post-body table {
    min-width:520px;
    font-size:14px
  }
  .post-body th,
  .post-body td {
    padding:11px 12px
  }
  .post-cta {
    margin-top:56px;
    padding:32px 22px 34px;
    border-top-width:5px
  }
  .post-cta-title {
    font-size:24px;
    line-height:1.32
  }
  .post-cta>p:not(.eyebrow):not(.post-cta-title) {
    font-size:15px
  }
  .post-cta .button {
    width:100%
  }
  .post-related {
    margin-top:40px;
    padding-bottom:76px
  }
  .post-related a {
    grid-template-columns:1fr;
    gap:7px;
    min-height:88px;
    padding:17px 0
  }
  .post-related span {
    white-space:normal
  }
}

@media(max-width:359px) {
  .site-nav>a[href="/blog/"] {
    font-size:12px
  }
  .site-nav {
    gap:8px
  }
  .post-list a {
    grid-template-columns:28px minmax(0,1fr);
    column-gap:8px
  }
  .post-list h2 {
    font-size:20px
  }
  .post-header h1 {
    font-size:28px
  }
  .post-body {
    font-size:16px
  }
  .post-body pre.codeblock {
    margin-inline:0;
    padding-inline:13px
  }
  .post-cta {
    padding-inline:18px
  }
}