/* ==========================================================================
   MeMos — marketing site
   Rebuilt from the "MeMos Site v2" design handoff. Every colour, size and
   radius below is the intended production value from that document.
   ========================================================================== */

:root {
  /* Colour */
  --ground:        #FBF7EC;
  --ink:           #4A3A22;
  --ink-muted:     #6B5524;
  --ink-dark:      #33240C;
  --ink-hover:     #3B2E1B;
  --yellow:        #EFD44F;
  --yellow-pale:   #FFF0BA;
  --yellow-tile:   #F6EBC6;
  --yellow-type:   #EFD450;
  --cream-type:    #F7ECC2;
  --gold:          #B0812C;
  --blue-pale:     #CBE2E7;
  --cream:         #FDFAF2;
  --brown:         #5D4D25;
  --coral:         #E8756A;
  --brick:         #B23A2A;
  --pink:          #E8395E;
  --divider:       #E2D9C4;
  --device:        #EAE7E7;
  --device-shadow: 0 24px 60px rgba(51, 36, 12, .35);
  --highlight:     rgba(74, 58, 34, .14);

  /* Spacing */
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  /* Type */
  --font: 'Libre Franklin', system-ui, -apple-system, sans-serif;
  --tracking: -.015em;

  /* Radius */
  --r-panel: 40px;
  --r-device: 58px;
  /* The iPhone's own screen corner, as a share of the screen. Sheets and the
     keyboard in the footage are drawn to it, so a frame rounded less than the
     phone left slivers of what was behind them in the bottom corners. The
     phone's corner is a continuous curve that runs further along each edge
     than a circle; 220px of a 1320 × 2868 capture is the smallest circular
     corner that covers it, checked against every still. Proportional, so it
     holds at any size. */
  --r-phone-screen: 16.7% / 7.67%;
  --r-callout: 24px;
  --r-tile: 18px;
  --r-pill: 999px;
}

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

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

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; }

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--pink); }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--brick);
  outline-offset: 2px;
  border-radius: 4px;
}

h1, h2, h3 { margin: 0; }

/* ---- Shell ------------------------------------------------------------ */

.page {
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.panel {
  border-radius: var(--r-panel);
  padding: clamp(28px, 4vw, 56px);
}

section[id] { scroll-margin-top: var(--space-6); }

/* ---- Header ----------------------------------------------------------- */

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-4) var(--space-2);
}

.logo { display: block; width: 202px; height: 60px; }

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.site-nav a,
.site-footer a,
.site-footer .colophon {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ---- Mobile menu ------------------------------------------------------
   Under 800px the five section links collapse behind a toggle; above it the
   button is display:none and the nav is the same inline row as before. */

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.nav-toggle__bars { display: block; position: relative; width: 22px; height: 14px; }

.nav-toggle__bars i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .18s ease, opacity .18s ease;
}

.nav-toggle__bars i:nth-child(1) { top: 0; }
.nav-toggle__bars i:nth-child(2) { top: 6px; }
.nav-toggle__bars i:nth-child(3) { top: 12px; }

.site-header.is-open .nav-toggle__bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-header.is-open .nav-toggle__bars i:nth-child(2) { opacity: 0; }
.site-header.is-open .nav-toggle__bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 800px) {
  .site-header { gap: var(--space-4); }

  .nav-toggle { display: inline-flex; }

  .site-nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    gap: 0;
    padding: var(--space-2);
    background: var(--cream);
    border-radius: var(--r-callout);
  }

  .site-header.is-open .site-nav { display: flex; }

  .site-nav a {
    padding: 14px var(--space-4);
    border-radius: 16px;
  }
}

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

.kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.display {
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--tracking);
  text-wrap: balance;
}

.panel-title {
  font-weight: 500;
  font-size: clamp(30px, 3.8vw, 50px);
  line-height: 1.02;
  letter-spacing: -.02em;
}

.section-title {
  font-weight: 500;
  font-size: clamp(26px, 3.2vw, 40px);
  letter-spacing: var(--tracking);
}

