/* Sistine, the lab's site. Rectangle-style minimal: one centered hero,
   a whisper of detail below. No frameworks, no external scripts. */
/* ONE LIGHT THEME, EVERY PAGE (founder, 2026-09-22: "make everything light
   themed"). sistine.ai was light and /path went dark on a Mac set to dark,
   so the two halves of the site did not look like one site. There is no
   dark palette here any more, and no appearance media query anywhere under
   server/site/public (a test walks every page and refuses one): the values
   below are the values, whatever the visitor's Mac is set to.
   `color-scheme: light` is the other half of that promise - without it the
   browser still paints form controls, scrollbars and the canvas behind the
   page in its own dark colors. Do not put a dark block back without asking;
   it would have to go in BOTH this file and path/path.css, or the halves
   drift apart again. */
:root {
  color-scheme: light;
  --ink: #111114; --dim: #66676e; --faint: #9fa0a6; --hair: #ececea;
  --paper: #fff;        /* the page behind everything */
  --card: #fff;         /* a panel sitting on the page */
  --card-hover: #fafaf9;
  --on-ink: #fff;       /* text on a filled button */
  --ink-hover: #2b2b30;
  --header-bg: rgba(255,255,255,.8);
  --code-bg: #f6f6f4;
  --wash: #f5f5f3;      /* the grey a window, a plan or a fact sits on */
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* THE HEADER IS FIXED, SO EVERY ANCHOR HAS TO DUCK UNDER IT. Without this,
   a jump to #pricing or #faq puts the target's top edge at y=0, where 66px
   of blurred header sits on top of it: a heading landed behind the bar and
   the section looked as if it started below it. `/path` has carried the same rule per
   section since its own review and sets its own numbers there, which is why
   this rule stays off that page. */
body:not(.path-page) [id] { scroll-margin-top: 92px; }
/* Smooth scrolling is a preference, not a promise. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  background: var(--paper); color: var(--ink);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ink); text-decoration: none; }

header {
  position: fixed; inset: 0 0 auto; z-index: 10;
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 36px; background: var(--header-bg); backdrop-filter: blur(12px);
}
.logo { font-weight: 650; font-size: 15px; letter-spacing: -.01em; display: flex; align-items: center; gap: 9px; }
.logo .mark { height: 22px; width: 22px; border-radius: 6px; }
nav a { color: var(--dim); font-size: 14px; margin-left: 26px; }
nav a:hover { color: var(--ink); }

/* The one filled button. It was written as `.hero .btn` and is a class of
   its own since the homepage started carrying a download for each product
   (founder, 2026-09-22), which puts a button inside a product card. */
.btn {
  display: inline-block; background: var(--ink); color: var(--on-ink);
  padding: 14px 34px; border-radius: 12px; font-size: 16px; font-weight: 600;
}
/* A <button> that looks like the links beside it. */
button.btn { border: 0; cursor: pointer; font-family: inherit; line-height: inherit; }
.btn:hover { background: var(--ink-hover); }

/* Hero = the page */
.hero {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 90px 24px 60px;
}
.hero img { height: 190px; width: auto; }
.hero h1 {
  margin-top: 6px; font-size: clamp(38px, 5vw, 62px);
  font-weight: 650; letter-spacing: -.025em; line-height: 1.08;
}
.hero p { color: var(--dim); font-size: 19px; max-width: 560px; margin: 18px 0 0; }
.hero .btn { margin-top: 38px; }
.fine { color: var(--faint); font-size: 13.5px; }
.fine a { color: var(--dim); }
.hero .fine { margin-top: 16px; }

/* Below the fold: whispers */
section { padding: 110px 24px; text-align: center; }
section h2 { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: 44px; }

.jobs {
  list-style: none; display: grid; grid-template-columns: repeat(4, minmax(180px, 220px));
  gap: 44px 48px; justify-content: center; text-align: left; max-width: 1100px; margin: 0 auto;
}
.jobs b { display: block; font-weight: 650; font-size: 15.5px; margin-bottom: 4px; }
.jobs span { color: var(--dim); font-size: 14.5px; line-height: 1.5; }
@media (max-width: 980px) { .jobs { grid-template-columns: repeat(2, minmax(200px, 260px)); } }
@media (max-width: 520px) { .jobs { grid-template-columns: 1fr; } }

.privline { color: var(--dim); font-size: 18px; max-width: 620px; margin: 0 auto; }
.privline b { color: var(--ink); font-weight: 650; }
.privline .second { margin-top: 14px; font-size: 15px; color: var(--faint); }

.tiers { list-style: none; max-width: 640px; margin: 0 auto; text-align: left; }
.tiers li { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 15px 0; border-top: 1px solid var(--hair); }
.tiers li:last-child { border-bottom: 1px solid var(--hair); }
.tiers .n { font-weight: 650; min-width: 84px; }
.tiers .d { color: var(--dim); font-size: 15px; flex: 1; }
.tiers .p { font-weight: 650; font-variant-numeric: tabular-nums; }

footer { padding: 40px 24px 60px; text-align: center; color: var(--faint); font-size: 13.5px; }
footer a { color: var(--dim); margin: 0 10px; }
footer a:hover { color: var(--ink); }
footer .c { margin-top: 10px; }

/* Legal pages */
.legal { max-width: 640px; margin: 0 auto; padding: 110px 28px 90px; text-align: left; }
.legal h1 { font-size: 28px; font-weight: 650; letter-spacing: -.02em; margin-bottom: 4px; }
.legal .updated { color: var(--faint); font-size: 13px; margin-bottom: 30px; }
.legal h2 { font-size: 16px; font-weight: 650; margin: 28px 0 6px; }
/* Smaller than h2, or a subsection reads as a bigger heading than the
   section it sits inside. */
.legal h3 { font-size: 14.5px; font-weight: 650; margin: 20px 0 4px; color: var(--ink); }
.legal p, .legal li { color: var(--dim); font-size: 15px; margin-bottom: 10px; }
.legal ul { margin-left: 20px; }
.legal a { text-decoration: underline; }
/* Tables carry the processor list and the proves-versus-promises rows.
   Left-aligned, hairline-ruled, and allowed to scroll sideways rather than
   squeeze two columns of prose into a phone's width. */
.legal table { width: 100%; border-collapse: collapse; margin: 14px 0 18px; display: block; overflow-x: auto; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 10px 14px 10px 0;
                       border-bottom: 1px solid var(--hair); color: var(--dim); font-size: 14.5px; }
.legal th { color: var(--ink); font-weight: 650; font-size: 13px; letter-spacing: .01em; }
.legal code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px;
              background: var(--code-bg); border-radius: 4px; padding: 1px 5px; }



