/* aiwithtaren.com homepage · look D "Editorial + stickers" (approved 2026-11-03).
   Option A's editorial page (big serif headlines, thin rules, calm space) on
   dot-grid paper, with three sticker moments: the tilted "ai" tile, the
   "New hire · Day 1" card and the "What's eating your time?" note.
   Loaded after styles.css and scoped to body.home-d, so other pages keep
   their look. Forms, FAQ and the sheet reuse styles.css. */
.home-d {
  --ink:#141613; --ink-2:#3B3F3A; --dim:#6E726C; --line:#E4DFD4; --green-mint:#9FD9C2; --note:#FFF7D6;
  --f-sans: "Inter Tight", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --gutter: clamp(20px, 8.3vw, 120px);
  font-family:var(--f-sans);
  background:var(--paper) radial-gradient(circle, #DCD6CA 1px, transparent 1.3px) 0 0 / 16px 16px;
}
.home-d::before { display:none; }
.home-d .w { max-width:1440px; margin:0 auto; padding:0 var(--gutter); }
.home-d .label { font: 500 .75rem/1.3 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--accent-text); }
.home-d .label.muted { color:var(--dim); }
.home-d .serif { font-family:var(--f-serif); font-weight:400; }
.home-d h1, .home-d h2 { font-family:var(--f-serif); font-weight:400; letter-spacing:-.015em; text-wrap:balance; }
.home-d h1 em, .home-d h2 em { font-style:italic; color:var(--accent); letter-spacing:-.01em; }
.home-d h2 { font-size:clamp(2.5rem, 4.6vw, 4rem); line-height:1; }
.home-d section { padding:0; }

