/* paralazy.com — one stylesheet for the three pages. No scripts, no cookies, nothing loaded from another host.
   Colours, type and radii are the app's (design/tokens/tokens.css); when a token changes there, change it here. */

@font-face { font-family: "Bricolage Grotesque"; src: url("/fonts/BricolageGrotesque-800.ttf") format("truetype"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/fonts/Figtree-400.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/fonts/Figtree-600.ttf") format("truetype"); font-weight: 600; font-display: swap; }

:root {
  color-scheme: light dark;

  --color-bg-page: oklch(0.968 0.017 75);
  --color-bg-card: oklch(0.995 0.005 75);
  --color-bg-control: oklch(0.935 0.02 70);
  --color-icon-tile: oklch(0.985 0.012 75);
  --color-text-primary: oklch(0.3 0.06 340);
  --color-text-secondary: oklch(0.43 0.045 340);
  --color-text-muted: oklch(0.6 0.03 340);
  --color-hairline: oklch(0.9 0.02 70);
  --color-accent: oklch(0.3 0.06 340);
  --color-accent-pressed: oklch(0.24 0.055 340);
  --color-on-accent: oklch(0.97 0.018 75);
  --color-accent-subtle: oklch(0.925 0.03 340);

  --color-room-bathroom-card: oklch(0.89 0.032 225);
  --color-room-bathroom-shape: oklch(0.845 0.045 225);
  --color-room-kitchen-card: oklch(0.89 0.045 140);
  --color-room-kitchen-shape: oklch(0.845 0.06 140);
  --color-room-office-card: oklch(0.885 0.065 62);
  --color-room-office-shape: oklch(0.84 0.085 60);
  --color-room-bedroom-card: oklch(0.885 0.035 325);
  --color-room-bedroom-shape: oklch(0.84 0.05 325);
  --color-room-hallway-card: oklch(0.895 0.06 88);
  --color-room-living-room-card: oklch(0.88 0.05 28);

  --color-progress-card: oklch(0.3 0.06 340);
  --color-progress-shape: oklch(0.36 0.07 340);
  --color-on-progress: oklch(0.97 0.018 75);
  --color-on-progress-secondary: oklch(0.84 0.035 55);
  --color-progress-button: oklch(0.86 0.09 62);
  --color-on-progress-button: oklch(0.3 0.06 340);
  --color-progress-tile: oklch(0.38 0.065 340);

  --color-done-bg: oklch(0.905 0.045 140);
  --color-done-mark: oklch(0.3 0.06 340);
  --color-on-done-mark: oklch(0.97 0.018 75);

  --color-logo-card: oklch(0.86 0.09 62);
  --color-logo-bolt: oklch(0.3 0.06 340);

  /* The page's own: the circles outside the container and the ink panel of "Dla kogo?". */
  --color-deco-peach: oklch(0.86 0.09 62);
  --color-deco-peach-soft: oklch(0.905 0.06 64);
  --color-deco-plum: oklch(0.3 0.06 340);
  --color-ink-bg: oklch(0.3 0.06 340);
  --color-ink-shape: oklch(0.36 0.07 340);
  --color-on-ink: oklch(0.97 0.018 75);
  --color-on-ink-secondary: oklch(0.84 0.035 55);
  --shadow-demo: 0 30px 60px oklch(0.2 0.03 340 / 0.14);

  --font-display: "Bricolage Grotesque", "SF Pro Rounded", -apple-system, system-ui, sans-serif;
  --font-text: "Figtree", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;

  --radius-card: 40px;
  --radius-panel: 32px;
  --radius-pill: 999px;
  --size-wrap: 1120px;
  --space-x: 20px;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-page: oklch(0.19 0.015 340);
    --color-bg-card: oklch(0.25 0.018 340);
    --color-bg-control: oklch(0.3 0.02 340);
    --color-icon-tile: oklch(0.22 0.018 340);
    --color-text-primary: oklch(0.95 0.02 60);
    --color-text-secondary: oklch(0.8 0.03 55);
    --color-text-muted: oklch(0.62 0.025 50);
    --color-hairline: oklch(0.31 0.02 340);
    --color-accent: oklch(0.83 0.1 62);
    --color-accent-pressed: oklch(0.77 0.1 60);
    --color-on-accent: oklch(0.26 0.055 340);
    --color-accent-subtle: oklch(0.33 0.045 55);

    --color-room-bathroom-card: oklch(0.33 0.03 225);
    --color-room-bathroom-shape: oklch(0.38 0.04 225);
    --color-room-kitchen-card: oklch(0.33 0.04 140);
    --color-room-kitchen-shape: oklch(0.38 0.05 140);
    --color-room-office-card: oklch(0.34 0.05 55);
    --color-room-office-shape: oklch(0.39 0.06 55);
    --color-room-bedroom-card: oklch(0.32 0.035 325);
    --color-room-bedroom-shape: oklch(0.37 0.045 325);
    --color-room-hallway-card: oklch(0.345 0.045 85);
    --color-room-living-room-card: oklch(0.33 0.045 28);

    --color-progress-card: oklch(0.9 0.04 65);
    --color-progress-shape: oklch(0.85 0.06 63);
    --color-on-progress: oklch(0.28 0.06 340);
    --color-on-progress-secondary: oklch(0.42 0.05 340);
    --color-progress-button: oklch(0.3 0.06 340);
    --color-on-progress-button: oklch(0.97 0.018 75);
    --color-progress-tile: oklch(0.96 0.02 70);

    --color-done-bg: oklch(0.26 0.035 140);
    --color-done-mark: oklch(0.83 0.1 62);
    --color-on-done-mark: oklch(0.26 0.055 340);

    --color-logo-card: oklch(0.95 0.02 70);

    --color-deco-peach: oklch(0.36 0.055 55);
    --color-deco-peach-soft: oklch(0.29 0.04 55);
    --color-deco-plum: oklch(0.3 0.045 340);
    --color-ink-bg: oklch(0.27 0.05 340);
    --color-ink-shape: oklch(0.32 0.06 340);
    --color-on-ink: oklch(0.95 0.02 70);
    --color-on-ink-secondary: oklch(0.82 0.035 55);
    --shadow-demo: 0 30px 60px oklch(0.05 0.01 340 / 0.5);
  }
}

/* Japanese, Korean and Chinese: the two faces write the Latin letters, the system's own face the rest. Sizes stay the
   same as everywhere; only the tight tracking and leading of the display face are let out, which these scripts need. */
:lang(ja) { --font-display: "Bricolage Grotesque", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", system-ui, sans-serif;
  --font-text: "Figtree", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", system-ui, sans-serif; }
:lang(ko) { --font-display: "Bricolage Grotesque", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
  --font-text: "Figtree", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif; word-break: keep-all; }
:lang(zh) { --font-display: "Bricolage Grotesque", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  --font-text: "Figtree", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif; }
:lang(zh-Hant) { --font-display: "Bricolage Grotesque", "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", system-ui, sans-serif;
  --font-text: "Figtree", "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", system-ui, sans-serif; }
/* Arabic: the system's face for the script, no tracking (it would pull joined letters apart) and room for the marks above and below. */
:lang(ar) { --font-display: "Bricolage Grotesque", "SF Arabic", "Geeza Pro", "Noto Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;
  --font-text: "Figtree", "SF Arabic", "Geeza Pro", "Noto Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif; }
:lang(ar) :is(.hero h1, .page h1, .section h2, .feature h3, .panel h2, .prose h2, .card__title, .done__title, .enough__title, .card__button, .enough__button, .button) { letter-spacing: 0; line-height: 1.4; }
:is(:lang(ja), :lang(ko), :lang(zh)) :is(.hero h1, .page h1, .section h2, .feature h3, .panel h2, .prose h2, .card__title, .done__title, .enough__title) { letter-spacing: 0; line-height: 1.25; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  position: relative; margin: 0; min-height: 100svh;
  display: flex; flex-direction: column;
  background: var(--color-bg-page); color: var(--color-text-primary);
  font: 400 17px/26px var(--font-text);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul { margin: 0; }
a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
a:focus-visible, .button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 6px; }

/* ---------- The circles: decoration in the margins, never under text ---------- */
.deco { --margin: max(0px, (100vw - var(--size-wrap) - 2 * var(--space-x)) / 2);   /* the free strip beside the container */
  position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.deco span { position: absolute; border-radius: var(--radius-pill); }
.deco__a { width: clamp(220px, 36vw, 580px); aspect-ratio: 1; top: clamp(-190px, -11vw, -70px); right: clamp(-170px, -9vw, -60px); background: var(--color-deco-peach); }
/* The two at the sides show only as much as the margin allows, less 30 px, so they end before the container. */
.deco__b { width: 340px; aspect-ratio: 1; top: calc(100svh - 40px); left: calc(var(--margin) - 370px); background: var(--color-deco-peach-soft); }
.deco__c { width: 210px; aspect-ratio: 1; top: calc(100svh + 430px); right: calc(var(--margin) - 240px); background: var(--color-deco-plum); }
/* Under the footer, in the gap between the name and the links. */
.deco__d { width: 240px; aspect-ratio: 1; bottom: -165px; left: 40%; background: var(--color-deco-peach); }
/* Right-to-left pages: the same circles, mirrored, so the large one stays behind the square and not behind the text. */
[dir="rtl"] .deco__a { right: auto; left: clamp(-170px, -9vw, -60px); }
[dir="rtl"] .deco__b { left: auto; right: calc(var(--margin) - 370px); }
[dir="rtl"] .deco__c { right: auto; left: calc(var(--margin) - 240px); }
[dir="rtl"] .deco__d { left: auto; right: 40%; }
.deco--quiet .deco__b { top: 520px; }
.deco--quiet .deco__c { top: 900px; }

.wrap { width: 100%; max-width: calc(var(--size-wrap) + 2 * var(--space-x)); margin: 0 auto; padding: 0 var(--space-x); }
main { position: relative; flex: 1; }

/* ---------- The language switch: top left of every page, above the mark. A list that opens without a script. ---------- */
.lang { position: absolute; z-index: 5; top: 18px; inset-inline-start: var(--space-x); font-size: 13px; line-height: 18px; font-weight: 600; }
.lang summary { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: var(--radius-pill); background: var(--color-bg-card); color: var(--color-text-primary); cursor: pointer; list-style: none; -webkit-user-select: none; user-select: none; }
.lang summary::-webkit-details-marker { display: none; }
.lang summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.lang summary svg { width: 16px; height: 16px; flex: none; }
.lang summary svg:last-child { width: 14px; height: 14px; transition: transform 150ms var(--ease); }
.lang[open] summary svg:last-child { transform: rotate(180deg); }
.lang__list { position: absolute; top: 42px; inset-inline-start: 0; display: grid; grid-template-columns: repeat(3, auto); width: max-content; max-width: calc(100vw - 2 * var(--space-x)); padding: 6px; border-radius: 20px; background: var(--color-bg-card); box-shadow: var(--shadow-demo); }
.lang__list a { padding: 9px 12px; border-radius: 14px; color: var(--color-text-secondary); text-decoration: none; }
.lang__list a:hover { background: var(--color-bg-control); color: var(--color-text-primary); }
.lang__list a[aria-current] { background: var(--color-accent-subtle); color: var(--color-text-primary); }

/* ---------- The mark and the name ---------- */
.lockup { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--color-text-primary); font: 800 26px/28px var(--font-display); letter-spacing: -0.035em; }
.lockup svg { width: 36px; height: 36px; flex: none; }
.lockup--sm { font-size: 19px; line-height: 22px; gap: 8px; }
.lockup--sm svg { width: 24px; height: 24px; }
.mark__card { fill: var(--color-logo-card); }
.mark__bolt { fill: var(--color-logo-bolt); }

/* ---------- Buttons ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 58px; padding: 0 30px; border-radius: var(--radius-pill);
  background: var(--color-accent); color: var(--color-on-accent);
  font: 800 18px/22px var(--font-display); text-decoration: none;
  transition: background-color 150ms var(--ease), transform 150ms var(--ease);
}
.button:hover { background: var(--color-accent-pressed); }
.button:active { transform: scale(0.97); }
/* Where the download button will stand, until the app is in the store: the button's shape as an outline, not a link. */
.button--soon, .button--soon:hover { background: transparent; color: var(--color-text-primary); box-shadow: inset 0 0 0 2px var(--color-text-primary); cursor: default; }
.button--soon:active { transform: none; }

/* ---------- Hero: the claim on the left, the app's loop on the right ---------- */
.hero {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 64px; align-items: center;
  min-height: min(100svh, 860px); padding-block: 76px 40px;
}
.hero__text { display: flex; flex-direction: column; align-items: flex-start; }
.hero h1 { margin-top: 44px; font: 800 clamp(34px, 4.7vw, 56px)/1.02 var(--font-display); letter-spacing: -0.04em; }
/* The claim line by line; the size is one for every language, a longer claim takes a third line (scripts/site_texts.py). */
.hero h1 span { display: block; }
.hero__lead { margin-top: 24px; max-width: 520px; font-size: 19px; line-height: 28px; color: var(--color-text-secondary); }
.hero__cta { margin-top: 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.hero__note { font-size: 13px; line-height: 18px; color: var(--color-text-muted); padding-inline-start: 6px; }

/* The square: every size inside is a share of its width (cqw), so the loop keeps its proportions at any size.
   The square itself is the face that is turned to the viewer; there is nothing behind it but the page. */
.demo { position: relative; justify-self: end; width: 100%; max-width: 480px; aspect-ratio: 1; container-type: inline-size;
  -webkit-user-select: none; user-select: none; cursor: default; }   /* a picture of the app, not text to pick up */
.face { position: absolute; inset: 0; overflow: hidden; isolation: isolate; border-radius: var(--radius-card); box-shadow: var(--shadow-demo); backface-visibility: hidden; }
.frame { position: absolute; inset: 0; isolation: isolate; display: flex; flex-direction: column; padding: 6.5cqw; }
.frame--progress, .frame--done { opacity: 0; }

.frame--card { --card-ink: var(--color-text-primary); --card-ink-2: var(--color-text-secondary); --card-tile: var(--color-icon-tile);
  --card-button: var(--color-accent); --card-on-button: var(--color-on-accent);
  background: var(--card-bg); color: var(--card-ink); }
.frame--card::before { content: ""; position: absolute; z-index: -1; top: -25cqw; inset-inline-end: -16cqw; width: 52cqw; aspect-ratio: 1; border-radius: var(--radius-pill); background: var(--card-shape); }
/* Rooms whose card differs clearly from the page (the beige of "Całe mieszkanie" would melt into it). */
.frame--bedroom { --card-bg: var(--color-room-bedroom-card); --card-shape: var(--color-room-bedroom-shape); }
.frame--bathroom { --card-bg: var(--color-room-bathroom-card); --card-shape: var(--color-room-bathroom-shape); }
.frame--kitchen { --card-bg: var(--color-room-kitchen-card); --card-shape: var(--color-room-kitchen-shape); }
.frame--progress { --card-bg: var(--color-progress-card); --card-shape: var(--color-progress-shape);
  --card-ink: var(--color-on-progress); --card-ink-2: var(--color-on-progress-secondary); --card-tile: var(--color-progress-tile);
  --card-button: var(--color-progress-button); --card-on-button: var(--color-on-progress-button); }

.card__head { display: flex; align-items: center; gap: 3cqw; }
.card__tile { display: grid; place-items: center; width: 12.5cqw; aspect-ratio: 1; border-radius: 4.6cqw; background: var(--card-tile); color: var(--card-ink); }
.card__tile svg { width: 5.4cqw; height: 5.4cqw; }
.card__status { font: 600 3.2cqw/1.3 var(--font-text); color: var(--card-ink-2); }
.card__body { margin-top: auto; }
.card__title { font: 800 8.4cqw/1.05 var(--font-display); letter-spacing: -0.035em; text-wrap: balance; }
.card__meta { margin-top: 1.8cqw; font: 400 3.6cqw/1.4 var(--font-text); color: var(--card-ink-2); }
.card__actions { margin-top: 6cqw; display: flex; flex-direction: column; gap: 2.4cqw; }
.card__button { position: relative; display: grid; place-items: center; height: 12.2cqw; border-radius: var(--radius-pill);
  background: var(--card-button); color: var(--card-on-button); font: 800 3.9cqw/1 var(--font-display); }
/* The finger: a soft dot that lands on the button just before it dips. */
.card__button::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9cqw; aspect-ratio: 1; margin: -4.5cqw 0 0 -4.5cqw; border-radius: var(--radius-pill); background: currentColor; opacity: 0; }
.card__quiet { display: flex; justify-content: center; gap: 8cqw; height: 8cqw; align-items: center; font: 600 3.6cqw/1 var(--font-text); }

.frame--done { align-items: center; justify-content: center; gap: 4cqw; background: var(--color-done-bg); text-align: center; }
.frame--done svg { width: 31cqw; height: 31cqw; }
.frame--done .mark__card { fill: var(--color-done-mark); }
.frame--done .mark__bolt { fill: var(--color-on-done-mark); }
.done__title { font: 800 13cqw/1 var(--font-display); letter-spacing: -0.04em; }
.done__text { font: 400 3.6cqw/1.4 var(--font-text); color: var(--color-text-secondary); }

/* In the app this screen is on the page's own colour; here it gets the apricot card, so the square never fades into the page. */
.frame--enough { align-items: center; justify-content: center; gap: 4.6cqw; background: var(--color-room-office-card); text-align: center; }
.frame--enough::before { content: ""; position: absolute; z-index: -1; top: -25cqw; inset-inline-end: -16cqw; width: 52cqw; aspect-ratio: 1; border-radius: var(--radius-pill); background: var(--color-room-office-shape); }
.enough__tile { display: grid; place-items: center; width: 15cqw; aspect-ratio: 1; border-radius: 5.4cqw; background: var(--color-icon-tile); }
.enough__tile svg { width: 6.6cqw; height: 6.6cqw; }
.enough__title { font: 800 7.6cqw/1.05 var(--font-display); letter-spacing: -0.035em; text-wrap: balance; }
.enough__button { display: grid; place-items: center; align-self: stretch; height: 12.2cqw; margin: 1cqw 4cqw 0; border: 0.45cqw solid var(--color-text-primary); border-radius: var(--radius-pill); font: 800 3.9cqw/1 var(--font-display); }

/* The loop, 18 s: three things of 4.6 s each ("Zaczynam", then "Zrobione", then "Gotowe"), then "Na dziś wystarczy."
   for 4.2 s. A thing is one face of the square: it flips in from the right (0.3 s), its states change in place, and
   it flips out (0.3 s) as the next one flips in. Everything runs the same 18 s clock, started later by its delay
   (--t0 is the face's start); percentages are shares of 18 s. The clock starts 0.3 s in, so the page opens with
   the first card already facing the viewer. */
.face { --t0: -0.3s; animation: face-thing 18s linear var(--t0) infinite both; }
.step-2 { --t0: 4.3s; }
.step-3 { --t0: 8.9s; }
.face--enough { --t0: 13.5s; animation-name: face-enough; }
.frame--progress { animation: frame-progress 18s linear calc(var(--t0) + 1.8s) infinite both; }
.frame--done { animation: frame-done 18s linear calc(var(--t0) + 3.3s) infinite both; }
.frame--task .card__button { animation: press-task 18s linear var(--t0) infinite both; }
.frame--task .card__button::after { animation: touch-task 18s linear var(--t0) infinite both; }
.frame--progress .card__button { animation: press-progress 18s linear calc(var(--t0) + 1.8s) infinite both; }
.frame--progress .card__button::after { animation: touch-progress 18s linear calc(var(--t0) + 1.8s) infinite both; }
.frame--done svg { animation: mark-in 18s var(--ease) calc(var(--t0) + 3.3s) infinite both; }

@keyframes face-thing {
  0% { opacity: 0; transform: perspective(1400px) rotateY(90deg); }
  0.01% { opacity: 1; transform: perspective(1400px) rotateY(90deg); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
  1.67% { transform: perspective(1400px) rotateY(0deg); }
  23.89% { transform: perspective(1400px) rotateY(0deg); animation-timing-function: cubic-bezier(0.6, 0, 1, 1); }
  25.55% { opacity: 1; transform: perspective(1400px) rotateY(-90deg); }
  25.56%, 100% { opacity: 0; transform: perspective(1400px) rotateY(-90deg); }
}
@keyframes face-enough {
  0% { opacity: 0; transform: perspective(1400px) rotateY(90deg); }
  0.01% { opacity: 1; transform: perspective(1400px) rotateY(90deg); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
  1.67% { transform: perspective(1400px) rotateY(0deg); }
  21.67% { transform: perspective(1400px) rotateY(0deg); animation-timing-function: cubic-bezier(0.6, 0, 1, 1); }
  23.32% { opacity: 1; transform: perspective(1400px) rotateY(-90deg); }
  23.33%, 100% { opacity: 0; transform: perspective(1400px) rotateY(-90deg); }
}
/* The states inside a face lie on top of one another and stay until the face is gone, so nothing shows through. */
@keyframes frame-progress { 0% { opacity: 0; } 1.1% { opacity: 1; } 16% { opacity: 1; } 16.1%, 100% { opacity: 0; } }
@keyframes frame-done { 0% { opacity: 0; } 1.3% { opacity: 1; } 7.6% { opacity: 1; } 7.7%, 100% { opacity: 0; } }
@keyframes press-task { 0%, 6.8% { transform: none; } 7.5%, 8.5% { transform: scale(0.95); } 9.4%, 100% { transform: none; } }
@keyframes touch-task { 0%, 6.2% { opacity: 0; transform: scale(1.8); } 7.3%, 8.5% { opacity: 0.3; transform: scale(1); } 9.6%, 100% { opacity: 0; transform: scale(1); } }
@keyframes press-progress { 0%, 5.2% { transform: none; } 5.9%, 6.9% { transform: scale(0.95); } 7.8%, 100% { transform: none; } }
@keyframes touch-progress { 0%, 4.6% { opacity: 0; transform: scale(1.8); } 5.7%, 6.9% { opacity: 0.3; transform: scale(1); } 8%, 100% { opacity: 0; transform: scale(1); } }
@keyframes mark-in { 0% { transform: scale(0.82) rotate(-8deg); } 2.2%, 100% { transform: none; } }

/* With motion reduced the square shows the first card and stays still. */
@media (prefers-reduced-motion: reduce) {
  .face, .face *, .face *::after { animation: none !important; }
  .face:not(.step-1) { display: none; }
}

/* ---------- What sets it apart: six blocks ---------- */
.section { padding-block: 56px; }
.section h2 { font: 800 clamp(30px, 3.8vw, 44px)/1.05 var(--font-display); letter-spacing: -0.035em; }
.features__grid { margin-top: 32px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.feature { position: relative; overflow: hidden; isolation: isolate; padding: 28px; border-radius: var(--radius-panel); background: var(--color-bg-card); }
.feature::before { content: ""; position: absolute; z-index: -1; top: -78px; inset-inline-end: -64px; width: 160px; aspect-ratio: 1; border-radius: var(--radius-pill); background: var(--shape); }
.feature h3 { max-width: 82%; overflow-wrap: break-word; font: 800 23px/26px var(--font-display); letter-spacing: -0.025em; text-wrap: balance; }
.feature p { margin-top: 12px; font-size: 16px; line-height: 24px; color: var(--color-text-secondary); }
.feature:nth-child(1) { --shape: var(--color-room-office-card); }
.feature:nth-child(2) { --shape: var(--color-room-bedroom-card); }
.feature:nth-child(3) { --shape: var(--color-room-kitchen-card); }
.feature:nth-child(4) { --shape: var(--color-room-bathroom-card); }
.feature:nth-child(5) { --shape: var(--color-room-hallway-card); }
.feature:nth-child(6) { --shape: var(--color-room-living-room-card); }

/* ---------- Who it is for: the ink panel ---------- */
.who { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: 48px;
  padding: 56px; border-radius: var(--radius-card); background: var(--color-ink-bg); color: var(--color-on-ink); }
.who::before { content: ""; position: absolute; z-index: -1; top: -150px; inset-inline-end: -110px; width: 320px; aspect-ratio: 1; border-radius: var(--radius-pill); background: var(--color-ink-shape); }
.who__text { display: flex; flex-direction: column; gap: 16px; max-width: 620px; font-size: 18px; line-height: 28px; }
.who__text p:first-child { font-weight: 600; }
.who__text p:not(:first-child) { color: var(--color-on-ink-secondary); }

/* ---------- Footer ---------- */
.footer { margin-top: 24px; padding-block: 28px 36px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; font-size: 15px; line-height: 20px; color: var(--color-text-secondary); }
.footer__brand { display: flex; align-items: center; gap: 16px; }
.footer__links { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.footer__links a { font-weight: 600; color: var(--color-text-primary); text-decoration: none; }
.footer__links a:hover { text-decoration: underline; }

/* ---------- Contact and privacy: one column of text ---------- */
.page { padding-block: 76px 56px; }
.page__body { max-width: 720px; margin-top: 56px; }
.page h1 { font: 800 clamp(38px, 5vw, 56px)/1 var(--font-display); letter-spacing: -0.04em; }
.page__lead { margin-top: 20px; font-size: 19px; line-height: 28px; color: var(--color-text-secondary); }
.page__action { margin-top: 32px; }
.tag { display: inline-block; margin-bottom: 20px; padding: 6px 14px; border-radius: var(--radius-pill); background: var(--color-accent-subtle); font-size: 13px; line-height: 18px; font-weight: 600; }
.panel { margin-top: 32px; padding: 28px; border-radius: var(--radius-panel); background: var(--color-bg-card); }
.panel > * + * { margin-top: 12px; }
.panel h2 { font: 800 23px/26px var(--font-display); letter-spacing: -0.025em; }
.mail { display: inline-block; font: 800 clamp(24px, 4.6vw, 34px)/1.15 var(--font-display); letter-spacing: -0.03em; overflow-wrap: anywhere; }
.prose h2 { margin-top: 44px; font: 800 26px/30px var(--font-display); letter-spacing: -0.025em; }
.prose p, .prose ul { margin-top: 12px; }
.prose ul { padding-inline-start: 22px; }
.prose li + li { margin-top: 6px; }
.prose strong { font-weight: 600; }
.quiet { color: var(--color-text-secondary); }
.small { font-size: 15px; line-height: 22px; }
/* A Japanese heading breaks only where its text allows it (<wbr>), never inside a word. */
:lang(ja) .page h1 { word-break: keep-all; }
/* The privacy policy: a note while it is a draft, numbered points, and one table that becomes a list on a phone. */
.note { display: inline-block; margin-bottom: 24px; padding: 10px 16px; border-radius: 16px; background: var(--color-accent-subtle); font-size: 15px; line-height: 22px; font-weight: 600; }
.policy { margin-top: 28px; overflow-wrap: break-word; }
.policy > p:first-child { margin-top: 0; color: var(--color-text-secondary); }
.prose ol { margin-top: 12px; padding-inline-start: 26px; }
.prose ol ol { margin-top: 6px; }
.prose ol ol > li:first-child { margin-top: 0; }
.policy-table { width: 100%; margin-top: 16px; border-collapse: collapse; font-size: 15px; line-height: 22px; }
.policy-table th, .policy-table td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--color-hairline); text-align: start; vertical-align: top; }
[dir="rtl"] .policy-table th, [dir="rtl"] .policy-table td { padding: 10px 0 10px 12px; }
.policy-table th { font-weight: 600; }

/* ---------- Narrow screens ---------- */
@media (max-width: 899px) {
  .deco__b, .deco__c, .deco__d { display: none; }
  .deco__a { width: 180px; top: -92px; right: -72px; }
  [dir="rtl"] .deco__a { right: auto; left: -72px; }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 40px; min-height: 0; padding-block: 76px 24px; }
  .hero h1 { margin-top: 36px; font-size: clamp(28px, 9vw, 52px); }
  .demo { justify-self: start; max-width: 440px; }
  .features__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .who { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 36px 28px; }
  .section { padding-block: 40px; }
}
@media (max-width: 599px) {
  .policy-table thead { display: none; }
  .policy-table, .policy-table tbody, .policy-table tr, .policy-table td { display: block; }
  .policy-table tr { padding-block: 12px; border-bottom: 1px solid var(--color-hairline); }
  .policy-table td, [dir="rtl"] .policy-table td { padding: 0; border: 0; }
  .policy-table td + td { margin-top: 8px; }
  .policy-table td::before { content: attr(data-label); display: block; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--color-text-secondary); }
  .lang__list { grid-template-columns: repeat(2, auto); }   /* three columns of names do not fit a phone */
  .features__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .hero__lead { font-size: 18px; line-height: 27px; }
  .footer { flex-direction: column; align-items: flex-start; }
}