.body-copy {
  font-size: 17px;
  line-height: 1.55;
  margin: 0;
  max-width: 46ch;
}

/* ---- Button ----------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--ink);
  color: var(--yellow);
  padding: 16px 26px;
  border-radius: var(--r-pill);
  font-weight: 800;
  font-size: 17px;
  transition: background .15s ease;
}

.btn:hover { background: var(--ink-hover); color: var(--yellow); }
.btn--light { font-weight: 600; }

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

.hero {
  background: var(--yellow);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  text-align: center;
}

.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}

.hero h1 {
  font-size: clamp(38px, 5.6vw, 68px);
  color: var(--ink);
}

.hero__sub {
  font-size: clamp(17px, 1.8vw, 21px);
  line-height: 1.45;
  margin: 0;
  max-width: 34ch;
  color: var(--ink-muted);
  text-wrap: balance;
}

/* ---- Feature panels --------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  align-items: center;
}

.split__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.panel--record   { background: var(--gold); color: var(--ink-dark); }
.panel--revisit  { background: var(--yellow-pale); }
.panel--import   { background: var(--blue-pale); }
.panel--cream    { background: var(--cream); }
.panel--customize{ background: var(--brown); }
.panel--get      { background: var(--yellow); padding: clamp(32px, 5vw, 72px); }

.panel--record .kicker,
.panel--record .panel-title,
.panel--record .body-copy,
.panel--record a { color: var(--ink-dark); }
.panel--record a:hover { color: var(--pink); }

.panel--revisit .kicker,
.panel--import .kicker { color: var(--ink-muted); }
.panel--revisit .panel-title,
.panel--import .panel-title,
.panel--revisit .body-copy,
.panel--import .body-copy { color: var(--ink); }

.mark {
  padding: 0 .08em;
  border-radius: 4px;
}

/* ---- Device frame -----------------------------------------------------
   The three recordings each include their own status bar and Dynamic
   Island, so the frame does not draw one. If you swap in a capture taken
   without a status bar, add a .device__island div inside .device__screen. */

.device {
  width: 100%;
  max-width: 340px;
  display: flex;
  justify-content: center;
}

.device--end { justify-self: end; }

.device__body {
  position: relative;
  width: 100%;
  border-radius: var(--r-device);
  padding: 11px;
  background: var(--device);
  box-shadow: var(--device-shadow);
}

.device__screen {
  position: relative;
  overflow: hidden;
  /* The phone's own corner rather than a fixed radius: the recordings show sheets
     drawn to it, and 48px left a sliver beside them. See --r-phone-screen. */
  border-radius: var(--r-phone-screen);
  background: var(--ground);
  aspect-ratio: 1290 / 2796;
}

.device__screen video,
.device__screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.device__island {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translate(-52%, -4px);
  width: 41%;
  height: 30px;
  background: #000;
  border-radius: var(--r-pill);
}

/* Side buttons — percentages of frame height so they track a scaled frame. */
.device__body::before,
.device__body::after { content: ""; }

.device__body::before,
.device__body::after,
.device__key {
  position: absolute;
  width: 3px;
  border-radius: 2px;
  background: var(--device);
}

.device__body::before { left: -2px; top: 14.9%; height: 4.8%; }   /* silence */
.device__body::after  { left: -2px; top: 23.6%; height: 12.9%; }  /* volume  */
.device__key          { right: -2px; top: 26.7%; height: 16.9%; } /* power   */

/* ---- 3D viewer -------------------------------------------------------- */

.viewer {
  width: 100%;
  max-width: 560px;
  height: 380px;
}

.viewer--wide { max-width: none; }

model-viewer {
  width: 100%;
  height: 100%;
  display: block;
  background: transparent;
  --poster-color: transparent;
}