.chip {
  font-size: 11px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase;
  color: var(--dim); border: 1px solid var(--hair); border-radius: 999px; padding: 3px 10px;
  white-space: nowrap;
}
.chip.now { color: #1c7a3c; background: #ebf6ee; border-color: #ebf6ee; }
/* QUIET, NOT A SECOND HEADLINE (review round, 2026-09-23). It was a black
   pill, louder than the product's name beside it, and while every product
   on the page is available it tells the reader nothing new. It stays,
   because a card must declare its status for the day one is not, but it
   reads as a note. */

/* ================================================================ SELLING
   Everything below is the homepage (Sistine Path's sales page since
   2026-09-25) and SistineGPT's page, since the sales pass of 2026-09-23.
   Three rules shaped all of it:
   1. THE ONE ACTION IS IN THE FIRST SCREEN, with what a person needs at the
      moment of clicking right under it, and again in the nav and at the
      foot of the page. On SistineGPT's page that is the Download; on the
      homepage, since Path has a web app (2026-09-25), it is "Start for $9
      a month", which works on any device.
   2. A PHONE CANNOT INSTALL A MAC APP. Under 600px, and on any touch
      screen that cannot hover (an iPad), every Mac download is hidden
      (`.mac-only`). On SistineGPT's page a hand-off takes its place
      (`.handoff`): a mailto: link that puts the download link and the
      product page in the visitor's own mail app, and a Share button
      (AirDrop, Messages) that the page's own inline script shows only
      where the browser can share. No form, nothing stored, nothing
      collected: the page never learns the address. On the homepage a line
      saying where to get the Mac app takes its place (`.not-mac`), because
      the phone can already use Path in its browser.
   3. SHOW, THEN TELL. The real window comes before the paragraph about it. */

/* The nav's Download: the rightmost item, filled, on every selling page. */
nav a.pill {
  color: var(--on-ink); background: var(--ink); padding: 8px 17px;
  border-radius: 999px; font-weight: 600;
}
nav a.pill:hover { color: var(--on-ink); background: var(--ink-hover); }

.btn.big { padding: 15px 30px; font-size: 16.5px; border-radius: 13px; }
/* A second button beside a filled one: the same shape, not the same weight. */
.btn.line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn.line:hover { background: var(--wash); }

/* What a person needs to know at the moment of clicking. */
.req { display: block; margin-top: 12px; color: var(--dim); font-size: 13.5px; line-height: 1.55; }
.req b { color: var(--ink); font-weight: 600; }
.req + .req { margin-top: 2px; }
/* A text link beside a button. */
.go { color: var(--dim); font-size: 14.5px; font-weight: 550; }
.go:hover { color: var(--ink); }

/* A section title that is a sentence, not the small caps label. */
section h2.title {
  font-size: clamp(28px, 3.3vw, 42px); font-weight: 680; letter-spacing: -.025em;
  line-height: 1.12; text-transform: none; color: var(--ink); margin: 0 auto 14px; max-width: 820px;
}
.sub { color: var(--dim); font-size: 18px; max-width: 640px; margin: 0 auto; }

/* ------------------------------------------------------------- screenshots
   A shot of a Mac window is a FLAT RECTANGLE WITH SQUARE CORNERS: macOS
   bakes neither the rounded corners nor the shadow into a capture, so a
   white window on a white page has no edge at all. The corner, the
   hairline and the shadow are the page's job. Every <img> using this
   carries its own width and height, so nothing below it jumps. */
.shot {
  display: block; width: 100%; height: auto; background: var(--card);
  border: 1px solid var(--hair); border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .10);
}
.shotnote { display: block; margin-top: 12px; color: var(--dim); font-size: 13.5px; line-height: 1.5; }

