/* halfsheet — the browser's own pages on terracraft.fyi. Tokens from the halfsheet design system;
   fonts served from here, so the page makes no third-party requests. */
@font-face { font-family: "Handsquare"; src: url("fonts/Handsquare-Regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("fonts/IBMPlexSans-latin.woff2") format("woff2"); font-weight: 100 700; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/IBMPlexMono-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --surface: #f8f2e3; --surface-raised: #fffdf7; --surface-sunken: #efe8d6;
  --ink: #1c2238; --ink-muted: #555c70;
  --brand: #2b3454; --on-brand: #f8f2e3; --brand-strong: #1c2238; --brand-tint: #e2e1e4;
  --hairline: #cfcbc0;
  --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 40px; --space-6: 64px; --space-7: 120px;
  --stroke: 2px;
  --font-display: "Handsquare", "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #141a2a; --surface-raised: #2b3454; --surface-sunken: #0e1320;
    --ink: #f8f2e3; --ink-muted: #b4bbcc;
    --brand: #9db2e4; --on-brand: #2b3454; --brand-strong: #b9c8ee; --brand-tint: #2b3454;
    --hairline: #3a4460; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --surface: #141a2a; --surface-raised: #2b3454; --surface-sunken: #0e1320;
  --ink: #f8f2e3; --ink-muted: #b4bbcc;
  --brand: #9db2e4; --on-brand: #2b3454; --brand-strong: #b9c8ee; --brand-tint: #2b3454;
  --hairline: #3a4460; color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--surface); color: var(--ink);
  font: 400 16px/26px var(--font-sans);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: var(--stroke); transition: color 120ms linear; }
a:hover { color: var(--brand-strong); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: var(--stroke) solid var(--brand); outline-offset: 2px; }
img, svg { display: block; max-width: 100%; }
p { margin: 0 0 var(--space-3); }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--space-3); }
@media (min-width: 720px) { .wrap { padding: 0 var(--space-4); } }

/* Display type: Handsquare, lowercase only, weight by size. */
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: 0; text-transform: lowercase; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(36px, 6vw, 56px); line-height: 1.05; }
h2 { font-size: 32px; line-height: 1.15; }
.lead { font-size: 20px; line-height: 30px; max-width: 60ch; }
.caption { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.eyebrow { font-family: var(--font-display); font-size: 20px; line-height: 1.3; letter-spacing: .02em; text-transform: lowercase; color: var(--brand); margin: 0 0 var(--space-2); }

/* Nav: wordmark left, lowercase links right, a brand rule under it all. */
.hs-nav { background: var(--surface-raised); border-bottom: var(--stroke) solid var(--brand); font-family: var(--font-display); text-transform: lowercase; }
.hs-nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 88px; }
.hs-nav__brand { display: block; }
.hs-nav__brand svg { height: 26px; width: auto; }
.hs-nav__links { display: flex; gap: var(--space-4); list-style: none; margin: 0; padding: 0; }
.hs-nav__links a { color: var(--ink); text-decoration: none; font-size: 20px; letter-spacing: .02em; border-bottom: var(--stroke) solid transparent; padding: var(--space-1) 0; }
.hs-nav__links a:hover, .hs-nav__links a[aria-current] { border-bottom-color: var(--brand); color: var(--brand); }
.hs-menu { display: none; position: relative; }
.hs-menu summary { list-style: none; }
.hs-menu summary::-webkit-details-marker { display: none; }
.hs-menu .hs-nav__links { position: absolute; right: 0; top: calc(100% + var(--space-2)); flex-direction: column; gap: 0; background: var(--surface-raised); border: var(--stroke) solid var(--brand); min-width: 200px; z-index: 2; }
.hs-menu .hs-nav__links a { display: block; padding: var(--space-3); border-bottom: 0; }
.hs-menu .hs-nav__links a:hover, .hs-menu .hs-nav__links a[aria-current] { background: var(--brand-tint); }
@media (max-width: 719px) {
  .hs-nav > .wrap > .hs-nav__links { display: none; }
  .hs-menu { display: block; }
}

