/* ==========================================================================
   Daily Start — marketing site
   Built to match the approved design "Daily Start Website v5".
   Tokens (colour / type / spacing / shape) are lifted verbatim from the design
   so the inline styles carried over from the artboards resolve unchanged.
   The additions below (base, buttons, header, bands, grids, type scale,
   responsive) turn the fixed 1440px artboards into a full-bleed responsive site.
   ========================================================================== */

/* --- Colour — surfaces, ink, brand, and the four semantic status colours.
   Status colours are NEVER decorative: they answer "has the day started?" --- */
:root {
  /* surfaces & ink */
  --ds-bg: #FAF7F1;            /* cream page */
  --ds-card: #F3EEE4;          /* paper cards */
  --ds-paper: #FAF7F1;         /* fields sitting on cards */
  --ds-shell: #EDEAE2;
  --ds-ink: #2E3430;
  --ds-muted: #6E655C;
  --ds-faint: #9A9186;         /* timestamps, tertiary */
  --ds-border: #E7E0D3;        /* hairlines */
  --ds-dashed: #C9BFAF;        /* dashed "add" outlines, outline buttons */
  --ds-on-dark: #FAF7F1;       /* text/marks on photos and coral */

  /* brand */
  --ds-primary: #D9704A;       /* Morning Coral */
  --ds-primary-dark: #B5714C;  /* hover/pressed, eyebrow labels */
  --ds-accent-soft: rgba(217, 112, 74, 0.14);
  --ds-halo: rgba(217, 112, 74, 0.16);
  --ds-coral-wash: #FBEEE6;

  /* status — semantic only */
  --ds-green: #3F8F5F;         /* day has started */
  --ds-grey: #8B8A82;          /* quiet so far */
  --ds-amber: #C68A2E;         /* sensors offline — calm, not alarming */
  --ds-blue: #3E6FA3;          /* away, and family / human connection */
  --ds-blue-dark: #345E88;
  --ds-error: #B23B3B;
  --ds-amber-ink: #8A5F1F;

  /* ink band */
  --ds-ink-band: #20241F;
  --ds-ink-card: #2A2F29;

  /* type */
  --font-serif-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* shape */
  --radius-card: 18px;
  --radius-card-sm: 14px;
  --radius-field: 12px;
  --radius-pill: 100px;
  --radius-round: 50%;
  --shadow-card: 0 2px 14px rgba(43, 54, 48, 0.08);
  --shadow-float: 0 6px 24px rgba(43, 54, 48, 0.16);

  /* layout: content caps at 1264px (= the design's 1440px artboard minus 88px
     gutters), and the gutter grows to keep it centred on wide screens. */
  --content: 1264px;
  --gutter: max(22px, calc((100% - var(--content)) / 2));
}

/* --- Base --- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ds-bg);
  color: var(--ds-ink);
  font-family: var(--font-sans-ui);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; }
a { color: var(--ds-primary-dark); text-decoration: none; }
a:hover { color: var(--ds-primary); }
.page { overflow-x: clip; }
:where(section, header, footer)[id] { scroll-margin-top: 96px; }

/* --- Header / nav --- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  height: 88px; padding: 0 var(--gutter);
  background: var(--ds-bg); border-bottom: 1px solid var(--ds-border);
}
.site-header .logo img { height: 30px; display: block; }
.site-nav { display: flex; align-items: center; gap: 30px; font-size: 14.5px; }
.site-nav a { color: var(--ds-ink); }
.site-nav a:hover { color: var(--ds-primary-dark); }
.site-nav a.active { color: var(--ds-primary-dark); font-weight: 600; }
.header-cta { display: block; flex: none; }
.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-right: -8px;
  background: none; border: 0; cursor: pointer; color: var(--ds-ink);
}
.nav-toggle svg { display: block; }

/* --- Buttons — always a full pill, three variants --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 50px; padding: 0 26px; border: 0; border-radius: var(--radius-pill);
  font-family: var(--font-sans-ui); font-size: 15.5px; font-weight: 500;
  line-height: 1; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .15s, filter .15s;
}
.btn--primary { background: var(--ds-primary); color: var(--ds-on-dark); }
.btn--primary:hover { background: var(--ds-primary-dark); color: var(--ds-on-dark); }
.btn--on-coral { background: var(--ds-on-dark); color: var(--ds-primary-dark); }
.btn--on-coral:hover { filter: brightness(.95); color: var(--ds-primary-dark); }
.btn--connection { background: var(--ds-blue); color: var(--ds-on-dark); }
.btn--connection:hover { background: var(--ds-blue-dark); color: var(--ds-on-dark); }
.btn--block { width: 100%; }
.btn--sm { height: 44px; font-size: 14.5px; }

/* --- Bands: full-bleed colour, content centred via the gutter --- */
.band { padding: clamp(60px, 8vw, 96px) var(--gutter); }
.band--sm { padding: clamp(48px, 6vw, 74px) var(--gutter); }
.band--cream { background: var(--ds-bg); }
.band--paper { background: var(--ds-card); }
.band--coral { background: var(--ds-primary); color: var(--ds-on-dark); }
.band--ink   { background: var(--ds-ink-band); color: var(--ds-on-dark); }
.band--blue  { background: var(--ds-blue); color: var(--ds-on-dark); }

