/* The home page as one continuous page: a dark opening, then sections that
   alternate white, tinted and dark, each a short story in the site's tokens.
   The design's canvas is 1440px with 120px sides, so the content column is
   1200px at that width. Robert retired the card deck on October 26, 2026. */
.home-section{background:var(--white);border-top:1px solid var(--border-2);--accent:var(--coral)}
.section-content{max-width:1296px;margin:0 auto;padding:80px 48px;box-sizing:border-box;display:flex;flex-direction:column;gap:48px}
.tint-section{background:var(--midnight-05)}
.dark-section{background:var(--midnight);color:var(--white);--accent:var(--coral-light)}
.accent{color:var(--accent)}

/* Overline, header, sub-line: the head every section opens with. */
.section-head{display:flex;flex-direction:column;gap:16px}
.eyebrow{margin:0;font-size:var(--text-base);font-weight:700;line-height:1.3;letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--teal-ink)}
.dark-section .eyebrow{color:var(--teal-light)}
.dark-section .eyebrow-coral{color:var(--coral-light)}
.section-content h1,.section-content h2{margin:0;font-family:var(--font-display);font-weight:400;letter-spacing:var(--tracking-tight);text-wrap:balance}
.section-content h1{font-size:var(--text-4xl);line-height:1.2;color:var(--white)}
.section-content h2{font-size:var(--text-4xl);line-height:var(--leading-tight);color:var(--midnight)}
.section-content h2.display{font-size:var(--text-5xl)}
.dark-section h2{color:var(--white)}
.home-sub{margin:0;font-size:var(--text-xl);line-height:1.5;color:var(--midnight-90);text-wrap:pretty}
.dark-section .home-sub{color:var(--fg-on-dark)}
.section-content h3{margin:0;font-weight:400}
:where(.section-content) p{text-wrap:pretty}

/* The story paragraphs: one column, reading width, large enough to be read
   standing up. */
.story{display:flex;flex-direction:column;gap:20px;max-width:760px}
.story p{margin:0;font-size:var(--text-xl);line-height:1.55;color:var(--midnight-90)}
.story strong{font-weight:700;color:var(--midnight)}
.dark-section .story p{color:var(--fg-on-dark)}
.dark-section .story strong{color:var(--white)}
.closing-line{margin:0;font-family:var(--font-display);font-size:var(--text-3xl);line-height:var(--leading-tight);color:var(--midnight);text-wrap:balance}
.dark-section .closing-line{color:var(--white)}

/* Buttons: the design's square-cornered pair. Coral is the deep coral, which
   holds white text at 4.5:1 (the brighter coral does not at this size). */
.home-actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.home-btn{display:inline-flex;align-items:center;min-height:48px;padding:12px 24px;box-sizing:border-box;border-radius:var(--radius-sm);border:1px solid transparent;font-size:var(--text-base);font-weight:500;line-height:1.3;text-decoration:none;transition:box-shadow .2s ease,border-color .2s ease}
.home-btn-coral{background:var(--coral-deep);color:var(--white);font-weight:700}
.home-btn-coral:hover{box-shadow:var(--shadow-glow-coral)}
.home-btn-outline{border-color:var(--midnight-50);color:var(--midnight)}
.home-btn-outline:hover{border-color:var(--midnight)}
.dark-section .home-btn-outline{color:var(--white)}
.dark-section .home-btn-outline:hover{border-color:var(--white)}
.home-btn:focus-visible,.home-link:focus-visible,.hero-foot a:focus-visible,.close-note a:focus-visible{outline:2px solid var(--teal);outline-offset:4px}
.dark-section .home-btn:focus-visible,.dark-section a:focus-visible{outline-color:var(--teal-light)}
.home-link{align-self:flex-start;font-size:var(--text-lg);font-weight:700;color:var(--teal-ink);text-decoration:underline;text-underline-offset:4px}
.home-link:hover{color:var(--midnight)}
.dark-section .home-link{color:var(--teal-light)}
.dark-section .home-link:hover{color:var(--white)}

/* 1. The opening. */
.hero-section{border-top-color:transparent}
.hero-section .section-content{justify-content:space-between;min-height:620px;padding-top:104px;padding-bottom:56px}
.hero-main{display:flex;flex-direction:column;gap:40px}
.hero-section .home-sub{color:var(--fg-on-dark)}
.hero-foot{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;align-items:flex-end;border-top:1px solid var(--midnight-90);padding-top:24px}
.hero-foot a{font-size:var(--text-base);color:var(--fg-on-dark)}
.hero-foot a:hover{color:var(--white)}