/* A text brand, for pages that aren't the browser's. */
.hs-nav__brand--text { font-family: var(--font-display); font-size: 26px; line-height: 1; letter-spacing: .02em; text-transform: lowercase; color: var(--brand); text-decoration: none; }
.hs-nav__brand--text:hover { color: var(--brand-strong); }
/* A hero with copy alone, no panel. */
.hero--studio { grid-template-columns: minmax(0, 1fr); }
.hero--studio .hero__copy { max-width: 60ch; }
@media (min-width: 720px) { .hero--studio .hero__copy { padding-right: 0; } }

/* The word, in the theme's brand colour. */
.wordmark .hs-brand { fill: var(--brand); }

/* Button: a square 48px block in Handsquare. */
.hs-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0 var(--space-3); height: 48px;
  border: var(--stroke) solid var(--brand); border-radius: 0; background: var(--brand); color: var(--on-brand);
  font-family: var(--font-display); font-size: 20px; letter-spacing: .02em; text-transform: lowercase; cursor: pointer; text-decoration: none;
  transition: background 120ms linear, border-color 120ms linear, color 120ms linear; }
.hs-btn:hover { background: var(--brand-strong); border-color: var(--brand-strong); color: var(--on-brand); }
.hs-btn--outline { background: transparent; color: var(--brand); }
.hs-btn--outline:hover { background: var(--brand-tint); border-color: var(--brand); color: var(--brand); }
.hs-btn--quiet { background: var(--brand-tint); border-color: var(--brand-tint); color: var(--brand); }
.hs-btn--quiet:hover { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.hs-btn[disabled], .hs-btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; pointer-events: none; }
/* Apple's own badge, unaltered, at the buttons' height. */
.store-badge { display: inline-flex; line-height: 0; }
.store-badge img { display: block; width: auto; height: 48px; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-top: var(--space-4); }

/* Hero: copy on the left, a brand panel on the right, meeting at a hard vertical edge. */
.hero { display: grid; grid-template-columns: minmax(0, 1fr); border-bottom: var(--stroke) solid var(--brand); }
.hero__copy { padding: var(--space-5) 0 var(--space-5); display: grid; gap: var(--space-3); align-content: center; }
.hero__copy h1 { max-width: 14ch; }
.hero__copy .lead { margin: 0; color: var(--ink-muted); }
.hero__panel { margin: 0 auto var(--space-5); width: 100%; max-width: 400px; }
.hero__panel picture, .hero__panel img { display: block; width: 100%; height: auto; }
@media (min-width: 720px) {
  .hero { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .hero__copy { padding: var(--space-7) var(--space-6) var(--space-7) 0; }
  .hero__panel { margin: 0 0 0 auto; align-self: center; max-width: 420px; }
}

/* The open phone: the wide Split View picture and the upright one, side by side when there's room. */
.shots { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin-top: var(--space-5); }
/* Both pictures of the open phone at the same scale: the columns are as wide as the phone is sideways and upright. */
@media (min-width: 720px) { .shots { grid-template-columns: minmax(0, 1986fr) minmax(0, 1484fr); align-items: end; } }
.shot { margin: 0; }
.shot img { width: 100%; height: auto; }
.shot figcaption { font-size: 13px; line-height: 18px; color: var(--ink-muted); margin-top: var(--space-2); }

/* Sections */
main section { padding: var(--space-5) 0; }
@media (min-width: 720px) { main section { padding: var(--space-6) 0; } }
section + section { border-top: var(--stroke) solid var(--hairline); }
.section-head { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); max-width: 60ch; }
.prose { max-width: 60ch; }
.prose p:last-child { margin-bottom: 0; }

/* Feature card: a narrow brand block carrying one glyph, title and one paragraph beside it. */
.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hs-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); background: var(--surface-raised); border: var(--stroke) solid var(--brand); border-radius: 0; color: var(--ink); margin: 0; }
.hs-card__block { background: var(--brand); display: flex; align-items: flex-end; padding: var(--space-3); color: var(--on-brand); font-family: var(--font-display); font-size: 32px; line-height: 1; text-transform: lowercase; }
.hs-card__body { padding: var(--space-4); }
.hs-card__title { font-family: var(--font-display); font-size: 32px; line-height: 1.15; text-transform: lowercase; margin: 0 0 var(--space-2); }
.hs-card__text { font-family: var(--font-sans); font-size: 16px; line-height: 26px; margin: 0; color: var(--ink-muted); }

