/* ============================================================================
   Orderly — marketing site
   ----------------------------------------------------------------------------
   Every colour, radius, weight and shadow below is lifted from the app itself
   (ToDo/Support/Theme.swift, TaskFormKit.swift, TaskRowView.swift). If the app's
   Theme changes, change it here too — the point of this file is that a card on
   the website and a card in the app are the same card.
   ========================================================================== */

/* ---------- Type ---------------------------------------------------------- */

@font-face {
  font-family: "DM Sans";
  src: url("fonts/DMSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("fonts/DMSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("fonts/DMSans-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("fonts/DMSans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("fonts/DMSans-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens -------------------------------------------------------- */

:root {
  color-scheme: light dark;

  /* Theme.swift — light */
  --bg: #fff6ee;
  --surface: #ffffff;
  --ink: #1f1b17;
  --muted: #8a7f72;
  --muted-light: #bcae9d;
  --accent: #e0533d;
  --on-accent: #ffffff;
  --card-shadow: rgba(236, 224, 211, 0.9);
  --chip-border: #ebdfd1;
  --chip-bg: #fffaf5;
  --cell-today: #f6ebe0;
  --cell-dim: #dfd3c4;
  --dashed-border: #ddd0c1;
  --nav-inactive: #c4b6a6;
  --empty-text: #c9bcab;
  --box-border: #f0e5d9;
  --canvas: #3b6e8f;

  /* Quadrants */
  --urgent: #c23a2b;
  --important: #2f6bc0;
  --delegated: #c08a2f;
  --neutral: #8a8f98;

  /* Seeded categories */
  --cat-personal: #4f7a3f;
  --cat-learning: #7a4f9b;
  --cat-work: #3f7db0;
  --cat-wellness: #1f8a7a;

  /* Course palette */
  --course-a: #6a4a9c;
  --course-b: #2e7d68;

  /* Geometry — the app's own radii */
  --r-card: 18px;
  --r-inner: 14px;
  --r-chip: 8px;
  --r-pill: 999px;
  --lift: 3px; /* the hard shadow offset every surface in the app carries */

  --gutter: clamp(20px, 5vw, 40px);
  --measure: 1140px;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Theme.swift — dark */
    --bg: #14110f;
    --surface: #201b18;
    --ink: #f6efe8;
    --muted: #b8aa9d;
    --muted-light: #85786c;
    --accent: #f06a55;
    --card-shadow: rgba(11, 9, 8, 0.9);
    --chip-border: #3b322d;
    --chip-bg: #251f1b;
    --cell-today: #332720;
    --cell-dim: #665b51;
    --dashed-border: #554a41;
    --nav-inactive: #76695e;
    --empty-text: #7a6d62;
    --box-border: #3f352f;
    --canvas: #7fb4d4;

    --urgent: #f05b49;
    --important: #6fa1f0;
    --delegated: #e0ad54;
    --neutral: #a8adb7;

    --cat-personal: #7fae6b;
    --cat-learning: #ae95e4;
    --cat-work: #7fb4d4;
    --cat-wellness: #6ecbae;

    --course-a: #ae95e4;
    --course-b: #6ecbae;
  }
}

/* ---------- Reset --------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  display: block;
}

/* Class-level `display` rules outrank the UA style for [hidden], and both panes
   of the demo set one. */
[hidden] {
  display: none !important;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}

:focus-visible {
  outline: 2.5px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}

/* ---------- Primitives ---------------------------------------------------- */

/* The app's `formCard()`: surface fill, 18pt continuous corners, and a hard
   3pt drop with no blur. The blur-less shadow is the single most recognisable
   thing about the UI, so nothing on this page is allowed to use a soft one. */
.card {
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: 0 var(--lift) 0 var(--card-shadow);
}

@supports (corner-shape: squircle) {
  .card,
  .task,
  .quad,
  .chip,
  .plan,
  .btn,
  .phone {
    corner-shape: squircle;
  }
}

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: clamp(72px, 10vw, 130px);
}

.section--tint {
  background: color-mix(in srgb, var(--accent) 3.5%, var(--bg));
  border-block: 1px solid var(--box-border);
}

/* Section marker — the task row's 7pt priority stripe, reused as the page's
   structural spine. Its colour says which part of the app the section is about,
   using the same quadrant palette the app sorts by. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
}

.eyebrow::before {
  content: "";
  width: 7px;
  height: 19px;
  border-radius: 4px;
  background: currentcolor;
  box-shadow: 0 2px 0 var(--card-shadow);
  flex: none;
}

.eyebrow--urgent { color: var(--urgent); }
.eyebrow--important { color: var(--important); }
.eyebrow--delegated { color: var(--delegated); }
.eyebrow--neutral { color: var(--neutral); }
.eyebrow--canvas { color: var(--canvas); }

h1,
h2,
h3 {
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1.06;
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.5rem, 5.4vw, 3.75rem);
}

h2 {
  font-size: clamp(2rem, 4.2vw, 3rem);
}

h3 {
  font-size: 1.06rem;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.lede {
  color: var(--muted);
  font-size: clamp(1rem, 1.5vw, 1.16rem);
  line-height: 1.6;
  max-width: 54ch;
  margin: 20px 0 0;
  text-wrap: pretty;
}

.section-head {
  max-width: 44rem;
  margin-bottom: clamp(40px, 5vw, 62px);
}

.fine {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--muted-light);
  line-height: 1.5;
}

/* ---------- Buttons ------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 58px;
  padding-inline: 30px;
  border-radius: 22px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.16s ease, filter 0.16s ease;
}

.btn:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(1px);
}

.btn--sm {
  height: 42px;
  padding-inline: 20px;
  border-radius: 16px;
  font-size: 14.5px;
}

.btn--ghost {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--chip-border);
  box-shadow: 0 var(--lift) 0 var(--card-shadow);
}

.btn-note {
  margin-top: 14px;
}

.textlink {
  color: var(--muted);
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
  text-underline-offset: 4px;
  transition: color 0.15s ease;
}

.textlink:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* ---------- Nav ----------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.nav[data-stuck="true"] {
  border-bottom-color: var(--box-border);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 74px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.02em;
  margin-right: auto;
}

.brand img {
  width: 34px;
  height: 34px;
  border-radius: 7.6px; /* 0.2237 × side, the iOS icon mask ratio OrderlyLogo uses */
  box-shadow: 0 1.4px 0 var(--card-shadow);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-right: 22px;
}

.nav__links a {
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

.nav__links a:hover {
  color: var(--ink);
}

@media (max-width: 780px) {
  .nav__links {
    display: none;
  }
}

/* The web app's own entry point. It outlives .nav__links on the way down —
   someone on a laptop is exactly who wants it — but a narrow phone is here for
   the App Store, so below 560px the footer link carries it instead. No auto
   margin: .brand already owns the one that right-aligns this whole group, and a
   second would split the links away from the buttons. */
@media (max-width: 560px) {
  .nav__web {
    display: none;
  }
}

/* ---------- Hero ---------------------------------------------------------- */

.hero {
  padding-block: clamp(52px, 7vw, 92px) clamp(72px, 9vw, 118px);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(40px, 6vw, 76px);
  align-items: center;
}

/* The demo is a phone screen's worth of app, so it is held to a phone's width
   however wide the window gets. */
.hero .split__art {
  width: 100%;
  max-width: 430px;
  margin-inline: auto;
}

@media (max-width: 940px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.hero__cta {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 34px;
}

.hero__stats {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 42px;
  padding-top: 26px;
  border-top: 1px solid var(--box-border);
}

.stat__k {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.stat__v {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

/* ---------- The demo: list ⇄ matrix -------------------------------------- */

.demo {
  padding: 18px 18px 14px;
}

.demo__bar {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 4px 6px 16px;
}

.demo__title {
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.demo__count {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-left: auto;
}

/* The stage owns its height across a swap so the page never jumps. */
.demo__stage {
  position: relative;
  transition: height 0.34s cubic-bezier(0.22, 0.8, 0.3, 1);
}

/* List view --------------------------------------------------------------- */

.list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* TaskRowView: surface card, 18pt corners, 15pt padding (24pt on the leading
   edge when the priority stripe is drawn), hard 3pt shadow. */
.task {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 15px 15px 15px 24px;
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: 0 var(--lift) 0 var(--card-shadow);
}

.task__stripe {
  position: absolute;
  left: 8px;
  top: 12px;
  bottom: 12px;
  width: 7px;
  border-radius: 4px;
  background: var(--q, var(--neutral));
  box-shadow: 0 var(--lift) 0 var(--card-shadow);
  transition: background-color 0.3s ease;
}

/* TaskCheckboxGlyph: 21pt box, 9pt corners, 1.6pt border. */
.check {
  flex: none;
  width: 21px;
  height: 21px;
  margin-top: 1px;
  border-radius: 9px;
  border: 1.6px solid var(--dashed-border);
  background: none;
  display: grid;
  place-items: center;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.check svg {
  width: 11px;
  height: 11px;
  stroke: var(--on-accent);
  stroke-width: 2.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.16s ease, transform 0.2s cubic-bezier(0.3, 1.5, 0.5, 1);
}

.task[data-done="true"] .check {
  background: var(--accent);
  border-color: transparent;
}

.task[data-done="true"] .check svg {
  opacity: 1;
  transform: scale(1);
}

.task__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.task__title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.008em;
  line-height: 1.28;
  transition: color 0.18s ease;
}

.task[data-done="true"] .task__title {
  color: var(--muted-light);
  text-decoration: line-through;
}

.task__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
}

.task__meta .sep {
  color: var(--dashed-border);
}

.task__meta .when {
  font-weight: 600;
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  margin-right: -3px;
}

.course {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
}

.course svg {
  width: 11px;
  height: 11px;
  fill: currentcolor;
}

/* Matrix view ------------------------------------------------------------- */

.matrix {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* The quadrant box from IOSMatrixView: bordered surface with a coloured rail
   across the top edge. */
.quad {
  display: flex;
  flex-direction: column;
  min-height: 158px;
  padding: 13px 12px;
  background: var(--surface);
  border: 1px solid var(--box-border);
  border-radius: var(--r-card);
  box-shadow: 0 var(--lift) 0 var(--card-shadow);
  position: relative;
  overflow: hidden;
}

.quad__rail {
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
}

.quad__head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 4px 0 11px;
}

.quad__name {
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.005em;
}

.quad__n {
  margin-left: auto;
  font-size: 13px;
  font-weight: 800;
  color: var(--muted);
}

.quad__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* MatrixTaskChip: the same task card, compacted. Inside a quadrant the stripe
   switches to the task's category colour, because the quadrant rail overhead is
   already saying what the priority is. */
.quad__list .task {
  padding: 9px 10px 9px 17px;
  border-radius: 12px;
  box-shadow: 0 2px 0 var(--card-shadow);
}

.quad__list .task__stripe {
  left: 6px;
  top: 8px;
  bottom: 8px;
  width: 3.5px;
  border-radius: 2px;
  background: var(--cat, var(--neutral));
  box-shadow: none;
}

.quad__list .check,
.quad__list .task__meta {
  display: none;
}

.quad__list .task__title {
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.35;
}

/* The morph between the two layouts. FLIP handles the travel; these handle the
   card changing shape once it lands. */
.task {
  transition: padding 0.34s cubic-bezier(0.22, 0.8, 0.3, 1),
    border-radius 0.34s cubic-bezier(0.22, 0.8, 0.3, 1),
    box-shadow 0.34s ease;
}

.demo[data-animating="true"] .task {
  will-change: transform;
}

/* Tab bar ----------------------------------------------------------------- */

/* The iOS floating tab bar: a capsule of surface with the selected tab filled
   in accent-tinted and tinted text. */
.tabs {
  display: flex;
  gap: 2px;
  padding: 5px;
  margin: 16px auto 2px;
  width: fit-content;
  max-width: 100%;
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  border-radius: var(--r-pill);
}

.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 7px 22px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 700;
  color: var(--nav-inactive);
  transition: color 0.18s ease, background-color 0.18s ease;
}

.tab svg {
  width: 17px;
  height: 17px;
  fill: currentcolor;
}

.tab[aria-selected="true"] {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 13%, transparent);
}

.demo__hint {
  text-align: center;
  margin: 8px 0 2px;
}

/* ---------- Feature grid -------------------------------------------------- */

.grid {
  display: grid;
  gap: 20px;
}

.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.feature {
  padding: 24px 22px 26px;
}

.feature__icon {
  width: 38px;
  height: 38px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}

.feature__icon svg {
  width: 19px;
  height: 19px;
  fill: currentcolor;
}

.feature p {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.58;
  margin: 9px 0 0;
}

/* The four quadrants, laid out as the matrix they describe — two by two, in the
   same reading order the app uses. */
.quadgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.quadgrid .card {
  position: relative;
  overflow: hidden;
}

.quadgrid .card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: var(--rail);
}

@media (max-width: 420px) {
  .quadgrid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Split (art beside copy) --------------------------------------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 5.5vw, 70px);
  align-items: center;
}

.split--flip .split__art {
  order: -1;
}

@media (max-width: 880px) {
  .split {
    grid-template-columns: minmax(0, 1fr);
  }

  .split--flip .split__art {
    order: 0;
  }
}

.checklist {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.checklist li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.5;
}

.checklist svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.checklist b {
  font-weight: 700;
}

.checklist span {
  color: var(--muted);
  font-weight: 500;
}

/* ---------- Calendar ------------------------------------------------------ */

.cal {
  padding: 16px;
  max-width: 400px;
  margin-inline: auto;
}

.cal__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.cal__month {
  flex: 1;
  text-align: center;
  padding: 9px;
  border-radius: var(--r-pill);
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  font-size: 14.5px;
  font-weight: 700;
}

.cal__nav {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  color: var(--muted);
}

.cal__nav svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px 0;
}