/* --- Eyebrow: 34x2 coral rule + uppercase label --- */
.eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.eyebrow::before { content: ""; flex: none; width: 34px; height: 2px; background: var(--ds-primary); }
.eyebrow > span { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ds-primary-dark); }
.eyebrow--onDark::before { background: rgba(250,247,241,0.7); }
.eyebrow--onDark > span { color: rgba(250,247,241,0.82); }
.eyebrow--blue::before { background: var(--ds-blue); }
.eyebrow--blue > span { color: var(--ds-blue); }

/* --- Type scale (serif display). Fluid, capped at the design's desktop size. --- */
.t58 { font: 600 clamp(38px, 5.6vw, 58px)/1.1 var(--font-serif-display); letter-spacing: -0.018em; margin: 0; text-wrap: pretty; }
.t50 { font: 600 clamp(32px, 5vw, 50px)/1.08 var(--font-serif-display); letter-spacing: -0.015em; margin: 0; text-wrap: pretty; }
.t46 { font: 600 clamp(30px, 4.6vw, 46px)/1.08 var(--font-serif-display); letter-spacing: -0.015em; margin: 0; text-wrap: pretty; }
.t44 { font: 600 clamp(30px, 4.4vw, 44px)/1.1 var(--font-serif-display); letter-spacing: -0.015em; margin: 0; text-wrap: pretty; }
.t42 { font: 600 clamp(29px, 4.2vw, 42px)/1.12 var(--font-serif-display); letter-spacing: -0.015em; margin: 0; text-wrap: pretty; }
.t40 { font: 600 clamp(28px, 4vw, 40px)/1.12 var(--font-serif-display); letter-spacing: -0.015em; margin: 0; text-wrap: pretty; }
.t36 { font: 600 clamp(26px, 3.4vw, 36px)/1.12 var(--font-serif-display); letter-spacing: -0.015em; margin: 0; text-wrap: pretty; }
.t26 { font: 600 clamp(22px, 2.4vw, 26px)/1.2 var(--font-serif-display); margin: 0; text-wrap: pretty; }
.t24 { font: 600 clamp(21px, 2.2vw, 24px)/1.25 var(--font-serif-display); margin: 0; text-wrap: pretty; }
.t22 { font: 600 clamp(20px, 2vw, 22px)/1.3 var(--font-serif-display); margin: 0; text-wrap: pretty; }
.t20 { font: 600 20px/1.3 var(--font-serif-display); margin: 0; }
.t19 { font: 600 19px/1.3 var(--font-serif-display); margin: 0; }
.t18 { font: 600 18px/1.3 var(--font-serif-display); margin: 0; }
.price-lg { font: 600 clamp(46px, 6vw, 58px)/1 var(--font-serif-display); letter-spacing: -0.02em; margin: 0; }
.price-md { font: 600 38px/1 var(--font-serif-display); letter-spacing: -0.02em; margin: 0; }
.quote { font: 400 clamp(22px, 2.6vw, 27px)/1.42 var(--font-serif-display); letter-spacing: -0.01em; margin: 0; text-wrap: pretty; }