/* ------------------------------------------------------------ the homepage
   Sistine Path's sales page since 2026-09-25 (founder: "I want Sistine.ai
   homepage to be only showing Sistine Path"; index.html says what is on
   it and why). Path's own green, the accent /path uses (path/path.css),
   marks the buttons, the tool numbers and the stage behind the window, so
   the homepage and /path read as one product. Every rule here is scoped to
   `.home` or to a class only index.html uses. */
.home { --path-green: #258b45; --path-green-hover: #1e7439; --path-tint: #eef5ef; }
.home .btn { background: var(--path-green); color: #fff; }
.home .btn:hover { background: var(--path-green-hover); }
.home .btn.line { background: transparent; color: var(--path-green); box-shadow: inset 0 0 0 1.5px var(--path-green); }
.home .btn.line:hover { background: var(--path-tint); }
.home nav a.pill { background: var(--path-green); }
.home nav a.pill:hover { background: var(--path-green-hover); }
/* For people who already subscribe: the web app, one click from any page. */
.home nav a.webapp { color: var(--ink); font-weight: 550; }
.home .logo .mark { width: 26px; height: 26px; border-radius: 0; }
.home .steps .n { background: var(--path-green); }
.home .uilabel { font-size: 12.5px; padding: 5px 10px; border-radius: 8px; }

/* The first screen. Words on the left, the chart on the right, both
   inside 1440x790 (Safari on a 13-inch MacBook Air). One button, "Start for
   $9 a month", which works on every device since Path has a web app. */
.p-hero {
  display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.28fr); gap: 52px;
  align-items: center; max-width: 1340px; margin: 0 auto; padding: 108px 40px 0; text-align: left;
}
.p-eyebrow { color: var(--path-green); font-size: 12.5px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.p-hero h1 {
  margin-top: 14px; font-size: clamp(38px, 3.9vw, 56px); font-weight: 720;
  letter-spacing: -.034em; line-height: 1.05;
}
/* The second sentence starts a line of its own wherever there is room. */
.p-hero h1 span { display: block; }
.p-lede { margin-top: 18px; color: var(--dim); font-size: 18px; line-height: 1.55; max-width: 33em; }
.p-actions { display: flex; align-items: center; gap: 12px 24px; flex-wrap: wrap; margin-top: 28px; }
/* The in-app browser warning, right under the button: a purchase made in
   the browser X opens a link in stays in that browser. */
.p-inapp { margin-top: 14px; color: var(--dim); font-size: 14px; line-height: 1.5; max-width: 36em; }
.p-inapp b { color: var(--ink); font-weight: 650; }
/* Where it works and the terms, in one line under the button. */
.p-terms { margin-top: 10px; color: var(--dim); font-size: 14px; line-height: 1.55; max-width: 36em; }
.p-terms b { color: var(--ink); font-weight: 680; }
.nobr { white-space: nowrap; }
/* The Mac app: a secondary line, a link and not a second button. A phone
   and a tablet read where to get it instead (`.not-mac`). */
.p-small { margin-top: 8px; color: var(--faint); font-size: 13px; line-height: 1.5; }
.p-small a, .home .finale .req a, .p-plan .req a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.not-mac { display: none; }
.p-shot { margin: 0; background: var(--path-tint); border-radius: 26px; padding: 26px 26px 18px; }
.p-shot .shot { box-shadow: 0 14px 44px rgba(20, 40, 24, .16); }
.p-shot figcaption { margin-top: 14px; color: var(--dim); font-size: 13.5px; line-height: 1.5; }

/* Facts a stranger can check before trusting a small product with a card. */
.p-trust {
  list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px;
  max-width: 1340px; margin: 52px auto 0; padding: 0 40px; text-align: left;
}
.p-trust li { background: var(--wash); border-radius: 16px; padding: 16px 18px 17px; }
.p-trust b { display: block; font-size: 14.5px; font-weight: 660; letter-spacing: -.005em; }
.p-trust span { display: block; margin-top: 2px; color: var(--dim); font-size: 13.5px; line-height: 1.45; }

/* One app, four tools: a card each, built to take a screenshot at its top
   (`.tool-shot`, index.html's SHOT comments) and to read well without one. */
.p-tools { padding-top: 116px; padding-bottom: 0; }
.tools {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px;
  max-width: 1140px; margin: 48px auto 0; text-align: left;
}
.tool { display: flex; flex-direction: column; border: 1px solid var(--hair); border-radius: 22px; padding: 28px 30px 26px; }
.tool-shot { margin: -10px -12px 22px; }
.tool-shot .shot { border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .08); }
.tool-n { color: var(--path-green); font-size: 12px; font-weight: 650; letter-spacing: .08em; }
.tool h3 { margin-top: 6px; font-size: 23px; font-weight: 700; letter-spacing: -.02em; }
.tool-q { margin-top: 2px; font-size: 17px; font-weight: 550; color: var(--ink); }
.tool p:not([class]) { margin-top: 10px; color: var(--dim); font-size: 15px; line-height: 1.6; }
.tool .labels { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 20px; }
.tool-note {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--hair);
  color: var(--dim); font-size: 13.5px; line-height: 1.5;
}
.share-x {
  display: flex; align-items: center; justify-content: space-between; gap: 18px 32px; flex-wrap: wrap;
  max-width: 1140px; margin: 18px auto 0; padding: 26px 30px; border-radius: 22px;
  background: var(--path-tint); text-align: left;
}
.share-x h3 { font-size: 19px; font-weight: 700; letter-spacing: -.015em; }
.share-x p { margin-top: 6px; max-width: 660px; color: var(--dim); font-size: 15px; line-height: 1.6; }
.share-x .uilabel { background: var(--card); }