.cal__dow {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  padding-bottom: 8px;
}

/* The cell is just a slot; the marker inside it is what carries the date, the
   dots, and today's fill — so the fill stays the same size whatever the card's
   width happens to be, exactly as it does on the phone. */
.cal__day {
  display: grid;
  place-items: center;
  padding-block: 3px;
}

.cal__mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 34px;
  padding: 6px 5px 5px;
  border-radius: 13px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
}

.cal__day[data-dim="true"] .cal__mark {
  color: var(--cell-dim);
}

.cal__day[data-today="true"] .cal__mark {
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 800;
}

.cal__pips {
  display: flex;
  gap: 2.5px;
  height: 4px;
}

.cal__pips i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  display: block;
}

.cal__day[data-today="true"] .cal__pips i {
  background: var(--on-accent) !important;
}

/* ---------- Smart Schedule ------------------------------------------------ */

/* The prompt card sits above the suggestions so they read as falling out from
   underneath it, the way the paywall hero stacks them. */
.prompt {
  padding: 14px;
  position: relative;
  z-index: 2;
}

.prompt__field {
  min-height: 92px;
  padding: 12px;
  border-radius: 12px;
  background: var(--chip-bg);
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.45;
}

.prompt__caret {
  display: inline-block;
  width: 1.5px;
  height: 1.05em;
  background: var(--accent);
  margin-left: 1px;
  vertical-align: -0.16em;
  animation: blink 1.05s steps(1, end) infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

.prompt__tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--r-chip);
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.chip svg {
  width: 13px;
  height: 13px;
  fill: currentcolor;
}