/* ---- How it works ----------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-8);
}

.step__num {
  font-weight: 500;
  font-size: 68px;
  line-height: 1;
  color: var(--coral);
}

.step__title {
  font-weight: 600;
  font-size: 20px;
  margin: var(--space-4) 0 var(--space-2);
  color: var(--ink);
}

.step p {
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
  color: var(--ink-muted);
}

.divider {
  height: 2px;
  background: var(--divider);
  margin: var(--space-8) 0 var(--space-6);
  border: 0;
}

.label {
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
  margin-bottom: var(--space-4);
}

.tiles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.tile {
  flex: 1 1 220px;
  background: var(--yellow-tile);
  border-radius: var(--r-tile);
  padding: var(--space-6) var(--space-4);
}

.tile svg { display: block; margin-bottom: var(--space-4); }

.tile__title {
  font-weight: 600;
  font-size: 24px;
  color: var(--ink);
}

.tile__caption {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-muted);
  margin-top: 4px;
}

/* ---- Customize -------------------------------------------------------- */

.panel--customize .section-title { color: var(--yellow-type); }

.customize-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: 17px;
  line-height: 1.5;
  color: var(--cream-type);
  margin: 0;
  padding-left: 1.1em;
  max-width: 40ch;
}

/* ---- Download --------------------------------------------------------- */

.get__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-8);
}

.get__inner h2 {
  font-size: clamp(34px, 5.4vw, 68px);
  color: var(--ink);
  max-width: 20ch;
}

/* ---- Privacy ---------------------------------------------------------- */

.policy-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}

.policy-meta .kicker { color: var(--brick); }

.policy-meta__date {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.policy h2 {
  font-size: clamp(30px, 4.4vw, 56px);
  color: var(--ink);
  max-width: 24ch;
  margin: var(--space-4) 0 var(--space-6);
}

.policy p.policy__lede {
  font-size: 17px;
  line-height: 1.55;
  margin: 0 0 var(--space-8);
  max-width: 60ch;
  color: var(--ink);
}

.policy__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
}

.policy__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.policy h3 {
  font-weight: 600;
  font-size: 19px;
  margin: 0 0 var(--space-2);
  color: var(--ink);
}

.policy p,
.policy ul {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-muted);
}

.policy p { margin: 0; }
.policy p + p { margin-top: var(--space-4); }

.policy ul {
  margin: var(--space-4) 0 0;
  padding-left: 1.1em;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.policy ul + p { margin-top: var(--space-4); }

.policy strong { color: var(--ink); }

.policy a {
  color: var(--brick);
  text-decoration: underline;
}

.callout {
  background: var(--yellow);
  border-radius: var(--r-callout);
  padding: var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.callout img {
  display: block;
  width: 64px;
  height: 64px;
  flex: none;
  border-radius: 14px;
}

.callout p {
  font-size: 16px;
  line-height: 1.55;
  margin: 0;
  color: var(--ink);
}

/* ---- Footer ----------------------------------------------------------- */

.site-footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  justify-content: space-between;
  padding: var(--space-4) var(--space-2) var(--space-8);
  color: var(--ink-muted);
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6) var(--space-8);
}

.site-footer a { color: var(--ink-muted); }
.site-footer a:hover { color: var(--pink); }

/* ---- Press kit (press.html) --------------------------------------------
   The clips, stills and version line inside .kit-generated are written by
   tools/site-capture/capture.py in the app repo on every release. */

.press-hero { background: var(--yellow); color: var(--ink-dark); }
.press-split { align-items: start; }

.facts {
  margin: 0;
  background: var(--cream);
  border-radius: var(--r-callout);
  padding: var(--space-6);
  display: grid;
  gap: var(--space-4);
}
.facts div { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: var(--space-3); }
.facts dt { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); padding-top: 3px; }
.facts dd { margin: 0; font-size: 16px; line-height: 1.45; overflow-wrap: break-word; }
.facts a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 480px) { .facts div { grid-template-columns: 1fr; gap: 2px; } }

/* Side by side the facts card is too narrow for its longer values, which
   pushed the page into sideways scroll between about 480 and 800px. Below
   the nav's breakpoint the intro sits above the card and the card runs the
   full width instead. */
@media (max-width: 800px) {
  .press-split { grid-template-columns: 1fr; }
}