/* Links inside the price's small print and the limits beside it. "Research,
   not signals." was a section of its own until the review round of
   2026-09-25; it is one of the limits now (index.html says why). */
.p-plan .req a, .p-before a {
  color: var(--ink); text-decoration: underline; text-underline-offset: 2px;
}

/* The price, and beside it the limits, once and in full. */
.p-pricing { padding-top: 112px; padding-bottom: 0; }
.p-plans {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;
  max-width: 1000px; margin: 44px auto 0; text-align: left;
}
.p-plan {
  display: flex; flex-direction: column; border-radius: 22px; padding: 30px 30px 28px;
  box-shadow: inset 0 0 0 2px var(--path-green);
}
.p-plan .n { font-size: 17px; font-weight: 680; }
.p-plan .price { margin-top: 8px; font-size: 54px; font-weight: 740; letter-spacing: -.035em; line-height: 1.05; }
.p-plan .price small { margin-left: 4px; color: var(--dim); font-size: 18px; font-weight: 600; letter-spacing: 0; }
.p-plan .for { margin-top: 4px; color: var(--dim); font-size: 14.5px; }
.p-plan ul { list-style: none; margin: 20px 0 26px; }
.p-plan li { position: relative; margin-top: 9px; padding-left: 26px; font-size: 15px; line-height: 1.5; }
.p-plan li::before {
  content: ""; position: absolute; left: 3px; top: .42em; width: 11px; height: 6px;
  border-left: 2px solid var(--path-green); border-bottom: 2px solid var(--path-green); transform: rotate(-45deg);
}
.p-plan > .btn { margin-top: auto; text-align: center; }
.p-plan > .req { text-align: center; }
.p-plan > .req a { display: inline-block; margin-top: 4px; }
.p-before { border-radius: 22px; padding: 30px 30px 28px; background: var(--wash); }
.p-before h3 { font-size: 17px; font-weight: 680; }
.p-before ul { list-style: none; margin-top: 8px; }
.p-before li { margin-top: 11px; color: var(--dim); font-size: 14.5px; line-height: 1.55; }
.p-before li b { color: var(--ink); font-weight: 650; }
.p-pricing .steps { max-width: 1000px; margin-top: 20px; }
.p-faq { padding-top: 112px; padding-bottom: 104px; }
.home .finale .sub { margin-top: 4px; }
.home .finale .req { margin-top: 16px; }