.chip--accent {
  margin-left: auto;
  background: var(--accent);
  border-color: transparent;
  color: var(--on-accent);
}

/* The suggestion stack from the paywall hero: cards falling out from under the
   prompt, each one inset a little further and fading back. */
.fanned {
  margin-top: -6px;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

.fanned .task {
  padding-block: 11px;
  border-radius: var(--r-inner);
  box-shadow: 0 2px 0 var(--card-shadow);
}

.fanned .task:nth-child(1) {
  margin-inline: 10px;
}

.fanned .task:nth-child(2) {
  margin-inline: 22px;
  margin-top: -6px;
  opacity: 0.55;
}

.banner {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin-top: 14px;
  padding: 13px 14px;
  border-radius: var(--r-inner);
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
}

.banner svg {
  width: 15px;
  height: 15px;
  flex: none;
  margin-top: 2px;
  fill: var(--canvas);
}

.banner b {
  font-size: 13.5px;
  font-weight: 700;
}

.banner p {
  margin: 3px 0 0;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.45;
}

/* ---------- Screenshots --------------------------------------------------- */

.shots {
  display: flex;
  gap: clamp(16px, 2.6vw, 30px);
  overflow-x: auto;
  padding: 10px var(--gutter) 30px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.shots::-webkit-scrollbar {
  display: none;
}

.shot {
  flex: none;
  width: min(248px, 62vw);
  scroll-snap-align: center;
}

/* A restrained device frame: the app's own icon corner ratio, a hairline bezel,
   and the same hard drop everything else on the page sits on. */
.phone {
  border-radius: 40px;
  padding: 7px;
  background: var(--surface);
  border: 1px solid var(--box-border);
  box-shadow: 0 var(--lift) 0 var(--card-shadow);
}

.phone img {
  border-radius: 33px;
  width: 100%;
}

.shot figcaption {
  margin-top: 14px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
}

/* ---------- Connections --------------------------------------------------- */

.rows {
  display: grid;
  gap: 0;
  overflow: hidden;
}

.row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 19px 20px;
}

.row + .row {
  border-top: 1px solid var(--box-border);
}

.row__icon {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 13px;
  display: grid;
  place-items: center;
}

.row__icon svg {
  width: 18px;
  height: 18px;
  fill: currentcolor;
}

.row p {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
}

/* ---------- Pricing ------------------------------------------------------- */

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 20px;
  align-items: stretch;
}

