@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');
@import url('./tokens.css');
/* Hallmark · existing Start Fast identity · editorial product explainer.
   Pre-emit critique: Philosophy 4 · Hierarchy 4 · Execution 4 · Specificity 5 · Restraint 5 · Variety 4. */
* { box-sizing: border-box; }
html,body { overflow-x: clip; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; color: var(--k-charcoal); background: var(--k-cream); font: 16px/1.75 var(--k-font-body); }
a { color: inherit; text-underline-offset: 4px; }
button,input { font: inherit; }
button,a { -webkit-tap-highlight-color: transparent; }
a:focus-visible,button:focus-visible,summary:focus-visible { outline: 3px solid var(--k-teal-dark); outline-offset: 5px; }
button { cursor: pointer; }
h1,h2,h3,p { margin: 0; }
h1,h2,h3 { font-family: var(--k-font-display); font-style: normal; overflow-wrap: anywhere; min-width: 0; }
h1 { font-size: clamp(40px,4.5vw,64px); letter-spacing: -.05em; line-height: 1.2; font-weight: 800; }
h2 { font-size: clamp(28px,3vw,40px); letter-spacing: -.035em; line-height: 1.3; font-weight: 700; }
h3 { font-size: 21px; line-height: 1.45; }
.wrap { width: min(calc(100% - 96px),var(--k-container-max)); margin-inline: auto; }
.header { border-bottom: 1px solid var(--k-sand); background: var(--k-cream); }
.header-inner { min-height: 66px; display: flex; align-items: center; gap: var(--space-md); }
.brand { display: inline-flex; align-items: center; gap: var(--space-xs); font: 800 18px var(--k-font-display); text-decoration: none; letter-spacing: -.5px; white-space: nowrap; }
.brand img { width: 26px; height: 26px; }
.nav { display: flex; gap: var(--space-md); margin-inline: auto; }
.nav a { font-size: 13px; font-weight: 500; text-decoration: none; color: var(--k-gray); white-space: nowrap; }
.nav a:hover { color: var(--k-charcoal); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 20px; padding: 14px 22px; border-radius: var(--radius-sm); background: var(--k-charcoal); color: var(--k-white); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background var(--k-fast),transform var(--k-fast); }
.button:hover { background: var(--k-accent-ink); }
.button:active { transform: translateY(1px); }
.button.small { padding: 9px 15px; font-size: 12px; }
.text-link { font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.text-link:hover { text-decoration: underline; }
.hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 80px; align-items: center; padding-block: 88px 72px; }
.eyebrow { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--k-gray); margin-bottom: var(--space-md); }
.eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--k-amber); }
h1 span { color: var(--k-accent-ink); }
.hero-lead { margin-top: var(--space-md); max-width: 470px; font-size: 17px; color: var(--k-gray); }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-md); margin-top: 32px; }
.hero-note { margin-top: var(--space-sm); font-size: 12px; color: var(--k-gray); }
.demo { min-width: 0; padding: 26px; background: var(--k-cream-dark); border: 1px solid var(--k-sand); border-radius: var(--radius-lg); }
.demo-caption { display: flex; justify-content: space-between; gap: var(--space-sm); align-items: center; margin-bottom: var(--space-sm); font-size: 12px; color: var(--k-gray); }
.demo-caption strong { font-weight: 600; color: var(--k-charcoal); }
.mood-card { position: relative; min-height: 310px; padding: 30px; background: var(--k-card-paper); color: var(--k-card-ink); border-radius: var(--radius-md); overflow: hidden; }
.mood-card[data-mood=bright] { --k-card-paper: var(--k-card-peach); --k-card-ink: var(--k-charcoal); }
.mood-card[data-mood=quiet] { --k-card-paper: var(--k-card-blue); --k-card-ink: var(--k-charcoal); }
.card-kicker { position: relative; z-index: 1; font-size: 11px; letter-spacing: .1em; }
.mood-art { display: block; width: 150px; height: 135px; margin: 10px auto 4px; color: var(--k-card-ink); }
.mood-card h3 { font-size: 29px; font-weight: 600; }
.mood-card p { margin-top: 5px; font-size: 13px; }
.mood-controls { display: flex; gap: var(--space-xs); margin-top: var(--space-sm); }
.mood-controls button { flex: 1; min-width: 0; padding: 9px 5px; font-size: 12px; border: 1px solid var(--k-sand); border-radius: var(--radius-sm); color: var(--k-gray); background: var(--k-cream); white-space: nowrap; }
.mood-controls button:hover { border-color: var(--k-gray); }
.mood-controls button[aria-pressed=true] { background: var(--k-charcoal); color: var(--k-white); border-color: var(--k-charcoal); }
.demo-foot { display: flex; justify-content: space-between; gap: var(--space-sm); flex-wrap: wrap; margin-top: var(--space-sm); font-size: 11px; color: var(--k-gray); }
.demo-foot a { color: var(--k-charcoal); white-space: nowrap; }
.intro { display: grid; grid-template-columns: 1fr 1.6fr; gap: var(--space-xl); padding-block: 36px; border-top: 1px solid var(--k-sand); border-bottom: 1px solid var(--k-sand); }
.intro h2 { font-size: 23px; }
.intro p { font-size: 15px; color: var(--k-gray); }
.intro strong { color: var(--k-charcoal); font-weight: 600; }
.section { padding-block: var(--space-2xl); }
.section-head { display: grid; grid-template-columns: 1.1fr 1fr; align-items: end; gap: var(--space-xl); margin-bottom: var(--space-lg); }
.section-number { display: block; margin-bottom: 14px; font: 500 12px var(--k-font-display); color: var(--k-accent-ink); letter-spacing: .06em; }
.section-head p { font-size: 15px; color: var(--k-gray); }
.play-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 56px; }
.play { display: grid; grid-template-columns: 45px minmax(0,1fr); gap: var(--space-sm); padding-block: 26px; border-top: 1px solid var(--k-sand); }
.play-number { color: var(--k-gray); font: 500 14px var(--k-font-display); padding-top: 4px; }
.play h3 { margin-bottom: var(--space-xs); font-size: 20px; }
.play p { color: var(--k-gray); font-size: 14px; }
.play .example { margin-top: 10px; color: var(--k-charcoal); font-size: 13px; }
.boundary { display: grid; grid-template-columns: 1fr 1fr; margin-top: 36px; border: 1px solid var(--k-sand); border-radius: var(--radius-md); overflow: hidden; }
.boundary > div { padding: 25px 28px; background: var(--k-cream-dark); }
.boundary > div+div { border-left: 1px solid var(--k-sand); background: var(--k-cream); }
.boundary h3 { font-size: 16px; margin-bottom: 10px; }
.boundary p { font-size: 14px; color: var(--k-gray); }
.source { margin-top: 20px; font-size: 12px; color: var(--k-gray); }
.source a { color: var(--k-charcoal); }
.compare-section { background: var(--k-cream-dark); padding-block: var(--space-xl); border-block: 1px solid var(--k-sand); }
.comparison { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 14px; }
.comparison th,.comparison td { padding: 21px 24px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--k-sand); overflow-wrap: anywhere; }
.comparison th:first-child { width: 19%; padding-left: 0; }
.comparison thead th { font-size: 19px; color: var(--k-charcoal); font-family: var(--k-font-display); }
.comparison tbody th { color: var(--k-gray); font-weight: 400; }
.comparison td { color: var(--k-gray); }
.comparison td:nth-child(2),.comparison thead th:nth-child(2) { background: var(--k-cream); color: var(--k-charcoal); }
.compare-verdict { margin-top: var(--space-md); font-size: 15px; }
.workflow { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 30px; }
.step { border-top: 2px solid var(--k-charcoal); padding-top: 22px; }
.step span { font: 500 13px var(--k-font-display); color: var(--k-accent-ink); }
.step h3 { margin: 22px 0 12px; font-size: 20px; }
.step p { font-size: 14px; color: var(--k-gray); }
.scope-note { padding: var(--space-md); margin-top: 32px; background: var(--k-cream-dark); border-radius: var(--radius-sm); font-size: 13px; color: var(--k-gray); }
.faq-section { padding-top: 0; }
.faq-layout { display: grid; grid-template-columns: 1fr 1.6fr; gap: var(--space-xl); }
.faq details { border-top: 1px solid var(--k-sand); padding: 20px 0; }
.faq details:last-child { border-bottom: 1px solid var(--k-sand); }
.faq summary { display: flex; justify-content: space-between; gap: 18px; cursor: pointer; font-size: 15px; font-weight: 600; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-weight: 400; }
.faq details[open] summary::after { content: '−'; }
.faq details p { margin-top: 14px; color: var(--k-gray); font-size: 14px; }
.closing { padding: var(--space-lg); display: flex; align-items: center; justify-content: space-between; gap: 30px; background: var(--k-charcoal); color: var(--k-cream); border-radius: var(--radius-md); margin-bottom: var(--space-xl); }
.closing h2 { font-size: 28px; }
.closing p { margin-top: 10px; color: var(--k-sand); font-size: 14px; }
.closing .button { background: var(--k-cream); color: var(--k-charcoal); }
.closing .button:hover { background: var(--k-sand); }
footer { border-top: 1px solid var(--k-sand); padding-block: 28px; font-size: 12px; color: var(--k-gray); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.footer-links a { text-decoration: none; white-space: nowrap; }
@media(max-width:1050px) {
  .hero { gap: var(--space-lg); }
  .wrap { width: calc(100% - 64px); }
  .nav { gap: var(--space-sm); }
}
@media(max-width:800px) {
  .hero { grid-template-columns: minmax(0,1fr); gap: var(--space-lg); padding-block: 56px; }
  .hero-copy { max-width: 570px; }
  .demo { max-width: 510px; width: 100%; }
  .section-head,.intro,.faq-layout { grid-template-columns: minmax(0,1fr); gap: 20px; }
  .nav { display: none; }
  .header-inner { justify-content: space-between; }
  .workflow { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 30px; }
  .section { padding-block: var(--space-xl); }
  .faq-section { padding-top: 0; }
  .closing { flex-direction: column; align-items: flex-start; }
}
@media(max-width:500px) {
  .wrap { width: calc(100% - 40px); }
  .hero { padding-block: 42px; }
  .hero-lead { font-size: 15px; }
  .actions { gap: 18px; }
  .demo { padding: 16px; }
  .mood-card { padding: 24px; }
  .play-grid,.boundary,.workflow { grid-template-columns: minmax(0,1fr); }
  .play { gap: 8px; grid-template-columns: 30px minmax(0,1fr); }
  .boundary > div { padding: 22px; }
  .boundary > div+div { border-left: 0; border-top: 1px solid var(--k-sand); }
  .comparison { font-size: 12px; }
  .comparison th,.comparison td { padding: 15px 10px; }
  .comparison thead th { font-size: 15px; }
  .comparison th:first-child { width: 18%; }
  .closing { padding: 28px; }
  .closing h2 { font-size: 24px; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

/* The example is a phone-sized interaction canvas, matching where mini tools run. */
.hero { grid-template-columns: minmax(0,1fr) minmax(300px,390px); }
.demo { width: 100%; margin-inline: auto; padding: 16px; border: 6px solid var(--k-charcoal); border-radius: 34px; box-shadow: 0 18px 40px rgba(30,27,25,.12); }
.demo-caption { margin: 8px 4px 16px; }
.mood-card { min-height: 490px; display: flex; flex-direction: column; justify-content: flex-end; padding: 28px; border-radius: 19px; }
.card-kicker { margin-bottom: auto; }
.mood-art { width: 170px; height: 150px; margin: 24px auto auto; }
.mood-controls { margin-top: 14px; }
.demo-foot { margin: 13px 4px 2px; }
@media (max-width: 800px) { .hero { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 500px) {
  .demo { max-width: 350px; padding: 12px; border-width: 5px; border-radius: 30px; }
  .mood-card { min-height: 440px; padding: 22px; }
  .mood-art { width: 145px; height: 130px; }
  .mood-card h3 { font-size: 25px; }
}