/* --- Grids (desktop shapes; collapse in the responsive block below) --- */
.hero-grid { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 72px; align-items: center; }
.threes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.how { display: grid; grid-template-columns: 1fr 64px 1fr 64px 1fr; align-items: start; }
.how-arrow { display: flex; align-items: center; justify-content: center; height: 62px; }
.states-head { display: grid; grid-template-columns: 0.5fr 0.5fr; gap: 80px; align-items: end; margin-bottom: 52px; }
.states { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 44px; }
.pricing-a { display: grid; grid-template-columns: 0.44fr 0.56fr; gap: 28px; align-items: start; }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.pricing-b { display: grid; grid-template-columns: 0.56fr 0.44fr; gap: 28px; margin-top: 28px; }
.faq-grid { display: grid; grid-template-columns: 0.34fr 0.66fr; gap: 72px; align-items: start; }
.faq-list { display: flex; flex-direction: column; gap: 14px; }
.app-row { display: grid; grid-template-columns: 0.5fr 0.5fr; gap: 80px; align-items: center; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.about-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.app-intro { display: grid; grid-template-columns: 0.54fr 0.46fr; gap: 72px; align-items: end; }
.story { display: grid; grid-template-columns: 0.28fr 0.72fr; gap: 72px; align-items: start; }
.beliefs { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.cta-row { display: flex; align-items: center; justify-content: space-between; gap: 60px; }

/* --- 50/50 photo splits (full-bleed, no gap) --- */
.split { display: grid; grid-template-columns: 1fr 1fr; }
.split-photo { position: relative; min-height: 480px; }
.split-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.split-scrim { position: absolute; inset: 0; }
.split-copy { padding: clamp(56px, 7vw, 90px) clamp(24px, 5vw, 88px); }

/* --- App phone mockups --- */
.device { justify-self: center; width: 420px; max-width: 100%; background: var(--ds-bg); border-radius: 26px; overflow: hidden; box-shadow: var(--shadow-float); }
.tabbar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 12px 14px 16px; border-top: 1px solid var(--ds-border); }
.tabbar span { text-align: center; font-size: 12px; color: var(--ds-faint); }
.tabbar span.active { font-weight: 600; color: var(--ds-primary-dark); }

/* --- Footer --- */
.site-footer { background: var(--ds-ink-band); padding: 64px var(--gutter) 54px; color: rgba(250,247,241,0.7); }
.site-footer-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 60px; padding-bottom: 40px; border-bottom: 1px solid rgba(250,247,241,0.14); }
.site-footer-brand { display: flex; align-items: center; gap: 12px; }
.site-footer-brand img { height: 23px; display: block; }
.site-footer-brand span { font-family: var(--font-serif-display); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--ds-on-dark); }
.site-footer nav { display: flex; gap: 40px; font-size: 14.5px; }
.site-footer nav a { color: rgba(250,247,241,0.72); }
.site-footer nav a:hover { color: var(--ds-on-dark); }
.site-footer .fineprint { margin: 24px 0 8px; font-size: 13.5px; line-height: 1.6; color: rgba(250,247,241,0.6); }
.site-footer .copyright { margin: 0; font-size: 13px; color: rgba(250,247,241,0.5); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1000px) {
  .how { grid-template-columns: 1fr; gap: 40px; }
  .how-arrow { display: none; }
  .states { grid-template-columns: 1fr 1fr; }
  .app-row, .two, .about-hero, .app-intro, .faq-grid, .states-head, .story, .pricing-a, .pricing-b { grid-template-columns: 1fr; gap: 40px; }
  .states-head { gap: 20px; margin-bottom: 36px; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 760px) {
  .site-nav {
    position: absolute; top: 88px; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--ds-bg); border-bottom: 1px solid var(--ds-border);
    padding: 8px var(--gutter) 16px; font-size: 16px;
    box-shadow: var(--shadow-card);
  }
  .site-nav[hidden] { display: none; }
  .site-nav a { display: block; width: 100%; padding: 12px 0; border-bottom: 1px solid var(--ds-border); }
  .site-nav a:last-child { border-bottom: 0; }
  .nav-toggle { display: inline-flex; }
  .header-cta { display: none; }

  .split { grid-template-columns: 1fr; }
  .split-photo { min-height: 260px; }
  .split--photo-first .split-photo { order: -1; }

  .hero-note { position: static !important; width: auto !important; left: auto !important; bottom: auto !important; margin: 14px 6px 0 !important; box-shadow: var(--shadow-card) !important; }

  .threes { grid-template-columns: 1fr; gap: 18px; }
  .plans { grid-template-columns: 1fr; }
  .cta-row { flex-direction: column; align-items: flex-start; gap: 26px; }

  .site-footer-top { flex-direction: column; gap: 28px; }
  .site-footer nav { gap: 26px; }
}
@media (max-width: 480px) {
  .states { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .header-cta .btn { width: auto; }
  .cta-row .btn { width: 100%; }
}

/* ==========================================================================
   How long it takes (How it works hero)
   Three small blue cards, so the length of the page below never reads as the
   length of the job. Blue, because it is the connection/steady colour, not
   the coral call-to-action.
   ========================================================================== */
.timings {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  margin: 0 0 14px;
}
.timing {
  background: rgba(62, 111, 163, 0.07);
  border: 1px solid rgba(62, 111, 163, 0.2);
  border-radius: 16px; padding: 18px 20px 20px;
}
.timing > span {
  display: block; margin-bottom: 10px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ds-blue);
}
.timing strong {
  display: block;
  font: 600 26px/1.1 var(--font-serif-display); letter-spacing: -0.01em;
  color: var(--ds-blue-dark);
}
.timing p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--ds-muted); }
.timings-note { margin: 0 0 30px; font-size: 15px; color: var(--ds-faint); }