/* SmartSchedulePaywallView's plan card, including the selected state's 2pt
   accent stroke and 8% accent wash. */
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 24px 28px;
  background: var(--surface);
  border: 1px solid var(--box-border);
  border-radius: var(--r-card);
  box-shadow: 0 var(--lift) 0 var(--card-shadow);
}

.plan--featured {
  border: 2px solid var(--accent);
  background:
    linear-gradient(color-mix(in srgb, var(--accent) 8%, transparent), color-mix(in srgb, var(--accent) 8%, transparent)),
    var(--surface);
}

.plan__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.badge {
  padding: 4px 9px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Amount over period, the way the paywall's plan rows set it. */
.plan__price {
  margin: 18px 0 4px;
}

.plan__amount {
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

.plan__amount {
  display: block;
}

.plan__per {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted-light);
}

.plan ul {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.plan li {
  display: flex;
  gap: 10px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
}

.plan li svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.plan ul {
  flex: 1;
}

.plan .btn {
  width: 100%;
  margin-top: 28px;
}

/* ---------- Closer + footer ----------------------------------------------- */

.closer {
  text-align: center;
  padding-block: clamp(80px, 11vw, 150px);
}

.closer .lede {
  margin-inline: auto;
}

.closer img {
  width: 78px;
  height: 78px;
  border-radius: 17.4px;
  margin: 0 auto 28px;
  box-shadow: 0 var(--lift) 0 var(--card-shadow);
}

.foot {
  border-top: 1px solid var(--box-border);
  padding-block: 40px 52px;
}

.foot__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 30px;
  align-items: center;
}

.foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-left: auto;
}

