/* CozyHaus site tokens: the Cozy Pixel theme of the first landing page, extended with the app's colours.
   The two fonts are served from the site itself (assets/fonts, SIL Open Font License, see the OFL files there),
   so a visit never asks Google or anyone else for anything. They are the same variable woff2 files Google Fonts
   serves (Pixelify Sans v3, Lexend v26), in two parts each: Latin, and Latin Extended for the odd accented name.
   Light values live on bare :root. Dark values follow the system unless the page sets data-theme="light",
   and data-theme="dark" forces them. Accents marked "fixed" keep one value in both themes and always carry
   --ink text and edges. */

@font-face {
  font-family: 'Pixelify Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/pixelify-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Pixelify Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/pixelify-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/lexend-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/lexend-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* grounds and surfaces */
  --ground: #fbf3e6;          /* the page */
  --band: #efe2cc;            /* a full-width band that sets a section apart */
  --card: #fffdf8;            /* boxes and cards */
  --paper: #fffaf3;           /* buttons, inputs, FAQ items, dialogue */
  --cream: #f6ecd9;           /* quiet fills: art tiles, portraits, notes */
  --mat: #ffffff;             /* the mat around big pixel art (the hero house, scenes) */
  --art-bg: #f3e6cc;          /* parchment behind icons and small art, so ink outlines read in both themes */
  --line: #e6d8bf;            /* dashed dividers, decorative only */

  /* ink and text */
  --ink: #2b2140;             /* fixed: text and outlines on light fills in both themes */
  --edge: #2b2140;            /* every pixel border */
  --text: #2b2140;
  --muted: #6b5f7a;
  --inverse: #2b2140;         /* the one dark-on-light flip: the store badge */
  --on-inverse: #fff4e4;

  /* accents, fixed in both themes, always with --ink text */
  --tomato: #f2645a;          /* the action colour: primary button, wordmark */
  --honey: #f2c27b;           /* selection, name tags, highlights */
  --sage: #8fb79a;            /* done, progress */
  --sky: #9fd3ef;             /* calm information */
  --blush: #f6b2a8;           /* the app's Big job colour, soft pink */
  --mint: #bfe3b3;            /* the app's Quick colour */
  --butter: #f7d79c;          /* the app's Medium colour */
  --lilac: #b58bd6;           /* the house spirit, mystery and surprises */
  --gold: #ffd23f;            /* the care glow, sparkles and stars */
  --denim: #5b7db1;           /* art only (the partner's sofa and shirts), never text */
  --oak: #c98e5d;             /* art only: wood */

  /* soft tints for cards and bands, with --text on top */
  --tint-tomato: #fde1dd;
  --tint-honey: #fbecd2;
  --tint-sage: #e3f1dc;
  --tint-sky: #e2f1fa;
  --tint-lilac: #efe5f8;
  --pick: #fde9c4;            /* a picked option */

  /* accent text on --ground, --card, --paper and --cream (4.5:1 or more) */
  --tomato-text: #b23a33;     /* kickers */
  --honey-text: #8a5a12;
  --sage-text: #3f6a4b;
  --denim-text: #3f5f92;      /* links */
  --lilac-text: #6b4a91;
  --sky-text: #2b6a8c;

  /* focus, shade and light */
  --focus: #3a86b5;           /* 3px ring, 3px offset (3:1 on the ground) */
  --shade: rgba(43, 33, 64, 0.22);   /* the hard drop under boxes and buttons */
  --scrim: rgba(30, 20, 45, 0.45);
  --lit: rgba(255, 255, 255, 0.5);   /* the 2px lit top inside tomato and honey buttons */
  --lit-paper: rgba(255, 255, 255, 0.55); /* the same on paper buttons */
  --dim: rgba(43, 33, 64, 0.14);     /* the 3px shaded bottom inside tomato and honey buttons */
  --dim-paper: rgba(43, 33, 64, 0.14); /* the same on paper buttons */

  /* the pixel phone */
  --phone-rim: #2b2140;
  --phone-body: #3d3352;
  --phone-hi: #5a4e72;
  --phone-glass: #0f0b17;

  /* type. Pixel type for headings, labels, buttons and chips (the look from before 11 Oct); reading text is Lexend. */
  --font-pixel: 'Pixelify Sans', ui-monospace, 'SF Mono', Menlo, Consolas, 'Courier New', monospace;
  --font-body: 'Lexend', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: var(--font-pixel);
  --heading: #1d1530;                     /* the pixel headings' ink: a step darker than --text (16:1 on the ground) */
  --fs-hero: clamp(38px, 6vw, 60px);      /* h1, Pixelify 700, line-height 1.02 */
  --fs-h2: clamp(28px, 4vw, 40px);        /* section titles, Pixelify 700, 1.08 */
  --fs-h3: clamp(20px, 1.2vw + 14px, 23px); /* card titles, Lexend 600, 1.25 */
  --fs-h4: 19px;                          /* FAQ questions, small titles, Lexend 500, 1.3 */
  --fs-stat: clamp(40px, 5vw, 56px);      /* one big number, Lexend 600, 1 */
  --fs-logo: 30px;                        /* the wordmark, Pixelify 700 */
  --fs-kicker: 14px;                      /* Lexend 600, uppercase, 0.08em */
  --fs-button: 18px;                      /* Lexend 500 */
  --fs-button-small: 16px;
  --fs-chip: 15px;                        /* Lexend 500 */
  --fs-lead: clamp(18px, 0.4vw + 16.5px, 20px); /* Lexend 400, 1.55 */
  --fs-body: 17px;                        /* Lexend 400, 1.55 */
  --fs-small: 15px;                       /* Lexend 400, 1.5 */
  --fs-fine: 13.5px;                      /* Lexend 400, 1.45 */
  --lh-tight: 1.02;
  --lh-title: 1.1;
  --lh-body: 1.55;
  --kicker-track: 0.08em;

  /* space */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s7: 32px;
  --s8: 48px;
  --s9: 64px;
  --s10: 96px;
  --gutter: 20px;
  --wrap: 1040px;
  --wrap-wide: 1200px;
  --section-y: clamp(40px, 4.5vw, 60px);    /* padding above and below each section */
  --grid-gap: 18px;
  --tap: 48px;                            /* minimum button height */
  --tap-small: 40px;

  /* the pixel unit and its shadows. These resolve on :root, so a different edge colour on one element
     means writing that element's own box-shadow (or redefining --pb on it with the other colour). */
  --u: 2px;
  --pb: var(--u) 0 0 0 var(--edge), calc(var(--u) * -1) 0 0 0 var(--edge), 0 var(--u) 0 0 var(--edge), 0 calc(var(--u) * -1) 0 0 var(--edge);
  --pb-ink: var(--u) 0 0 0 var(--ink), calc(var(--u) * -1) 0 0 0 var(--ink), 0 var(--u) 0 0 var(--ink), 0 calc(var(--u) * -1) 0 0 var(--ink);
  --drop: 0 6px 0 0 var(--shade);         /* resting boxes */
  --drop-btn: 0 5px 0 0 var(--shade);     /* resting buttons */
  --drop-hover: 0 7px 0 0 var(--shade);   /* a button under the pointer (it rises 2px) */
  --press: 0 2px 0 0 var(--shade);        /* a pressed button (it sinks 3px) */
  --box: var(--pb), var(--drop);
  --btn-lit: inset 0 -3px 0 0 var(--dim), inset 0 2px 0 0 var(--lit);             /* inside tomato and honey buttons */
  --btn-lit-paper: inset 0 -3px 0 0 var(--dim-paper), inset 0 2px 0 0 var(--lit-paper); /* inside paper buttons */
  --box-margin: var(--u) var(--u) 6px;    /* keeps the border and drop inside the layout */

  /* stepped corners for things bigger than a box: clip-path values on a 4px stair (2px for the notch).
     An outline is two layers: --clip-step-N outside, --clip-step-(N-4) on a child inset by 4px. */
  --clip-notch: polygon(2px 0, calc(100% - 2px) 0, calc(100% - 2px) 2px, 100% 2px, 100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%, 2px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px), 0 2px, 2px 2px);
  --clip-notch-4: polygon(4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px), 0 4px, 4px 4px);
  --clip-step-8: polygon(8px 0, calc(100% - 8px) 0, calc(100% - 8px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 8px, 100% 8px, 100% calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 4px), calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) 100%, 8px 100%, 8px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 8px), 0 calc(100% - 8px), 0 8px, 4px 8px, 4px 4px, 8px 4px);
  --clip-step-12: polygon(12px 0, calc(100% - 12px) 0, calc(100% - 12px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 8px, calc(100% - 4px) 12px, 100% 12px, 100% calc(100% - 12px), calc(100% - 4px) calc(100% - 12px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 4px), calc(100% - 12px) calc(100% - 4px), calc(100% - 12px) 100%, 12px 100%, 12px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 8px), 4px calc(100% - 12px), 0 calc(100% - 12px), 0 12px, 4px 12px, 4px 8px, 4px 4px, 12px 4px);
  --clip-step-16: polygon(16px 0, calc(100% - 16px) 0, calc(100% - 16px) 4px, calc(100% - 8px) 4px, calc(100% - 8px) 8px, calc(100% - 4px) 8px, calc(100% - 4px) 12px, calc(100% - 4px) 16px, 100% 16px, 100% calc(100% - 16px), calc(100% - 4px) calc(100% - 16px), calc(100% - 4px) calc(100% - 12px), calc(100% - 4px) calc(100% - 8px), calc(100% - 8px) calc(100% - 8px), calc(100% - 8px) calc(100% - 4px), calc(100% - 16px) calc(100% - 4px), calc(100% - 16px) 100%, 16px 100%, 16px calc(100% - 4px), 8px calc(100% - 4px), 8px calc(100% - 8px), 4px calc(100% - 8px), 4px calc(100% - 12px), 4px calc(100% - 16px), 0 calc(100% - 16px), 0 16px, 4px 16px, 4px 12px, 4px 8px, 8px 8px, 8px 4px, 16px 4px);
  --clip-step-20: polygon(20px 0, calc(100% - 20px) 0, calc(100% - 20px) 4px, calc(100% - 12px) 4px, calc(100% - 12px) 8px, calc(100% - 8px) 8px, calc(100% - 8px) 12px, calc(100% - 4px) 12px, calc(100% - 4px) 16px, calc(100% - 4px) 20px, 100% 20px, 100% calc(100% - 20px), calc(100% - 4px) calc(100% - 20px), calc(100% - 4px) calc(100% - 16px), calc(100% - 4px) calc(100% - 12px), calc(100% - 8px) calc(100% - 12px), calc(100% - 8px) calc(100% - 8px), calc(100% - 12px) calc(100% - 8px), calc(100% - 12px) calc(100% - 4px), calc(100% - 20px) calc(100% - 4px), calc(100% - 20px) 100%, 20px 100%, 20px calc(100% - 4px), 12px calc(100% - 4px), 12px calc(100% - 8px), 8px calc(100% - 8px), 8px calc(100% - 12px), 4px calc(100% - 12px), 4px calc(100% - 16px), 4px calc(100% - 20px), 0 calc(100% - 20px), 0 20px, 4px 20px, 4px 16px, 4px 12px, 8px 12px, 8px 8px, 12px 8px, 12px 4px, 20px 4px);
  --clip-step-24: polygon(24px 0, calc(100% - 24px) 0, calc(100% - 24px) 4px, calc(100% - 16px) 4px, calc(100% - 16px) 8px, calc(100% - 12px) 8px, calc(100% - 12px) 12px, calc(100% - 8px) 12px, calc(100% - 8px) 16px, calc(100% - 4px) 16px, calc(100% - 4px) 20px, calc(100% - 4px) 24px, 100% 24px, 100% calc(100% - 24px), calc(100% - 4px) calc(100% - 24px), calc(100% - 4px) calc(100% - 20px), calc(100% - 4px) calc(100% - 16px), calc(100% - 8px) calc(100% - 16px), calc(100% - 8px) calc(100% - 12px), calc(100% - 12px) calc(100% - 12px), calc(100% - 12px) calc(100% - 8px), calc(100% - 16px) calc(100% - 8px), calc(100% - 16px) calc(100% - 4px), calc(100% - 24px) calc(100% - 4px), calc(100% - 24px) 100%, 24px 100%, 24px calc(100% - 4px), 16px calc(100% - 4px), 16px calc(100% - 8px), 12px calc(100% - 8px), 12px calc(100% - 12px), 8px calc(100% - 12px), 8px calc(100% - 16px), 4px calc(100% - 16px), 4px calc(100% - 20px), 4px calc(100% - 24px), 0 calc(100% - 24px), 0 24px, 4px 24px, 4px 20px, 4px 16px, 8px 16px, 8px 12px, 12px 12px, 12px 8px, 16px 8px, 16px 4px, 24px 4px);

  /* motion: stepped and short */
  --t-press: 60ms;
  --t-hover: 80ms;
  --t-pop: 240ms;
  --step-hover: steps(2, end);
  --step-pop: steps(4, end);
  --bob: 1.1s;
}