/* The app icon, shown as iOS shows it; the corners are in the picture. */
.store { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-4); align-items: center;
  background: var(--surface-raised); border: var(--stroke) solid var(--brand); padding: var(--space-4); }
/* A thin line traced along the icon's own edge, in the accent colour: navy keeps the cream half
   apart from the light panel, and pale blue keeps the navy half apart from the dark one. */
.store img { width: 96px; height: 96px; filter: drop-shadow(1px 0 0 var(--brand)) drop-shadow(-1px 0 0 var(--brand)) drop-shadow(0 1px 0 var(--brand)) drop-shadow(0 -1px 0 var(--brand)); }
.store p { margin: 0; }
@media (max-width: 479px) { .store { grid-template-columns: minmax(0, 1fr); } }

code { font-family: var(--font-mono); font-size: 14px; line-height: 22px; background: var(--surface-sunken); padding: 1px var(--space-1); }

/* Footer */
.site-foot { border-top: var(--stroke) solid var(--brand); font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.site-foot .wrap { padding: var(--space-4) var(--space-3) var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); justify-content: space-between; }
@media (min-width: 720px) { .site-foot .wrap { padding-inline: var(--space-4); } }
.site-foot a { color: var(--ink-muted); }
.site-foot a:hover { color: var(--brand); }

/* Reading pages: privacy, support, acknowledgments. */
.legal { max-width: 60ch; padding: var(--space-5) 0; }
@media (min-width: 720px) { .legal { padding: var(--space-6) 0; } }
.legal h1 { margin-bottom: var(--space-2); }
.legal h2 { font-size: 24px; margin: var(--space-5) 0 var(--space-2); }
.legal ul { margin: 0 0 var(--space-3); padding-left: 1.2em; }
.legal li { margin-bottom: var(--space-1); }
.legal .lead { margin: var(--space-3) 0; }
.contact { border: var(--stroke) solid var(--brand); background: var(--surface-raised); padding: var(--space-3) var(--space-4); margin: var(--space-4) 0; }
.contact p:last-child { margin-bottom: 0; }
details { border-top: var(--stroke) solid var(--hairline); padding: var(--space-3) 0; }
details:last-of-type { border-bottom: var(--stroke) solid var(--hairline); }
summary { cursor: pointer; font-weight: 500; color: var(--ink); }
summary::marker { color: var(--brand); }
details p { margin: var(--space-2) 0 0; color: var(--ink-muted); }

/* Features: a picture and its copy side by side, alternating sides; stacked, picture first, on a phone. */
.feature { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: center; }
.feature + .feature { margin-top: var(--space-6); }
@media (min-width: 720px) {
  .feature { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-5); }
  .feature--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .feature--flip .feature__media { order: 2; }
}
.feature__media { margin: 0; }
.feature__media img { width: 100%; height: auto; }
.feature__media figcaption { font-size: 13px; line-height: 18px; color: var(--ink-muted); margin-top: var(--space-2); }
.feature__copy h3 { font-size: 32px; line-height: 1.15; margin-bottom: var(--space-3); }
.feature__copy p { color: var(--ink-muted); max-width: 46ch; margin: 0; }

/* A picture still to come: the shape of the shot, plainly marked. */
.placeholder { aspect-ratio: 3 / 2; display: grid; place-content: center; gap: var(--space-2); text-align: center; padding: var(--space-4);
  border: var(--stroke) dashed var(--brand); background: var(--surface-sunken); color: var(--ink-muted); font-size: 14px; line-height: 20px; }
.placeholder__tag { font-family: var(--font-display); font-size: 20px; letter-spacing: .02em; text-transform: lowercase; color: var(--brand); }

/* The comparison's labels: columns in the picture's own pixels, so each name stays under its half at any width. */
.compare__labels { display: grid; grid-template-columns: 38fr 875fr 27fr 875fr 45fr; margin-top: var(--space-2);
  font-family: var(--font-display); font-size: 20px; line-height: 1.2; letter-spacing: .02em; color: var(--brand); text-align: center; text-transform: lowercase; }