.foot__links a {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--muted);
  text-decoration: none;
}

.foot__links a:hover {
  color: var(--accent);
}

.foot__legal {
  width: 100%;
  margin-top: 6px;
}

/* ---------- Reveal on scroll ---------------------------------------------- */

.js .reveal {
  opacity: 0;
  transform: translateY(16px);
}

.reveal[data-shown="true"] {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.8, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Legal pages --------------------------------------------------- */

.legal {
  padding-block: clamp(48px, 6vw, 80px) clamp(72px, 9vw, 110px);
}

.legal__wrap {
  max-width: 760px;
}

.legal h1 {
  font-size: clamp(2.2rem, 5vw, 3.1rem);
}

.legal__meta {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
}

.legal .summary {
  margin-top: 34px;
  padding: 24px 24px 26px;
}

.legal .summary p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
}

.legal h2 {
  font-size: 1.45rem;
  margin-top: 52px;
  scroll-margin-top: 100px;
}

.legal h3 {
  font-size: 1.02rem;
  margin-top: 30px;
}

.legal p,
.legal li {
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.62;
}

.legal p {
  margin: 14px 0 0;
}

.legal ul {
  margin: 14px 0 0;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.legal ul li {
  position: relative;
  padding-left: 20px;
}

.legal ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 3px;
  border-radius: 2px;
  background: var(--dashed-border);
}

.legal strong {
  color: var(--ink);
  font-weight: 700;
}

.legal a {
  color: var(--accent);
  font-weight: 700;
  text-underline-offset: 3px;
}

.toc {
  margin-top: 34px;
  padding: 20px 22px 22px;
}

.toc ol {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
  columns: 2;
  column-gap: 26px;
}

@media (max-width: 620px) {
  .toc ol {
    columns: 1;
  }
}

.toc li {
  counter-increment: toc;
  break-inside: avoid;
  margin-bottom: 9px;
}

.toc a {
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.toc a::before {
  content: counter(toc, decimal-leading-zero);
  color: var(--muted-light);
  font-size: 11px;
  margin-right: 9px;
}

.toc a:hover {
  color: var(--accent);
}

/* A table that reads as the app's grouped rows rather than a spreadsheet. */
.datatable {
  margin-top: 20px;
  overflow: hidden;
}

.datatable__row {
  display: grid;
  grid-template-columns: 1fr 1.15fr 0.85fr;
  gap: 16px;
  padding: 15px 20px;
}

.datatable__row + .datatable__row {
  border-top: 1px solid var(--box-border);
}

.datatable__row--head {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-light);
  background: var(--chip-bg);
}

.datatable__row b {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.datatable__row span {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.45;
}

@media (max-width: 700px) {
  .datatable__row {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .datatable__row--head {
    display: none;
  }
}