@media (max-width: 640px) {
  .timings { grid-template-columns: 1fr; gap: 10px; }
  .timing { padding: 16px 18px 18px; }
  .timing strong { font-size: 23px; }
}

/* ==========================================================================
   Step flow (the How it works page)
   A single column that scrolls: numbered step, arrow, next step. Deliberately
   plain, so the process reads top to bottom with no cleverness in the way.
   ========================================================================== */
.flow { max-width: 880px; margin: 0 auto; }
.flow-phase { margin: 0 0 30px; }
.flow-phase:not(:first-child) { margin-top: 56px; }
.flow-step {
  display: grid; grid-template-columns: 74px 1fr; gap: 26px; align-items: start;
  background: var(--ds-bg); border-radius: 20px; padding: 28px 30px 30px;
  box-shadow: var(--shadow-card);
}
.flow-step--plain { background: none; box-shadow: none; padding: 0 30px 0 0; }
.flow-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 62px; height: 62px; border-radius: var(--radius-round);
  background: var(--ds-primary); color: var(--ds-on-dark);
  font: 600 26px/1 var(--font-serif-display);
}
.flow-step h3 { margin: 0 0 10px; }
.flow-step p { margin: 0; font-size: 16.5px; line-height: 1.65; color: var(--ds-muted); }
.flow-step p + p { margin-top: 12px; }
.flow-arrow { display: grid; grid-template-columns: 74px 1fr; gap: 26px; }
.flow-arrow > span { display: flex; align-items: center; justify-content: center; height: 46px; color: var(--ds-primary); }
.flow-arrow svg { display: block; }
.flow-sub {
  margin: 18px 0 0; padding: 18px 20px;
  background: var(--ds-card); border-radius: 16px;
}
.flow-sub > p:first-child {
  margin: 0 0 12px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ds-faint);
}
.flow-sub ol { margin: 0; padding-left: 20px; }
.flow-sub li { margin: 0 0 9px; font-size: 15.5px; line-height: 1.55; color: var(--ds-ink); }
.flow-sub li:last-child { margin-bottom: 0; }
.flow-sub li span { color: var(--ds-muted); }