.compare__labels--pair { grid-template-columns: 800fr 80fr 800fr; }
.feature__media .caption--center { text-align: center; }

/* The smaller features, and finding your way: text only, a step down from the three above,
   each a short title over a sentence or two, with a rule on top. */
.extras { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4) var(--space-4); }
@media (min-width: 640px) { .extras { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .extras { grid-template-columns: repeat(4, minmax(0, 1fr)); } .extras--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.section-head + .extras { margin-top: 0; }
.extras li { border-top: var(--stroke) solid var(--brand); padding-top: var(--space-3); }
.extras h3 { font-size: 24px; line-height: 1.15; color: var(--ink); margin: 0 0 var(--space-2); }
.extras p { margin: 0; font-size: 15px; line-height: 24px; color: var(--ink-muted); }
.closing { margin: var(--space-5) 0 0; max-width: 60ch; }

/* In dark mode the name is cream: the wordmark at the top and the store block's name. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wordmark .hs-brand { fill: #f8f2e3; }
  :root:not([data-theme="light"]) .store .eyebrow { color: #f8f2e3; }
}
:root[data-theme="dark"] .wordmark .hs-brand { fill: #f8f2e3; }
:root[data-theme="dark"] .store .eyebrow { color: #f8f2e3; }

/* Matching the App Store cards: each feature's one line under its title, a step up from the paragraph. */
.feature__copy .feature__line { color: var(--ink); font-size: 20px; line-height: 30px; margin-bottom: var(--space-3); }
.feature__media--phone { max-width: 420px; margin-inline: auto; width: 100%; }

/* Two closed phones side by side, each named just above it. */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); align-items: end; }
@media (max-width: 479px) { .pair__phone figcaption { font-size: 15px; } }
.pair__phone { margin: 0; }
.pair__phone figcaption { font-family: var(--font-display); font-size: 20px; line-height: 1.2; letter-spacing: .02em; text-transform: lowercase;
  color: var(--ink-muted); text-align: center; margin-bottom: var(--space-1); }
.pair__phone .pair__us { color: var(--brand); }
.pair img { width: 100%; height: auto; }

/* A callout over a picture: a ring at the picture's own fractions and its tag. Blue marks Halfsheet's own
   parts; orange (--bad) what Safari wastes, as on the cards. */
.callout-host { position: relative; }
.callout { position: absolute; box-sizing: border-box; border-radius: 999px; border: 3px solid #3c5694;
  box-shadow: 0 0 12px 3px rgba(60,86,148,.4); pointer-events: none; }
.callout--bad { border-color: #f2711c; box-shadow: 0 0 12px 3px rgba(242,113,28,.4); }
.callout__tag { position: absolute; top: 50%; white-space: nowrap; font: 600 13px/1 var(--font-sans); color: #fff; background: #3c5694;
  padding: 6px 10px; border-radius: 999px; box-shadow: 0 2px 8px rgba(28,34,56,.3); }
.callout--bad .callout__tag { background: #f2711c; }
.callout__tag--left { right: calc(100% + 6px); transform: translateY(-50%); }
@media (min-width: 960px) { .callout__tag { font-size: 15px; padding: 7px 12px; } }

/* Two phones stacked and staggered, as on the address-bar card: the picture's own geometry (each phone 732
   of 1258 wide, the back one 110 of 1130 lower). */
.stagger { position: relative; aspect-ratio: 1258 / 1130; max-width: 640px; margin-inline: auto; }
.stagger img { position: absolute; width: 58.2%; height: auto; }
.stagger__front { left: 0; top: 0; z-index: 2; }
.stagger__back { left: 41.8%; top: 9.7%; z-index: 1; }

/* The extras, each under its symbol in a brand disc. */
.extras--icons li { display: grid; gap: var(--space-2); align-content: start; }
.extras--icons h3 { margin: 0; }
.extra__icon { width: 56px; height: 56px; border-radius: 50%; background: var(--brand); color: var(--on-brand); display: grid; place-items: center; }
.extra__icon svg { width: 28px; height: 28px; }