/* Pero — the landing page (design/BRIEF.md › Landing), over base.css. Paper ground, graphite type, one highlighter:
   colours, type, radii, shadows and easings are DS tokens; the lengths with no DS unit are the page's own layout.
   Whole without JavaScript, still under Reduce Motion: what hides or moves content lives under html.js and
   prefers-reduced-motion: no-preference. */

:root {
  --section: clamp(88px, 12vw, 176px);
  --bezel: var(--graphite-900);
}
/* On the dark ground the bezel is the store set's: a frame that still reads against ink. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bezel: var(--graphite-700); }
}
:root[data-theme="dark"] { --bezel: var(--graphite-700); }

h1, h2 { font-weight: 700; line-height: 1; letter-spacing: -0.03em; text-wrap: balance; }
h2 { font-size: clamp(2.5rem, 7vw, 5.5rem); }
.how, .also, .pro { padding-top: var(--section); }
.how h2, .also h2, .pro h2 { margin-bottom: clamp(40px, 6vw, 72px); }

/* MarkerBand, as on the Plan's «Now» task: one word per heading on the band, its ends cut at the DS slant. */
.mark { position: relative; z-index: 0; display: inline-block; font-style: normal; color: var(--color-text-on-highlight); }
.mark::before {
  --slant: calc(1lh * tan(var(--stroke-band-slant)));
  content: "";
  position: absolute;
  z-index: -1;
  inset: -0.02em -0.14em -0.1em;
  background: var(--color-marker-band);
  clip-path: polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
}

/* A neutral device: a rounded bezel around the capture, no island, no buttons. --w is its width. A pop-out is a
   crop of the same capture: --cx --cy --cw --ch are the crop's left, top, width and height as fractions of it.
   The captures are the app's light screens in both themes, as on the store set's ink. */
.device { width: var(--w); padding: calc(var(--w) * 0.022); border-radius: calc(var(--w) * 0.146); background: var(--bezel); box-shadow: var(--shadow-dialog); }
.screen { position: relative; overflow: hidden; aspect-ratio: 1320 / 2868; border-radius: calc(var(--w) * 0.124); background: var(--graphite-50); }
.screen > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.pop { position: relative; overflow: hidden; aspect-ratio: calc(var(--cw) * 1320) / calc(var(--ch) * 2868); }
.pop > img { position: absolute; max-width: none; height: auto; width: calc(100% / var(--cw)); left: calc(-100% * var(--cx) / var(--cw)); top: calc(-100% * var(--cy) / var(--ch)); }

/* Apple's badge: 48 px tall, a quarter of that clear on every side, never transformed or animated. */
.badge { display: inline-block; margin: -12px; padding: 12px; line-height: 0; }
.badge img { width: auto; height: 48px; }

/* Hero. The headline is sized by its own column (cqw), so its longest line always fits. */
.hero { display: grid; gap: clamp(40px, 9vw, 72px); padding-top: clamp(8px, 2vw, 24px); }
.hero-copy { container-type: inline-size; display: grid; justify-items: start; gap: clamp(20px, 2.6vw, 36px); }
.hero h1 { font-size: clamp(2.5rem, 17cqw, 9.5rem); }
.lede { max-width: 31em; font-size: clamp(1.0625rem, 1.55vw, 1.375rem); line-height: 1.45; color: var(--color-text-secondary); }
.lede strong { font-weight: 600; color: var(--color-text-primary); }
.hero-shot { --w: min(70vw, 300px); position: relative; justify-self: center; }
/* The «Now» card, lifted out of the screen it sits on: the strip of the store set's first slide, drawn 1.22× the device. */
.hero-pop {
  --cx: 0; --cw: 1; --cy: 0.196; --ch: 0.177;
  --pw: calc(var(--w) * 1.22);
  position: absolute;
  left: calc((var(--w) - var(--pw)) / 2);
  top: calc(var(--w) * 0.378);
  width: var(--pw);
  border-radius: calc(var(--pw) * 0.041);
  box-shadow: var(--shadow-dialog);
}
@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: clamp(48px, 6vw, 96px); min-height: calc(100svh - var(--top)); padding-block: 0 clamp(24px, 5svh, 64px); }
  .hero-shot { --w: clamp(240px, calc((100svh - 190px) / 2.2), 350px); margin-right: calc(var(--w) * 0.11); }
}