/* Every section has a drawing. Beside the words from 1024px, under them
   below. The drawings are inline SVG in the site's own colors, so they scale
   with the column and need no image files. */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px 64px;align-items:center}
.split>.mock,.split>.demo{align-self:center}
.drawing{margin:0;display:flex;justify-content:center}
.drawing svg{display:block;width:100%;height:auto;overflow:visible}
.drawing .narrow{display:none;max-width:440px}
.hero-split{align-items:center}
.hero-split .drawing{padding:12px 0}
.orbit svg{max-width:720px}
.orbit .orbit-narrow{display:none;max-width:450px}
.timeline svg{max-width:1200px}
@media(max-width:1023px){
 .split{grid-template-columns:minmax(0,1fr)}
 .timeline svg:not(.narrow){display:none}
 .timeline .narrow{display:block}
}

/* 5. The four steps, one row, on the dark section with the loop above. Keep
   is Korium, in coral. */
.method-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.method-steps li{display:flex;flex-direction:column;gap:12px;padding:28px 0 0;border-top:2px solid var(--midnight-50)}
.method-steps .method-keep{border-top-color:var(--coral-light)}
.method-steps h3{font-family:var(--font-display);font-size:var(--text-3xl);line-height:var(--leading-tight);color:var(--white)}
.method-keep h3{color:var(--coral-light)}
.method-steps p{margin:0;font-size:var(--text-md);line-height:1.5;color:var(--fg-on-dark)}

/* 6. The 90 days, as a table. */
.stages{width:100%;border-collapse:collapse;font-size:var(--text-md);line-height:1.5;color:var(--midnight-90)}
.stages th,.stages td{padding:18px 24px 18px 0;text-align:left;vertical-align:top;border-top:1px solid var(--midnight-15)}
.stages thead th{padding-top:0;border-top:0;font-size:var(--text-base);font-weight:700;letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--teal-ink)}
.stages tbody th{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:400;line-height:var(--leading-snug);color:var(--midnight);width:160px}
.stages tbody tr:first-child th,.stages tbody tr:first-child td{border-top:2px solid var(--midnight)}
.stages td:nth-child(2){width:260px;white-space:nowrap}
.stages .stage-keep th{color:var(--coral-deep)}
.stages .home-link{display:inline;font-size:var(--text-md);margin-left:8px}

/* 7. Stay close. */
.closing-section .section-content{gap:32px}
.close-note{margin:0;font-size:var(--text-md);line-height:var(--leading-normal);color:var(--midnight-90)}
.close-note a{font-weight:700;color:var(--teal-ink);text-decoration:underline;text-underline-offset:3px}

@media(max-width:1279px){
 .wide-break{display:none}
 .method-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:1100px){
 .section-content{padding-left:32px;padding-right:32px}
}
@media(max-width:760px){
 .section-content,.hero-section .section-content{padding:40px 20px;gap:32px}
 .hero-section .section-content{min-height:0}
 .hero-main{gap:28px}
 .section-content h1,.section-content h2,.section-content h2.display{font-size:var(--text-2xl)}
 .home-sub,.story p{font-size:var(--text-lg)}
 .closing-line{font-size:var(--text-xl)}
 .method-steps{grid-template-columns:minmax(0,1fr)}
 .method-steps h3{font-size:var(--text-2xl)}
 .split{gap:28px}
 .orbit .orbit-wide{display:none}
 .orbit .orbit-narrow{display:block}
 .stages,.stages thead,.stages tbody,.stages tr,.stages th,.stages td{display:block}
 .stages thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
 .stages tr{padding:16px 0;border-top:1px solid var(--midnight-15)}
 .stages tbody tr:first-child{border-top:2px solid var(--midnight)}
 .stages th,.stages td{padding:4px 0;border-top:0;width:auto}
 .stages tbody tr:first-child th,.stages tbody tr:first-child td{border-top:0}
 .stages td:nth-child(2){white-space:normal;font-weight:700;color:var(--teal-ink)}
 .stages .home-link{display:block;margin:8px 0 0}
}