/* ---------- Nav: a paper bar with a hairline ---------- */
.home-d .nav-d { position:sticky; top:0; z-index:20; background:rgba(250,248,244,.92); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.home-d .nav-d .w { display:flex; align-items:center; justify-content:space-between; gap:16px; height:clamp(60px, 7vw, 98px); }
.home-d .brand { display:flex; align-items:center; gap:12px; font: 400 1.5rem/1 var(--f-serif); white-space:nowrap; }
.home-d .brand em { font-style:italic; color:var(--accent); }
.home-d .tile-sm { width:34px; height:34px; border-radius:9px; background:var(--accent); color:#fff; display:grid; place-items:center; font: italic 400 1.375rem/1 var(--f-serif); }
.home-d .nav-links { display:flex; align-items:center; gap:clamp(20px, 2.8vw, 40px); font-size:.9375rem; color:var(--ink-2); }
.home-d .nav-links a:not(.seat):hover { color:var(--ink); }
.home-d .nav-links .seat { font-weight:600; color:var(--ink); border-bottom:1.5px solid var(--accent); padding-bottom:2px; }
@media (max-width:760px) {
  .home-d .brand { font-size:1.25rem; gap:9px; } .home-d .tile-sm { width:28px; height:28px; font-size:1.125rem; border-radius:8px; }
  .home-d .nav-links a:not(.seat) { display:none; }
  .home-d .nav-links .seat { background:var(--ink); color:#fff; border:0; padding:.6rem .9rem; border-radius:999px; font-size:.8125rem; }
}

/* ---------- Buttons ---------- */
.home-d .pill { display:inline-flex; align-items:center; justify-content:center; gap:14px; border-radius:999px; font: 600 1.125rem/1 var(--f-sans); padding:1.35rem 2.1rem; cursor:pointer; border:0; }
.home-d .pill.ink { background:var(--ink); color:#fff; }
.home-d .pill.ink:hover { background:#000; }
.home-d .pill.green { background:var(--accent); color:#fff; }
.home-d .pill.green:hover { background:var(--accent-hi); }
.home-d .pill.line { background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--ink); }
.home-d .pill .price { font: italic 400 1.5rem/1 var(--f-serif); color:var(--green-mint); }

/* ---------- Hero ---------- */
.home-d .hero-d { padding:clamp(40px, 6.6vw, 96px) 0 clamp(48px, 6vw, 88px); }
.home-d .hero-top { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; }
.home-d .live { display:inline-flex; align-items:center; gap:12px; font: 500 .8125rem/1.4 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.home-d .live b { font-weight:500; color:var(--accent-text); }
.home-d .live a { text-decoration:underline; text-underline-offset:3px; }
.home-d .live .dot { width:8px; height:8px; }
.home-d .hero-d h1 { font-size:clamp(3rem, 6.2vw, 5.75rem); line-height:.96; max-width:10.5em; margin-top:clamp(20px, 2.8vw, 40px); }
.home-d .hero-row { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-top:clamp(28px, 4.4vw, 64px); }
.home-d .hero-row .lede { max-width:39rem; font-size:clamp(1.0625rem, 1.5vw, 1.3125rem); line-height:1.58; color:var(--ink-2); }
.home-d .hero-buy { display:flex; flex-direction:column; align-items:flex-end; gap:14px; flex:0 0 auto; }
.home-d .hero-buy .fine { text-align:right; }
.home-d .sticker {
  background:var(--accent); color:#fff; border:1.5px solid var(--ink); box-shadow:8px 8px 0 var(--ink);
  display:grid; place-items:center; font: italic 400 1px/1 var(--f-serif); letter-spacing:-.04em; flex:0 0 auto;
}
.home-d .hero-tile { width:clamp(88px, 16.7vw, 240px); aspect-ratio:1; border-radius:24%; font-size:clamp(62px, 12.2vw, 176px); rotate:8deg; margin:clamp(0px, 4vw, 60px) clamp(0px, .7vw, 10px) 0 0; }
.home-d .hero-tile span { margin-top:-.08em; }
@media (max-width:760px) {
  .home-d .hero-tile { box-shadow:4px 4px 0 var(--ink); }
  .home-d .hero-top { align-items:flex-start; }
  /* Phone hero, matching the Paper mobile artboard: the live line and the
     tile share the top row, then the headline runs the full width below. */
  .home-d .hero-top { display:grid; grid-template-columns:minmax(0, 1fr) auto; column-gap:16px; }
  .home-d .hero-top > div:first-child { display:contents; }
  .home-d .hero-top .live { grid-row:1; grid-column:1; margin-top:6px; }
  .home-d .hero-tile { grid-row:1; grid-column:2; justify-self:end; margin:0 4px 0 0; }
  .home-d .hero-d h1 { grid-row:2; grid-column:1 / -1; margin-top:20px; max-width:none; font-size:clamp(2.375rem, 11vw, 3rem); line-height:1; letter-spacing:-.02em; text-wrap:wrap; }
  .home-d .hero-row { flex-direction:column; align-items:stretch; gap:24px; }
  .home-d .hero-buy { align-items:stretch; }
  .home-d .hero-buy .fine { text-align:center; }
  .home-d .live .long { display:none; }
}

/* ---------- Take-home strip ---------- */
.home-d .take { display:grid; grid-template-columns: 1fr repeat(3, 1.1fr); border-top:1px solid var(--ink); border-bottom:1px solid var(--line); }
.home-d .take > div { padding:28px 32px; border-left:1px solid var(--line); }
.home-d .take > div:first-child { padding-left:0; border-left:0; }
.home-d .take h3 { font: 400 1.875rem/1.1 var(--f-serif); letter-spacing:-.01em; }
.home-d .take p { font-size:.9375rem; line-height:1.45; color:var(--ink-2); margin-top:6px; }
@media (max-width:900px) {
  .home-d .take { grid-template-columns:1fr; }
  .home-d .take > div { padding:14px 0; border-left:0; border-top:1px solid var(--line); }
  .home-d .take > div:first-child { border-top:0; }
  .home-d .take h3 { font-size:1.5rem; }
}

/* ---------- Two-column editorial sections ---------- */
.home-d .split { display:grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap:clamp(32px, 5.5vw, 80px); }
.home-d .split > .side { display:flex; flex-direction:column; gap:20px; }
@media (max-width:900px) { .home-d .split { grid-template-columns:1fr; } }
.home-d .problem { padding-top:clamp(64px, 8.3vw, 120px); }
.home-d .problem h2 { font-size:clamp(2.5rem, 4.4vw, 4rem); line-height:1; }
.home-d .pains { list-style:none; padding-top:clamp(0px, 2.5vw, 36px); }
.home-d .pains li { display:flex; gap:28px; padding:24px 0; border-top:1px solid var(--line); font-size:clamp(1.0625rem, 1.4vw, 1.25rem); line-height:1.5; color:var(--ink-2); }
.home-d .pains li:last-child { border-bottom:1px solid var(--line); }
.home-d .pains i { font: italic 400 1.75rem/1.1 var(--f-serif); color:var(--accent); width:32px; flex:0 0 auto; }
@media (max-width:760px) { .home-d .pains li { gap:16px; padding:14px 0; } .home-d .pains i { font-size:1.375rem; width:26px; } }

/* the new hire: a sticker ID card next to the quote */
.home-d .hire { padding:clamp(48px, 5vw, 72px) 0 clamp(64px, 8.3vw, 120px); align-items:start; }
.home-d .badge-d {
  width:min(340px, 100%); background:#fff; border:1.5px solid var(--ink); border-radius:22px; box-shadow:6px 6px 0 var(--ink);
  padding:28px; display:flex; flex-direction:column; gap:16px; rotate:-3deg; margin:8px 0 0 8px;
}
.home-d .badge-top { display:flex; justify-content:space-between; align-items:center; }
.home-d .badge-top i { width:10px; height:10px; border-radius:50%; background:var(--accent); }
.home-d .badge-who { display:flex; align-items:center; gap:14px; }
.home-d .badge-who .sticker { width:52px; height:52px; border-radius:14px; border:0; box-shadow:none; font-size:32px; }
.home-d .badge-who b { display:block; font: 400 1.625rem/1.1 var(--f-serif); }
.home-d .badge-who small { font-size:.875rem; color:var(--ink-2); }
.home-d .checks { list-style:none; display:flex; flex-direction:column; gap:9px; padding-top:14px; border-top:1px solid var(--line); font-size:.9375rem; color:var(--ink-2); }
.home-d .checks li { display:flex; align-items:center; gap:10px; }
.home-d .checks li::before { content:""; width:16px; height:16px; border:1.5px solid var(--ink-2); border-radius:4px; flex:0 0 auto; }
.home-d .checks li.next { color:var(--accent-text); font-weight:600; }
.home-d .checks li.next::before { border-color:var(--accent); background:var(--accent-soft); }
.home-d .quote { border-left:2px solid var(--accent); padding-left:clamp(18px, 2.8vw, 40px); display:flex; flex-direction:column; gap:28px; }
.home-d .quote blockquote { font: 400 clamp(1.75rem, 2.8vw, 2.5rem)/1.25 var(--f-serif); letter-spacing:-.01em; color:var(--ink); }
.home-d .quote blockquote em { font-style:italic; color:var(--accent); }
.home-d .quote p { font-size:clamp(1rem, 1.3vw, 1.1875rem); line-height:1.6; color:var(--ink-2); max-width:37rem; }

/* ---------- What we'll cover: the one cream band ---------- */
.home-d .band { background:var(--paper-2); padding:clamp(56px, 8.3vw, 120px) 0; }
.home-d .band-head { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; }
.home-d .band-head h2 { max-width:12em; margin-top:20px; }
.home-d .band-head .fine { max-width:16rem; font-size:1rem; }
.home-d .cover { display:grid; grid-template-columns:repeat(4, 1fr); border-top:1px solid var(--ink); margin-top:56px; list-style:none; }
.home-d .cover li { padding:32px 32px 0; border-left:1px solid var(--line); display:flex; flex-direction:column; gap:14px; }
.home-d .cover li:first-child { padding-left:0; border-left:0; }
.home-d .cover li:last-child { padding-right:0; }
.home-d .cover .n { font: 400 5.5rem/.9 var(--f-serif); color:var(--accent); }
.home-d .cover b { font-size:1.25rem; font-weight:600; line-height:1.3; }
.home-d .cover p { font-size:1rem; line-height:1.56; color:var(--ink-2); }
@media (max-width:900px) {
  .home-d .band-head { flex-direction:column; align-items:flex-start; }
  .home-d .cover { grid-template-columns:1fr; margin-top:28px; }
  .home-d .cover li { padding:18px 0; border-left:0; border-bottom:1px solid var(--line); flex-direction:row; flex-wrap:wrap; gap:4px 16px; }
  .home-d .cover li:last-child { border-bottom:0; }
  .home-d .cover .n { font-size:2.75rem; width:30px; }
  .home-d .cover li > div { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
  .home-d .cover b { font-size:1.0625rem; }
  .home-d .cover p { font-size:.9375rem; }
}

/* ---------- Why I do this / who it's for ---------- */
.home-d .why { padding:clamp(64px, 8.3vw, 120px) 0; }
.home-d .why h2 { font-size:clamp(2.25rem, 3.4vw, 3rem); line-height:1.08; }
.home-d .why h2 em { color:var(--ink); }
.home-d .why .body { display:flex; flex-direction:column; gap:24px; padding-top:clamp(0px, 2.8vw, 40px); font-size:clamp(1.0625rem, 1.4vw, 1.25rem); line-height:1.55; color:var(--ink-2); }
.home-d .why .body p:nth-child(2) { color:var(--ink); }
.home-d .sign { font: italic 400 2.25rem/1 var(--f-serif); color:var(--accent); }
.home-d .fit { padding-bottom:clamp(64px, 8.3vw, 120px); }
.home-d .fit-cols { display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px, 3vw, 48px); padding-top:clamp(0px, 2.8vw, 40px); }
.home-d .fit-cols ul { list-style:none; margin-top:12px; }
.home-d .fit-cols li { padding:14px 0 14px 30px; border-top:1px solid var(--line); position:relative; font-size:1.0625rem; line-height:1.5; color:var(--ink-2); }
.home-d .fit-cols li::before { content:"✓"; position:absolute; left:0; top:14px; color:var(--accent); font-weight:700; }
.home-d .fit-cols .no li::before { content:"×"; color:var(--dim); }
@media (max-width:760px) { .home-d .fit-cols { grid-template-columns:1fr; } }

/* ---------- Offers ---------- */
.home-d .offers { padding-bottom:clamp(64px, 8.3vw, 120px); }
.home-d .offers-head { border-top:1px solid var(--ink); padding-top:56px; display:flex; flex-direction:column; gap:20px; }
.home-d .offer-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:48px; }
.home-d .offer { display:flex; flex-direction:column; gap:20px; padding:clamp(28px, 3vw, 44px); border-radius:4px; }
.home-d .offer.dark { background:var(--ink); color:#fff; }
.home-d .offer.light { background:var(--paper); box-shadow:inset 0 0 0 1px var(--ink); }
.home-d .offer-top { display:flex; justify-content:space-between; gap:12px; }
.home-d .offer.dark .label { color:var(--green-mint); }
.home-d .offer h3 { display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 16px; font: 400 clamp(2.5rem, 3.9vw, 3.5rem)/1.05 var(--f-serif); letter-spacing:-.01em; }
.home-d .offer h3 small { font: italic 400 clamp(1.5rem, 2.2vw, 2.5rem)/1 var(--f-serif); color:var(--accent); }
.home-d .offer.dark h3 small { color:var(--green-mint); }
.home-d .offer p { font-size:1.0625rem; line-height:1.6; color:var(--ink-2); }
.home-d .offer.dark p { color:#C9CCC7; }
.home-d .offer .pill { align-self:flex-start; margin-top:auto; padding:1.1rem 1.9rem; font-size:1.0625rem; }
@media (max-width:760px) { .home-d .offer-grid { grid-template-columns:1fr; } .home-d .offer .pill { align-self:stretch; } .home-d .offer-top { flex-wrap:wrap; } }
.home-d .lead-d { max-width:40rem; margin-top:40px; }
.home-d .lead-d .q { font: 400 1.5rem/1.2 var(--f-serif); }

/* ---------- Questions ---------- */
.home-d .qs { padding-bottom:clamp(64px, 8.3vw, 120px); }
.home-d .qs h2 { font-size:clamp(2.25rem, 3.4vw, 3rem); line-height:1.08; }
.home-d .faq { margin-top:0; gap:0; max-width:none; }
.home-d .faq details { background:transparent; border:0; border-top:1px solid var(--line); border-radius:0; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
.home-d .faq details:last-child { border-bottom:1px solid var(--line); }
.home-d .faq summary { padding:24px 0; font-weight:400; font-size:clamp(1.0625rem, 1.4vw, 1.25rem); }
.home-d .chev { background:transparent; color:var(--accent); font-size:1.5rem; font-weight:300; }
.home-d .faq .ans p { padding:0 0 24px; font-size:1.0625rem; }

/* ---------- Footer: the one sticky note ---------- */
.home-d .foot { border-top:1px solid var(--ink); padding:clamp(40px, 6.6vw, 96px) 0 48px; }
.home-d .foot-row { display:flex; justify-content:space-between; align-items:center; gap:clamp(32px, 6vw, 80px); }
.home-d .note { background:var(--note); border:1.5px solid var(--ink); box-shadow:8px 8px 0 var(--ink); rotate:-2deg; padding:clamp(24px, 2.8vw, 40px) clamp(24px, 3vw, 44px); max-width:760px; flex:1 1 auto; margin-left:8px; }
.home-d .note h2 { font-size:clamp(2.75rem, 5.3vw, 4.75rem); line-height:.98; margin-top:12px; letter-spacing:-.02em; }
.home-d .ask { display:flex; flex-direction:column; gap:14px; width:340px; flex:0 0 auto; }
.home-d .ask-open { display:flex; justify-content:space-between; align-items:center; width:100%; background:transparent; border:0; border-bottom:1.5px solid var(--ink); padding:14px 0; cursor:pointer; text-align:left; font-size:1.125rem; color:var(--dim); }
.home-d .ask-open b { font-size:1rem; font-weight:600; color:var(--ink); }
.home-d .ask-open:hover b { color:var(--accent); }
.home-d .ask .fine { font-size:.875rem; }
.home-d .legal { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:64px; font-size:.8125rem; color:var(--dim); }
.home-d .legal a { text-decoration:underline; text-underline-offset:3px; }
@media (max-width:900px) {
  .home-d .foot-row { flex-direction:column; align-items:stretch; }
  .home-d .note { box-shadow:6px 6px 0 var(--ink); margin:0 6px 0 4px; }
  .home-d .ask { width:auto; }
  .home-d .legal { margin-top:40px; }
}

/* ---------- Work with me: booking calendar + slim footer ---------- */
.home-d .book-d { padding-bottom:clamp(64px, 8.3vw, 120px); }
.home-d .side-lede { font-size:1.0625rem; line-height:1.6; color:var(--ink-2); max-width:24rem; }
.home-d .book-d .side { display:flex; flex-direction:column; gap:20px; }
.home-d .cal-wrap { margin-top:40px; }
.home-d .cal-d { background:#fff; border:1px solid var(--ink); border-radius:4px; overflow:hidden; }
.home-d .foot-slim { padding:32px 0 48px; }
.home-d .foot-slim .legal { margin-top:0; }

/* stickers don't tilt for people who asked for less motion */
@media (prefers-reduced-motion: reduce) { .home-d .hero-tile, .home-d .badge-d, .home-d .note { rotate:0deg; } }