/* How it works. A list of steps, each with its screen; from 900 px, with the script, the device is pinned and its
   screen follows the step at the middle of the window — that step's title takes the band, as «Now» does. */
.steps { display: grid; gap: clamp(64px, 12vw, 104px); counter-reset: step; }
.step { counter-increment: step; }
.step::before { content: counter(step); display: block; margin-bottom: var(--space-3); font: 500 0.9375rem/1.33 var(--font-mono); color: var(--color-text-secondary); }
.step-title { position: relative; z-index: 0; font-size: clamp(1.75rem, 3.3vw, 2.75rem); line-height: 1.14; font-weight: 700; letter-spacing: -0.02em; }
.step > p { max-width: 27em; margin-top: var(--space-4); font-size: clamp(1.0625rem, 1.4vw, 1.25rem); color: var(--color-text-secondary); }
.step-shot { --w: min(68vw, 280px); margin: var(--space-8) auto 0; }
.band, .stage { display: none; }
/* The band is its own layer over the title — the same words in the band's text colour — so a title of two lines
   is marked whole, and on the dark ground the words on the band are dark while the title under it stays light. */
.js .band { display: block; position: absolute; inset: 0; z-index: 1; color: var(--color-text-on-highlight); user-select: none; pointer-events: none; clip-path: inset(-0.2em 100% -0.2em -1em); }
.js .band > span { background: var(--color-marker-band); box-shadow: 0.14em 0 0 var(--color-marker-band), -0.14em 0 0 var(--color-marker-band); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.js .now .band { clip-path: inset(-0.2em -1em -0.2em -1em); }
@media (min-width: 900px) {
  .js .scene { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--gutter); }
  .js .stage { --w: clamp(240px, calc((100svh - 120px) / 2.2), 340px); display: grid; place-items: center; position: sticky; top: 0; height: 100svh; }
  .js .steps { gap: 0; padding-block: 11svh; }
  .js .scene .step { display: grid; align-content: center; min-height: 78svh; }
  .js .scene .step-shot { display: none; }
  .js .stage [data-for] { opacity: 0; }
  .js .stage [data-for].on { opacity: 1; }
}