.home footer .also { margin-top: 16px; }
.home footer .also a { margin: 0 4px; }
/* SistineGPT's own terms and refund policy, in brackets after its name. */
.home footer .also .nobr a { margin: 0; }
.home footer a { display: inline-block; white-space: nowrap; margin: 3px 10px; }
.home footer .risk { max-width: 640px; margin: 10px auto 0; font-size: 12.5px; line-height: 1.5; }

/* ------------------------------------------------ phones: send it to a Mac
   Shown only under 600px or on a touch screen. A mailto: link with no
   recipient opens the visitor's own mail app, addressed to nobody, with
   sistine.ai/download/<app> in the body (the worker hands a Mac the file
   itself) and the product page under it; they send it to themselves and
   open it on their Mac. The helper line says the address is theirs to add,
   because the button cannot. */
.handoff { display: none; }
.handoff p { font-size: 15px; color: var(--ink); line-height: 1.5; }
.handoff .btn + p, .handoff p + p { margin-top: 8px; color: var(--dim); font-size: 13.5px; }
.handoff .btn { margin-top: 12px; }
.handoff .btn + .btn { margin-top: 10px; }
/* The Share button ships `hidden` and the page's own script shows it where
   the browser can share; `.btn` sets a display, which would beat the
   attribute without this. */
.handoff [hidden] { display: none !important; }
/* The homepage's pair: Share and Email side by side on one row, so the
   hand-off stays short enough to leave the window in a phone's first
   screen; when the browser cannot share, Email takes the whole row. */
.handoff-row { display: flex; gap: 10px; margin-top: 12px; }
.handoff-row { flex-wrap: wrap; }
.handoff .handoff-row .btn { flex: 1 1 150px; margin-top: 0; padding: 13px 12px; font-size: 15.5px; text-align: center; }

/* ------------------------------------------------------ SistineGPT's page */
.product-hero { padding: 118px 24px 0; text-align: center; }
.product-hero .appicon { width: 76px; height: 76px; }
.product-hero h1 {
  font-size: clamp(34px, 4.5vw, 58px); font-weight: 690; letter-spacing: -.032em;
  line-height: 1.06; max-width: 920px; margin: 14px auto 0;
}
.product-hero .lede { color: var(--dim); font-size: 19px; line-height: 1.5; max-width: 700px; margin: 16px auto 0; }
.product-hero .actions { justify-content: center; margin-top: 30px; }
.product-hero .handoff { max-width: 420px; margin: 26px auto 0; text-align: left; }
.hero-shot { max-width: 1228px; margin: 50px auto 0; padding: 0 24px; }

/* Three ways to chat, each headed by the words the app itself shows. */
.ways {
  list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  max-width: 1160px; margin: 48px auto 0; text-align: left;
}
.ways > li { border: 1px solid var(--hair); border-radius: 20px; padding: 24px 26px 28px; }
.ways h3 { font-size: 19px; font-weight: 690; letter-spacing: -.015em; margin: 16px 0 8px; }
.ways p { color: var(--dim); font-size: 15px; line-height: 1.6; }
.ways p + p { margin-top: 10px; }
/* A copy of a label from the real window, set in type rather than cut out
   of a screenshot, so it stays sharp and weighs nothing. */