.kit-lede { max-width: 60ch; margin: var(--space-4) 0 var(--space-8); }
.kit h3 { font-size: 20px; letter-spacing: var(--tracking); margin: var(--space-8) 0 var(--space-4); }
.kit h3 small { font-size: 13px; font-weight: 500; color: var(--ink-muted); margin-left: var(--space-2); }
.kit-version { font-size: 14px; color: var(--ink-muted); margin: 0; }
.kit-download { margin: var(--space-4) 0 0; }

.kit-clips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-8) var(--space-6);
}
.kit-clip { margin: 0; }
.kit-clip video {
  display: block;
  width: 100%;
  aspect-ratio: 1320 / 2868;
  object-fit: cover;
  border-radius: var(--r-phone-screen);
  background: var(--device);
  box-shadow: 0 12px 32px rgba(51, 36, 12, .18);
}
/* iPhone Duo opening: wide, and its empty half is the page itself. */
.kit-clips--duo { grid-template-columns: min(100%, 720px); }
.kit-clip--duo video {
  aspect-ratio: 1320 / 928;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.kit-clip figcaption { font-size: 14px; line-height: 1.5; margin-top: var(--space-3); }
.kit-clip figcaption b { display: block; font-size: 16px; }
.kit-clip figcaption a,
.brand__item small { font-weight: 700; }
.kit-clip figcaption a { display: inline-block; margin-top: var(--space-2); text-decoration: underline; text-underline-offset: 3px; }

.kit-stills {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-4);
}
.kit-still img {
  display: block;
  width: 100%;
  aspect-ratio: 1320 / 2868;
  object-fit: cover;
  border-radius: var(--r-phone-screen);
  background: var(--device);
  transition: transform .15s ease;
}
.kit-still:hover img { transform: translateY(-3px); }
/* The watch and the iPad, each drawn to its own screen: the watch's corners
   are rounder against a nearly square screen, the iPad's barely rounded. */
.kit-stills--watch { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.kit-stills--watch img { aspect-ratio: 416 / 496; border-radius: 16% / 13.4%; }
.kit-stills--ipad { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.kit-stills--ipad img { aspect-ratio: 2064 / 2752; border-radius: 2.6% / 1.95%; }
/* iPhone Duo folded shut is a tall cover screen; opened out, a wide one. */
.kit-stills--duo-closed { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.kit-stills--duo-closed img { aspect-ratio: 1398 / 2034; border-radius: 10% / 7%; }
.kit-stills--duo-open { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.kit-stills--duo-open img { aspect-ratio: 2853 / 2007; border-radius: 4.5% / 6.4%; }

.viewer--tall { height: 460px; }

.embed { background: var(--cream); border-radius: var(--r-tile); padding: var(--space-4); min-width: 0; }
.embed__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-2); }
.embed__head .label { margin: 0; }
.embed pre { margin: 0; font-size: 12px; line-height: 1.5; overflow-x: auto; white-space: pre; }
.embed__copy {
  font: 700 12px var(--font);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--yellow-tile);
  border: 0;
  border-radius: var(--r-pill);
  padding: 6px 14px;
  cursor: pointer;
}
.embed__copy:hover { background: var(--yellow); }

.brand { display: flex; flex-wrap: wrap; gap: var(--space-6); margin: var(--space-6) 0; }
.brand__item { display: flex; flex-direction: column; gap: var(--space-3); }
.brand__art {
  display: grid;
  place-items: center;
  width: 260px;
  max-width: 100%;
  height: 160px;
  background: var(--cream);
  border: 1px solid var(--divider);
  border-radius: var(--r-tile);
}
.brand__art img { max-width: 70%; height: auto; }
.brand__name { font-size: 15px; font-weight: 600; }
.brand__name small { color: var(--ink-muted); margin-left: var(--space-2); }
.brand__note { max-width: 60ch; }

/* The model sits on the same brown panel as Customize, so its copy and
   button take that panel's light type. */
.press-model .body-copy { color: var(--cream-type); }
.press-model code { color: var(--yellow-type); }
.press-model .btn { background: var(--yellow); color: var(--ink-dark); }
.press-model .btn:hover { background: var(--yellow-pale); color: var(--ink-dark); }