/* Also in Pero. A card is the app's own: a raised surface on the canvas. The device is cut by the card's edge. */
.cards { display: grid; gap: clamp(16px, 2vw, 24px); }
.card { display: flex; flex-direction: column; overflow: hidden; border: var(--border-hairline) solid var(--color-border-hairline); border-radius: var(--radius-xl); background: var(--color-surface-raised); }
.card-copy { display: grid; gap: var(--space-3); padding: clamp(24px, 2.6vw, 36px); }
.card h3 { font-size: clamp(1.5rem, 2.3vw, 1.875rem); line-height: 1.15; font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; }
.card p { color: var(--color-text-secondary); }
.card-shot { container-type: inline-size; display: flex; justify-content: center; align-items: flex-start; height: clamp(320px, 34vw, 400px); margin-top: auto; overflow: hidden; }
.card-shot .device { --w: min(74cqw, 290px); box-shadow: none; }
/* The Move sheet lives at the bottom of its screen: this card shows the device's lower half, above the words. */
.card--sheet { flex-direction: column-reverse; }
.card--sheet .card-shot { align-items: flex-end; margin-top: 0; }
@media (min-width: 620px) and (max-width: 899px) {
  .card, .card--sheet { flex-direction: row; align-items: center; }
  .card--sheet { flex-direction: row-reverse; }
  .card-copy { flex: 1; }
  .card-shot { flex: 0 0 44%; margin-top: 0; }
}
/* From 900 px: Focus and Projects side by side, each half the row with its device beside the words; the other three under them. */
@media (min-width: 900px) {
  .cards { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .card { grid-column: span 2; }
  .card--wide { grid-column: span 3; flex-direction: row; align-items: center; }
  .card--wide .card-copy { flex: 1; }
  .card--wide .card-shot { flex: 0 0 44%; margin-top: 0; }
  .card--wide .card-shot .device { --w: min(88cqw, 290px); }
}
.more { display: grid; column-gap: clamp(24px, 4vw, 56px); margin-top: clamp(48px, 7vw, 88px); }
.more li { padding-block: var(--space-5); border-top: var(--border-hairline) solid var(--color-border-hairline); color: var(--color-text-secondary); }
.more strong { font-weight: 600; color: var(--color-text-primary); }
@media (min-width: 620px) { .more { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .more { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Pero Pro. What works without the subscription on the raised surface, what Pro adds on the DS's filled action:
   ink in light, paper in dark. Its second line is the panel's text colour, let down toward the panel. */
.plans { display: grid; gap: clamp(16px, 2vw, 24px); }
.plan { display: grid; align-content: start; gap: var(--space-4); padding: clamp(24px, 3.4vw, 48px); border: var(--border-hairline) solid var(--color-border-hairline); border-radius: var(--radius-xl); background: var(--color-surface-raised); color: var(--color-text-secondary); }
.plan-lead { font-size: clamp(1.5rem, 2.6vw, 2.25rem); line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; color: var(--color-text-primary); text-wrap: balance; }
.plan--pro { border-color: var(--color-action-primary); background: var(--color-action-primary); color: color-mix(in srgb, var(--color-text-on-ink) 72%, var(--color-action-primary)); }
.plan--pro .plan-lead { color: var(--color-text-on-ink); }
@media (min-width: 800px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Close */
.close { display: grid; justify-items: center; gap: clamp(36px, 5vw, 56px); padding-block: var(--section); text-align: center; }
.close h2 { max-width: 9em; font-size: clamp(2.25rem, 11.5vw, 8.5rem); line-height: 1.1; }
.close .badge { margin: 0; }

/* Apple's credit line, once, in the footer */
.credit { max-width: 46em; font-size: 0.8125rem; }

/* Motion. One load sequence — the words rise, the device arrives, the band is drawn across «first» while the
   «Now» card lifts off the screen — then quiet reveals, each drawing its heading's band. Everything plays once. */
.words > span { display: inline-block; overflow: hidden; vertical-align: bottom; padding-block: 0.12em; margin-block: -0.12em; }
.words > .has-mark { padding-inline: 0.2em; margin-inline: -0.2em; }
.words > span > span { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  [data-enter] { animation: enter 0.72s var(--easing-enter) both; animation-delay: calc(var(--i, 0) * 60ms); }
  .words > span > span { animation: word 0.72s var(--easing-enter) both; animation-delay: calc(var(--i, 0) * 60ms); }
  .hero .mark::before { animation: band var(--duration-highlight) var(--easing-highlight) 0.7s both; }
  .hero-pop { animation: lift 0.6s var(--easing-enter) 0.62s both; }

  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.72s var(--easing-enter), transform 0.72s var(--easing-enter); transition-delay: calc(var(--i, 0) * 70ms); }
  .js [data-reveal].in { opacity: 1; transform: none; }
  .js [data-reveal] .mark::before { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); transition: clip-path var(--duration-highlight) var(--easing-highlight) 0.3s; }
  .js [data-reveal].in .mark::before { clip-path: polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%); }

  .js .band { transition: clip-path var(--duration-highlight) var(--easing-highlight); }
  .js .stage [data-for] { transition: opacity var(--duration-slow) var(--easing-standard); }
}
@keyframes enter { from { opacity: 0; transform: translateY(24px); } }
@keyframes word { from { transform: translateY(110%); } }
@keyframes band { from { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); } }
/* 0.82 is 1 / 1.22: the card starts at the size it has on the screen under it. */
@keyframes lift { from { opacity: 0; transform: scale(0.82); } }