.uilabel {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 9px;
  background: var(--wash); font-size: 13.5px; color: var(--ink); font-weight: 500;
}
.uilabel .dot { width: 7px; height: 7px; border-radius: 50%; background: #34c759; }
.uilabel img { width: 15px; height: 17px; opacity: .8; }

.plans {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 920px;
  margin: 48px auto 0; text-align: left;
}
.plan { display: flex; flex-direction: column; border: 1px solid var(--hair); border-radius: 22px; padding: 30px 30px 32px; }
.plan.paid { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.plan .n { font-size: 17px; font-weight: 680; }
.plan .price { font-size: 44px; font-weight: 720; letter-spacing: -.03em; line-height: 1.1; margin-top: 10px; }
.plan .for { color: var(--dim); font-size: 15px; margin-top: 6px; }
.plan ul { list-style: none; margin: 22px 0 26px; flex: 1; }
.plan li { position: relative; padding-left: 20px; font-size: 15px; line-height: 1.5; margin-top: 9px; }
.plan li::before {
  content: ""; position: absolute; left: 3px; top: .62em; width: 6px; height: 6px;
  border-radius: 50%; background: var(--ink);
}
.plan .btn { text-align: center; }
.plan .req { text-align: center; }
.upgrade {
  max-width: 920px; margin: 22px auto 0; padding: 20px 24px; border-radius: 16px;
  background: var(--wash); text-align: left; color: var(--dim); font-size: 15px; line-height: 1.6;
}
.upgrade b { color: var(--ink); }
.upgrade a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

.faq {
  display: grid; grid-template-columns: 1fr 1fr; gap: 34px 56px; max-width: 1040px;
  margin: 48px auto 0; text-align: left;
}
.faq h3 { font-size: 17px; font-weight: 680; letter-spacing: -.01em; margin-bottom: 6px; }
.faq p { color: var(--dim); font-size: 15px; line-height: 1.6; }
.faq a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

/* After you click Download: three steps, so the model download that
   follows the 9.7 MB file is known before the click. */
section.setup { padding-top: 96px; padding-bottom: 0; }
.steps {
  list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  max-width: 1100px; margin: 40px auto 0; text-align: left;
}
.steps li { background: var(--wash); border-radius: 18px; padding: 22px 22px 24px; }
.steps .n {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: 50%; background: var(--ink); color: var(--on-ink); font-size: 13px; font-weight: 650;
}
.steps b { display: block; margin: 12px 0 4px; font-size: 16.5px; font-weight: 680; letter-spacing: -.01em; }
.steps span:not(.n) { color: var(--dim); font-size: 14.5px; line-height: 1.55; }

/* The label a Private cloud reply carries in the app, set in type. */
.plan .footnote { display: block; margin: -8px 0 22px; color: var(--dim); font-size: 13.5px; line-height: 1.5; }
.plan .footnote b { color: var(--ink); font-weight: 600; }

/* The fine print, one line under the questions. */
.readmore { max-width: 1040px; margin: 44px auto 0; color: var(--dim); font-size: 15px; line-height: 1.6; }
.readmore a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

/* The last screen: one more chance to download, on a grey band. */
.finale { background: var(--wash); padding: 96px 24px 100px; text-align: center; }
.finale > .btn { margin-top: 26px; }
.finale .handoff { max-width: 420px; margin: 24px auto 0; text-align: left; }

/* ----------------------------------------------------------------- widths */
@media (max-width: 1020px) {
  .ways, .steps { grid-template-columns: 1fr; max-width: 620px; }
  /* The homepage stacks: the words, then the window under them. */
  .home .p-hero { grid-template-columns: 1fr; gap: 36px; max-width: 760px; padding-top: 104px; }
  .p-trust { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 760px; }
}
@media (max-width: 860px) {
  .plans, .faq { grid-template-columns: 1fr; max-width: 620px; }
  .tools, .p-plans { grid-template-columns: 1fr; max-width: 620px; }
  .share-x { max-width: 620px; }
}

/* Phone width. Scoped away from /path, which sizes its own header and hero. */
@media (max-width: 600px) {
  body:not(.path-page) header { padding: 14px 16px; }
  body:not(.path-page) nav a { margin-left: 16px; font-size: 14px; }
  /* The header is one line or it is a mess: the anchors into the page the
     visitor is already scrolling go first, and the Download pill goes
     because a phone cannot install what it points at. Pricing stays and
     Docs goes (review round, 2026-09-23): Docs was the only link left on
     SistineGPT's page, the wrong one for somebody deciding whether to
     bother, and "what does it cost" is the question they have. */
  body:not(.path-page) nav a[href^="#"]:not([href="#pricing"]), body:not(.path-page) nav a.pill,
  body:not(.path-page) nav a[href="/docs.html"] { display: none; }
  /* THE HOMEPAGE'S HEADER ON A PHONE IS THE WAY IN (2026-09-25): a phone can
     use Path now, so the Start pill stays, beside Open web app for people
     who already pay; Pricing gives way to them. */
  body.home nav a.pill { display: inline-block; }
  /* Sistine's redesigned homepage (body.sistine-site, 2026-09-27) keeps
     the same rule: its Start pill stays on a phone. */
  body.sistine-site nav a.pill { display: inline-flex; }
  body.home nav a[href="#pricing"] { display: none; }
  body.home nav a { margin-left: 14px; }
  .home .logo { font-size: 14.5px; }
  body:not(.path-page) section { padding: 72px 16px; }
  /* A PHONE READS THE PAGE IN ITS OWN ORDER (2026-09-25): the pitch, the
     Start button, the terms and the Mac line, then the chart, whose top is
     still in a 390x664 first screen. Until Path had a web app the chart was
     moved above a hand-off here, because a phone could not use the button;
     now the button is the reason a phone is on the page. */
  .home .p-hero { gap: 22px; padding: 76px 16px 0; }
  .p-hero h1 { font-size: 33px; margin-top: 10px; }
  .p-lede { font-size: 16.5px; margin-top: 12px; }
  /* The four tools are one scroll away; the first screen keeps the pitch,
     the button and the chart. */
  .p-lede-more { display: none; }
  .home .p-actions { margin-top: 20px; gap: 12px; }
  .home .p-actions .btn { display: block; width: 100%; text-align: center; }
  .home .p-actions .go { display: block; width: 100%; text-align: center; }
  .home .p-inapp { margin-top: 12px; font-size: 13.5px; }
  .p-inapp-why { display: none; }
  .home .p-terms { margin-top: 8px; }
  .p-shot { padding: 10px 10px 12px; border-radius: 18px; }
  .p-shot figcaption { margin-top: 10px; padding: 0 2px; font-size: 13px; }
  .p-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 36px; padding: 0 16px; }
  .p-trust li { padding: 14px 14px 15px; }
  .p-trust li:last-child { grid-column: 1 / -1; }
  .home .p-tools, .home .p-pricing { padding-top: 76px; padding-bottom: 0; }
  .home .p-faq { padding-top: 76px; padding-bottom: 72px; }
  .tools { margin-top: 32px; gap: 14px; }
  .tool { padding: 22px 20px 20px; }
  .tool h3 { font-size: 21px; }
  .share-x { padding: 22px 20px; margin-top: 14px; }
  .p-plans { margin-top: 32px; gap: 14px; }
  .p-plan, .p-before { padding: 24px 20px 22px; }
  .p-plan .price { font-size: 46px; }
  /* A Mac download on a phone becomes a way to send the link to a Mac
     (SistineGPT's page), or where to get it (the homepage, `.not-mac`). */
  .mac-only { display: none !important; }
  .not-mac { display: inline; }
  .handoff { display: block; margin-top: 18px; padding: 16px 18px; border-radius: 16px; background: var(--wash); }
  .handoff .btn { display: block; width: 100%; text-align: center; }
  section.setup { padding-top: 64px; padding-bottom: 0; }
  .product-hero { padding: 96px 16px 0; }
  .product-hero .appicon { width: 60px; height: 60px; }
  .product-hero .lede { font-size: 17px; }
  .hero-shot { padding: 0 16px; margin-top: 36px; }
  .ways > li, .plan { padding: 22px 20px 24px; }
  .plan .price { font-size: 38px; }
  .finale { padding: 72px 16px 76px; }
}

/* A TABLET IS NOT A MAC EITHER (review round, 2026-09-23). The swap above
   went by width alone, so an iPad (820 wide) or a phone held sideways was
   offered "Download for Mac" and no way to send the link on. A screen whose
   main pointer is a finger and cannot hover gets the same swap. A Mac never
   matches: its pointer is fine and it hovers. */
@media (hover: none) and (pointer: coarse) {
  .mac-only { display: none !important; }
  .not-mac { display: inline; }
  .handoff { display: block; margin-top: 18px; padding: 16px 18px; border-radius: 16px; background: var(--wash); }
  .handoff .btn { display: block; width: 100%; text-align: center; }
}