@media (max-width: 640px) {
  :root { --gutter: 16px; --grid-gap: 14px; --fs-body: 16.5px; }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #241d33;
    --band: #1c1727;
    --card: #3a3052;
    --paper: #362d4c;
    --cream: #2c2440;
    --mat: #e6d5b5;
    --art-bg: #e6d5b5;
    --line: #4a3f61;
    --edge: #0f0b17;
    --text: #fff4e4;
    --heading: #fffaf2;
    --muted: #c9bdd9;
    --inverse: #fff4e4;
    --on-inverse: #2b2140;
    --tint-tomato: #573a40;
    --tint-honey: #54452a;
    --tint-sage: #34503d;
    --tint-sky: #2c4257;
    --tint-lilac: #45375f;
    --pick: #5e4526;
    --tomato-text: #ff8f84;
    --honey-text: #f2c27b;
    --sage-text: #a8dcb4;
    --denim-text: #a9c4ea;
    --lilac-text: #d4b8f0;
    --sky-text: #9fd3ef;
    --focus: #9fd3ef;
    --shade: rgba(0, 0, 0, 0.4);
    --lit-paper: rgba(255, 255, 255, 0.1);
    --dim-paper: rgba(15, 11, 23, 0.35);
    --phone-rim: #0f0b17;
    --phone-body: #514569;
    --phone-hi: #6e6188;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --ground: #241d33;
  --band: #1c1727;
  --card: #3a3052;
  --paper: #362d4c;
  --cream: #2c2440;
  --mat: #e6d5b5;
  --art-bg: #e6d5b5;
  --line: #4a3f61;
  --edge: #0f0b17;
  --text: #fff4e4;
  --heading: #fffaf2;
  --muted: #c9bdd9;
  --inverse: #fff4e4;
  --on-inverse: #2b2140;
  --tint-tomato: #573a40;
  --tint-honey: #54452a;
  --tint-sage: #34503d;
  --tint-sky: #2c4257;
  --tint-lilac: #45375f;
  --pick: #5e4526;
  --tomato-text: #ff8f84;
  --honey-text: #f2c27b;
  --sage-text: #a8dcb4;
  --denim-text: #a9c4ea;
  --lilac-text: #d4b8f0;
  --sky-text: #9fd3ef;
  --focus: #9fd3ef;
  --shade: rgba(0, 0, 0, 0.4);
  --lit-paper: rgba(255, 255, 255, 0.1);
  --dim-paper: rgba(15, 11, 23, 0.35);
  --phone-rim: #0f0b17;
  --phone-body: #514569;
  --phone-hi: #6e6188;
  color-scheme: dark;
}


body {
  background: var(--ground);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}