/* Takto — gettakto.com
   One stylesheet for the landing page and the support, privacy and legal pages.
   No external fonts, no frameworks. Palette follows the app: red, white, black. */

:root {
  --paper: #f6f5f2;
  --card: #ffffff;
  --ink: #111111;
  --ink-2: #3d3d3d;
  --muted: #666666;
  --line: #dedcd6;
  --red: #ec0016;        /* app icon and hero red */
  --red-ink: #c20012;    /* red that stays readable as small text on paper */
  --night: #0e0e0e;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --wrap: 1120px;
  --gutter: clamp(20px, 5vw, 48px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-synthesis: none;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:hover { color: var(--red-ink); }

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

h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }

.skip {
  position: absolute; left: 16px; top: -64px; z-index: 10;
  background: var(--ink); color: #fff; padding: 12px 16px; border-radius: 10px;
  font-weight: 650; text-decoration: none; transition: top .15s;
}
.skip:focus { top: 16px; color: #fff; }

/* ---------- Shared chrome: header and footer ---------- */

header, footer, main.article {
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-top: 24px; padding-bottom: 24px;
}

.logo {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 26px; font-weight: 800; letter-spacing: -.04em;
  text-decoration: none; color: var(--ink); min-height: 44px;
}
.logo:hover { color: var(--ink); }
.mark { width: 36px; height: 36px; border-radius: 9px; flex: none; }

nav { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 15px; }
nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px;
  text-decoration: none; color: var(--ink-2); border-radius: 10px;
}
nav a:hover { color: var(--red-ink); }
nav a[aria-current="page"] { color: var(--ink); font-weight: 650; }

footer {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
  margin-top: 0; padding-top: 32px; padding-bottom: 48px;
  border-top: 1px solid var(--line);
  font-size: 13px; line-height: 1.8; color: var(--muted);
}
footer nav { font-size: 13px; margin: -10px -10px 0 0; justify-content: flex-end; }
footer nav a { color: var(--muted); }

/* ---------- Shared type helpers ---------- */

.eyebrow {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em; color: var(--muted);
}

.button {
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 24px;
  background: var(--red); color: #fff; border-radius: 14px;
  font-size: 17px; font-weight: 650; text-decoration: none;
  transition: background-color .2s, transform .2s var(--ease);
}
.button:hover { background: var(--red-ink); color: #fff; }
.button:active { transform: scale(.98); }
.button svg { width: 18px; height: 18px; flex: none; }
.button.light { background: #fff; color: var(--ink); }
.button.light:hover { background: var(--paper); color: var(--ink); }

/* ---------- Landing page ---------- */

.wrap { max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

.hero { padding: clamp(20px, 3vw, 40px) 0 clamp(64px, 8vw, 112px); }
.hero .wrap {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
.hero h1 {
  margin-top: 20px;
  font-size: clamp(40px, 5.6vw, 80px); line-height: 1; font-weight: 800; letter-spacing: -.045em;
}
.hero h1 span { display: block; white-space: nowrap; }
.hero h1 .accent { color: var(--red); }
.lede {
  margin-top: 28px; max-width: 34em;
  font-size: clamp(18px, 2vw, 21px); line-height: 1.55; color: var(--ink-2);
}
.hero-actions { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; }
.status {
  display: inline-flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 99px; background: var(--card);
  font-size: 13px; color: var(--ink-2);
}
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--red); flex: none; }

/* Phone frame around a real screenshot. --pw is the frame width. */
.phone {
  --pw: 300px;
  position: relative; width: var(--pw); margin: 0; flex: none;
  padding: calc(var(--pw) * .03);
  border-radius: calc(var(--pw) * .178);
  background: #0b0b0b;
  box-shadow: 0 1px 0 #2a2a2a inset, 0 30px 60px -28px rgba(17, 17, 17, .45), 0 12px 24px -16px rgba(17, 17, 17, .3);
}
.phone img {
  width: 100%; aspect-ratio: 1206 / 2622; object-fit: cover;
  border-radius: calc(var(--pw) * .15);
  background: #ededed;
}

.hero-visual { position: relative; display: grid; justify-items: center; padding: 28px 0; }
.hero-visual::before {
  content: ""; position: absolute; z-index: 0;
  inset: 0 -6% 0 14%;
  border-radius: 40px; background: var(--red);
}
.hero-visual .phone { --pw: clamp(250px, 27vw, 340px); z-index: 1; }

/* Section heads */
.section { padding: clamp(64px, 9vw, 128px) 0; }
.section-head { max-width: 40em; }
.section-head h2 {
  margin-top: 16px;
  font-size: clamp(32px, 4.6vw, 56px); line-height: 1.04; font-weight: 800; letter-spacing: -.035em;
}
.section-head p { margin-top: 20px; font-size: 18px; line-height: 1.6; color: var(--ink-2); }

/* Tour: three screens */
.tour { background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.screens {
  list-style: none; margin: clamp(40px, 6vw, 72px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px);
}
.screens li { display: flex; flex-direction: column; align-items: center; }
.screens li:nth-child(2) { margin-top: 56px; }
.screens .phone { --pw: clamp(210px, 23vw, 290px); transition: transform .5s var(--ease); }
.screens li:hover .phone { transform: translateY(-6px); }
.caption { margin-top: 28px; width: 100%; max-width: 290px; }
.caption h3 { font-size: 19px; font-weight: 750; letter-spacing: -.015em; }
.caption p { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }

/* Features: four stops along a line, like a journey timeline in the app */
.stops { list-style: none; margin: clamp(48px, 7vw, 88px) 0 0; padding: 0; position: relative; }
.stops::before {
  content: ""; position: absolute; left: 8px; top: 10px; bottom: 0; width: 3px;
  border-radius: 3px; background: var(--red);
}
.stop {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(28px, 5vw, 72px); align-items: start;
  padding-left: clamp(44px, 6vw, 80px);
}
.stop + .stop { margin-top: clamp(64px, 8vw, 112px); }
.stop::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 19px; height: 19px;
  border-radius: 50%; background: var(--paper); border: 4px solid var(--red);
}
.stop:last-child::after {
  /* the line ends at the last stop */
  content: ""; position: absolute; left: 6px; top: 24px; bottom: 0; width: 8px; background: var(--paper);
}
.stop-no { font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: .1em; color: var(--red-ink); }
.stop h3 {
  margin-top: 14px;
  font-size: clamp(26px, 3.2vw, 38px); line-height: 1.08; font-weight: 800; letter-spacing: -.03em;
}
.stop p { margin-top: 16px; font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 30em; }
.stop .fine {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 14px; line-height: 1.55; color: var(--muted);
}

/* A cropped detail of a real screenshot */
.shot {
  margin: 0; position: relative; overflow: hidden;
  aspect-ratio: 1 / 1; border-radius: 28px;
  background: #f4f4f4; border: 1px solid var(--line);
  box-shadow: 0 24px 48px -32px rgba(17, 17, 17, .35);
}
.shot img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--y, 50%);
  /* fade the cropped edge into the card so cut-off rows don't look broken */
  -webkit-mask-image: linear-gradient(to bottom, #000 84%, transparent 99%);
  mask-image: linear-gradient(to bottom, #000 84%, transparent 99%);
}
.shot.night { background: var(--night); border-color: var(--night); }
.shot.placeholder img { object-fit: contain; -webkit-mask-image: none; mask-image: none; }

/* Good to know */
.notes { background: var(--card); border-top: 1px solid var(--line); }
.facts {
  margin: clamp(36px, 5vw, 64px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px clamp(20px, 3vw, 40px);
}
.facts div { border-top: 3px solid var(--ink); padding-top: 18px; }
.facts dt { font-family: var(--mono); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.facts dd { margin: 12px 0 0; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.facts dd strong { display: block; margin-bottom: 6px; font-size: 18px; font-weight: 750; letter-spacing: -.01em; color: var(--ink); }
.facts a { color: var(--red-ink); }
.facts a.more { display: flex; align-items: center; min-height: 44px; width: fit-content; }

/* Closing band */
.closing { background: var(--red); color: #fff; }
.closing .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 48px;
  padding-top: clamp(48px, 7vw, 88px); padding-bottom: clamp(48px, 7vw, 88px);
}
.closing h2 { font-size: clamp(30px, 4.4vw, 52px); line-height: 1.04; font-weight: 800; letter-spacing: -.035em; max-width: 14em; }
.closing p { margin-top: 14px; font-size: 18px; line-height: 1.55; max-width: 32em; }
.closing :focus-visible { outline-color: #fff; }
.home + footer { border-top: 0; }

/* Restrained motion.
   The hero entrance is plain CSS. Further down, site.js hides only the blocks that start
   below the fold and reveals them on scroll, so nothing depends on the script to be readable. */
@media (prefers-reduced-motion: no-preference) {
  .hero [data-reveal] { animation: rise .8s var(--ease) both; animation-delay: var(--d, 0s); }
  .hero-visual::before { animation: settle 1s var(--ease) both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes settle { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

.will-reveal { opacity: 0; transform: translateY(20px); }
/* keyboard focus must never land on something invisible */
.will-reveal:focus-within { opacity: 1; transform: none; }
.will-reveal.in { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0s); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Support, privacy and legal pages ---------- */

main.article { max-width: calc(800px + 2 * var(--gutter)); padding-top: 48px; padding-bottom: 72px; }
.article h1 { margin: 18px 0 24px; font-size: clamp(38px, 6vw, 52px); line-height: 1.04; font-weight: 800; letter-spacing: -.04em; }
.article h2 { margin: 40px 0 12px; font-size: 24px; font-weight: 750; letter-spacing: -.02em; }
.article p, .article li { margin: 0 0 16px; font-size: 16px; line-height: 1.65; color: var(--ink-2); }
.article .intro { font-size: 19px; line-height: 1.55; max-width: 36em; }
.article p.eyebrow { font-size: 12px; color: var(--muted); }
.article a { color: var(--red-ink); }
.article ul, .article ol { padding-left: 1.2em; }
details { background: var(--card); border: 1px solid var(--line); border-radius: 16px; margin: 12px 0; }
/* the whole row toggles the answer, not just the text line */
summary { cursor: pointer; font-weight: 650; font-size: 17px; padding: 18px 22px; border-radius: 16px; }
.article details p { margin: 0; padding: 0 22px 20px; }

/* ---------- Small screens ---------- */

@media (max-width: 860px) {
  .stop { grid-template-columns: minmax(0, 1fr); padding-left: 40px; gap: 28px; }
  .shot { max-width: 520px; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  /* the three screens become a swipeable row that never widens the page */
  .screens-scroll {
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    margin: clamp(32px, 6vw, 48px) calc(var(--gutter) * -1) 0;
    padding: 8px var(--gutter) 24px; scroll-padding: 0 var(--gutter);
  }
  .screens { display: flex; gap: 20px; margin: 0; width: max-content; }
  .screens li { flex: none; width: min(72vw, 290px); scroll-snap-align: start; align-items: flex-start; }
  .screens li:nth-child(2) { margin-top: 0; }
  .screens .phone { --pw: min(72vw, 290px); }
  .screens li:hover .phone { transform: none; }
  /* the row is full-bleed here, so draw its focus ring inside the viewport */
  .screens-scroll:focus-visible { outline-offset: -5px; border-radius: 12px; }
}

@media (max-width: 700px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr); }
  .hero-visual { padding: 24px 0; width: 100%; max-width: 440px; }
  .hero-visual::before { inset: 0; border-radius: 32px; }
  .hero-visual .phone { --pw: min(68vw, 300px); }
}

@media (max-width: 560px) {
  header { padding-top: 16px; padding-bottom: 16px; }
  .logo { font-size: 23px; gap: 10px; }
  .mark { width: 32px; height: 32px; border-radius: 8px; }
  nav { gap: 0 2px; font-size: 14px; }
  nav a { padding: 0 8px; }
  .shot { border-radius: 22px; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  footer { display: block; }
  footer nav { margin: 12px 0 0 -8px; justify-content: flex-start; }
}

@media (max-width: 370px) {
  /* keep the header on one line: the in-page Features link is the one to drop */
  header nav .nav-anchor { display: none; }
}

@media (max-width: 400px) {
  .status { min-height: 0; padding: 8px 14px; border-radius: 18px; line-height: 1.35; }
}

/* ---------- Print ---------- */

@media print {
  .will-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero [data-reveal], .hero-visual::before { animation: none !important; }
  .skip, header nav, .hero-actions .button { display: none; }
  .closing { background: none; color: var(--ink); }
  .closing .button.light { border: 1px solid var(--ink); }
  .section, .hero { padding: 24px 0; }
  .stop, .screens li, .facts div { break-inside: avoid; }
}