/* --- Product photos — the real kit, in a real house. The sensors look alike,
   so every shot is captioned with which one it is and where it went. --- */
.kit-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 20px 0 0; }
.kit-shot { margin: 0; }
.kit-shot img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 14px; background: var(--ds-card);
}
.kit-shot figcaption { margin: 9px 2px 0; font-size: 14px; line-height: 1.45; color: var(--ds-muted); }
.kit-shot--wide { margin: 20px 0 0; }
.kit-shot--wide img { aspect-ratio: 16 / 7; }

/* the kit list, on the pricing card and on "what turns up" */
.kit-item { display: grid; grid-template-columns: 84px 1fr; gap: 18px; align-items: start; }
.kit-item img {
  display: block; width: 84px; height: 84px; object-fit: cover;
  border-radius: 14px; background: var(--ds-bg);
}

@media (max-width: 640px) {
  .flow-step { grid-template-columns: 1fr; gap: 18px; padding: 24px 24px 26px; }
  .kit-shots { grid-template-columns: 1fr; gap: 20px; }
  .kit-item { grid-template-columns: 64px 1fr; gap: 14px; }
  .kit-item img { width: 64px; height: 64px; }
  .flow-step--plain { padding: 0; }
  .flow-num { width: 52px; height: 52px; font-size: 22px; }
  .flow-arrow { grid-template-columns: 1fr; gap: 0; }
  .flow-arrow > span { justify-content: flex-start; padding-left: 15px; height: 38px; }
}

/* ==========================================================================
   The sign-up form (Get started)
   Calm and unhurried: generous fields, one column, no red asterisks. The
   form is the only place on the site a visitor types anything, so it gets
   the same warmth as the copy around it.
   ========================================================================== */
.signup { display: grid; grid-template-columns: 0.48fr 0.52fr; gap: 64px; align-items: start; }
.signup-form {
  background: var(--ds-bg); border-radius: 22px;
  padding: 34px 36px 36px; box-shadow: var(--shadow-card);
}
.field { margin-bottom: 20px; }
.field label { display: block; margin-bottom: 7px; font-size: 15px; font-weight: 500; }
.field .hint { font-weight: 400; color: var(--ds-faint); }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 15px;
  background: var(--ds-paper); color: var(--ds-ink);
  border: 1px solid var(--ds-border); border-radius: var(--radius-field);
  font-family: var(--font-sans-ui); font-size: 16px; line-height: 1.4;
}
.field textarea { min-height: 92px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--ds-primary);
  box-shadow: 0 0 0 3px var(--ds-halo);
}
.field select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none'%3E%3Cpath d='m5 8 5 5 5-5' stroke='%236E655C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; padding-right: 42px;
}
/* Honeypot: off-screen for people, irresistible to bots. Never display:none,
   which some bots skip. */
.field--trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-error {
  margin: 0 0 18px; padding: 13px 16px; border-radius: var(--radius-field);
  background: rgba(178, 59, 59, 0.08); color: var(--ds-error);
  font-size: 15px; line-height: 1.5;
}
.form-foot { margin: 18px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--ds-faint); }
.signup-done { text-align: center; padding: 18px 0 6px; }
.signup-done .tick {
  display: inline-flex; align-items: center; justify-content: center;
  width: 62px; height: 62px; margin-bottom: 22px;
  border-radius: var(--radius-round); background: var(--ds-green); color: var(--ds-on-dark);
}
.signup-aside li {
  display: flex; align-items: flex-start; gap: 13px;
  margin-bottom: 16px; font-size: 16.5px; line-height: 1.6;
}
.signup-aside ul { margin: 0; padding: 0; list-style: none; }
.signup-aside svg { flex: none; margin-top: 3px; color: var(--ds-primary); }

@media (max-width: 1000px) {
  .signup { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 480px) {
  .signup-form { padding: 26px 22px 28px; }
}