/* ReadToCam — paper clar, tinta fosca, un sol accent lima.
   La franja fosca queda només a la pantalla del telèfon i al bloc de
   privadesa: el que ha de brillar és l'app, no la pàgina. */

:root {
  --paper: #f3f2ed;
  --paper-2: #eceae3;
  --ink: #15191e;
  --ink-soft: #5b6067;
  --ink-faint: #8d9298;
  --lime: #c6f24a;
  --lime-deep: #8fae2a;
  --rule: #dedbd2;
  --dark: #15191e;

  /* Colors de la marca. El "Cam" agafa el lima de la pàgina en la versió
     fosca, no el clar: sobre el paper el lima clar es queda en 1,16:1 i la
     paraula desapareix. Aquest es llegeix com el taronja que hi havia abans. */
  --logo-ink: #1c2b5e;
  --logo-accent: var(--lime-deep);

  --display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --measure: 62ch;
  --pad: clamp(1.15rem, 5vw, 2.5rem);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1120px; margin: 0 auto; padding-inline: var(--pad); }

/* ---------- capçalera ---------- */

.nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 1rem;
  padding: .65rem var(--pad);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.brand {
  text-decoration: none; margin-right: auto;
  display: grid; gap: .1rem; line-height: 1;
}
.logo {
  font-family: "Montserrat", var(--display);
  font-size: clamp(1.35rem, 3.4vw, 1.7rem);
  letter-spacing: -.02em; line-height: 1;
  color: var(--logo-ink);
}
.logo b  { font-weight: 800; font-style: normal; }
.logo i  { font-weight: 500; font-style: normal; }
.logo em { font-weight: 800; font-style: normal; color: var(--logo-accent); }
.logo-tag {
  font-family: "Montserrat", var(--display);
  font-weight: 500; font-size: .52em;
  letter-spacing: .19em; text-transform: uppercase;
  color: var(--logo-ink);
  /* A la barra no hi cap sense inflar-la; a peu de pàgina sí. */
  display: none;
}
.foot .logo { font-size: 1.15rem; }
.foot .logo-tag { display: block; font-size: .55rem; }
.foot .brand { margin-right: 1rem; }
.langs { display: flex; align-items: center; gap: .1rem; }
.lang {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .06em;
  text-transform: uppercase; background: none; border: 0; cursor: pointer;
  color: var(--ink-faint); padding: .3rem .42rem; border-radius: 4px;
}
.lang[aria-pressed="true"] { color: var(--ink); background: var(--paper-2); }

/* ---------- botons ---------- */

.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--display); font-weight: 700; font-size: .95rem;
  letter-spacing: -.01em; text-decoration: none;
  padding: .72rem 1.25rem; border-radius: 999px;
  background: var(--lime); color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--lime) 70%, var(--ink));
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(21,25,30,.14); }
.btn--sm { font-size: .8rem; padding: .48rem .95rem; }
.btn--ghost { background: transparent; border-color: var(--rule); }

a { color: var(--ink); }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--lime-deep); outline-offset: 3px; border-radius: 4px;
}

/* ---------- tipografia ---------- */

h1, h2, h3 { font-family: var(--display); letter-spacing: -.035em; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2.5rem, 7.5vw, 4.4rem); line-height: .98; font-weight: 800; }
h2 { font-size: clamp(1.75rem, 4.4vw, 2.9rem); line-height: 1.06; font-weight: 800; }
h3 { font-size: 1.06rem; line-height: 1.3; font-weight: 700; letter-spacing: -.015em; }

.eyebrow {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-faint);
  display: block; margin-bottom: .65rem;
}
.lede { font-size: 1.1rem; color: var(--ink-soft); max-width: 46ch; }
p { max-width: var(--measure); }

section { padding-block: clamp(2.4rem, 5.5vw, 4.2rem); }
.section-alt { background: var(--paper-2); }
.hr { height: 1px; background: var(--rule); border: 0; margin: 0; }

/* ---------- portada ---------- */

.hero { padding-top: clamp(2rem, 4vw, 3rem); }
.hero-grid { display: grid; gap: clamp(1.6rem, 3.5vw, 2.6rem); align-items: center; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1fr .82fr; } }

/* Tres afirmacions paral·leles, una per línia. La mida la marca la més
   llarga en els tres idiomes ("Just read and record.") dins la columna, que
   al voltant dels 900 px és quan es queda més estreta. */
.claim span { display: block; }
.hero .claim { font-size: clamp(2.1rem, 5vw, 3.6rem); }
.hero .claim + .hero-cta { margin-top: 1.6rem; }
.hero p.lede { margin: .9rem 0 1.4rem; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; }

/* El distintiu oficial d'Apple, tal com el donen ells: no es pot redibuixar
   ni recolorir. Va a 50 px d'alt, per sobre del mínim de 40 que demanen, i
   l'aire que té a sobre i a sota (26 i 17 px) passa de llarg el 10% de
   l'alçada que exigeixen de marge.

   L'amplada varia amb l'idioma —el català és el més ample— així que mana
   l'alçada i l'amplada s'ajusta sola. El farciment amb marge negatiu només
   eixampla la zona clicable sense moure res de lloc. */
.badge { display: inline-block; line-height: 0; padding: 5px; margin: -5px; }
.badge img { height: 50px; width: auto; display: block; }
.badge:hover img { opacity: .88; }

/* Les condicions econòmiques van just sota del botó i a mida de lectura:
   abans eren una nota en versaletes al peu del bloc i ningú no les veia. */
.price {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .55rem;
  margin: 1.05rem 0 0; font-size: 1.05rem;
}
/* Destaca per mida i pes, no per decoració: el botó ja és lima ple i una
   segona taca de color al costat es barallaria amb ell. */
.price b {
  font-family: var(--display); font-weight: 800; letter-spacing: -.025em;
  color: var(--ink); font-size: 1.45rem; line-height: 1.1;
}
.price span { color: var(--ink-soft); }

/* El missatge que abans obria la pàgina. Ara va després de la portada, sol,
   amb prou aire perquè es llegeixi com una afirmació i no com un titolet. */
.hero-2 { padding-block: clamp(2.6rem, 6vw, 4.6rem); }
.hero-2 h2 { max-width: 18ch; }
.hero-2 .lede { margin-top: 1rem; }
/* Una banda ampla, no una segona columna: el hero de dalt ja és text a
   l'esquerra i telèfon a la dreta, i repetir-ho aquí quedava monòton. */
.in-use {
  position: relative; margin: clamp(1.6rem, 3.5vw, 2.4rem) 0 0;
  border-radius: 20px; overflow: hidden; line-height: 0;
}
.in-use video { display: block; width: 100%; height: auto; }

/* Arrenca sense so perquè ningú no vol que una pàgina li parli sense
   demanar-ho, però la model llegeix el guió en veu alta i qui vulgui
   sentir-ho ha de poder. */
.sound {
  position: absolute; right: 14px; bottom: 14px;
  width: 40px; height: 40px; padding: 0; border: 0; cursor: pointer;
  border-radius: 999px; background: rgba(21,25,30,.55); color: #fff;
  display: grid; place-items: center; backdrop-filter: blur(6px);
  transition: background .15s ease;
}
.sound:hover { background: rgba(21,25,30,.75); }
.sound svg { width: 20px; height: 20px; fill: currentColor; }
.sound .on { display: none; }
.sound[aria-pressed="true"] .on  { display: block; }
.sound[aria-pressed="true"] .off { display: none; }

.terms {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-faint); margin-top: .8rem;
}
.terms span + span::before { content: " / "; opacity: .5; }

/* ---------- el telèfon: la mateixa interfície que l'app ----------
   Mides preses de l'app i escalades: la pantalla real fa 402 pt d'ample i
   aquí en fa 270, així que tot va a ~0,67. La lletra de 34 pt de l'app queda
   en 15 px, que dona les mateixes paraules per línia. */

.stage {
  background: var(--lime);
  border-radius: 26px;
  padding: clamp(1.5rem, 4vw, 2.6rem);
  display: grid; place-items: center;
}
.phone {
  --app-accent: #ffc74c;          /* el groc de l'app, no el lima de la pàgina */
  --app-font: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, sans-serif;
  width: min(270px, 74vw); aspect-ratio: 9 / 19.5;
  background: var(--dark) url("../assets/phone-bg.jpg") center top / cover no-repeat;
  border-radius: 34px;
  border: 5px solid #0b0e11;
  position: relative; overflow: hidden;
  box-shadow: 0 22px 50px rgba(21,25,30,.28);
}
.notch {
  position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  width: 30%; height: 20px; background: #0b0e11; border-radius: 999px; z-index: 3;
}

/* Panell: negre al 55% i cantons de 18 pt, com a l'app. */
.prompter {
  /* 36% i no el 45% de l'app: amb la cara de la model els ulls cauen al 48%
     de l'alçada i el panell més alt n'hi tapava un. */
  position: absolute; inset: 34px 6px auto 6px; height: 36%;
  background: rgba(0,0,0,.55); border-radius: 12px; overflow: hidden;
}
.prompter-track { position: absolute; inset-inline: 13px; top: 0; will-change: transform; }
.prompter-track p {
  margin: 0 0 .5em; max-width: none;
  font-family: var(--app-font); font-weight: 600;
  font-size: 15px; line-height: 1.3; text-align: center; color: #fff;
}
/* Esvaïts a les vores, proporcionals a la lletra com a l'app. */
.prompter::before, .prompter::after {
  content: ""; position: absolute; left: 0; right: 0; height: 27px;
  pointer-events: none; z-index: 2;
}
.prompter::before { top: 0; background: linear-gradient(to bottom, rgba(0,0,0,.85), transparent); }
.prompter::after { bottom: 0; background: linear-gradient(to top, rgba(0,0,0,.9), transparent); }

.readline {
  position: absolute; left: 0; right: 0; top: 38%;
  height: 1px; background: color-mix(in srgb, var(--app-accent) 25%, transparent);
  z-index: 2;
}
.readline::before, .readline::after {
  content: ""; position: absolute; top: -5px;
  border-block: 5px solid transparent;
}
.readline::before { left: 0; border-left: 7px solid var(--app-accent); }
.readline::after { right: 0; border-right: 7px solid var(--app-accent); }

/* Barra inferior: velocitat i els cinc botons, com a l'app. */
.phone-bottom {
  position: absolute; left: 0; right: 0; bottom: 9px;
  display: grid; justify-items: center; gap: 11px; padding-inline: 13px;
}
.speed {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: rgba(0,0,0,.45); border-radius: 999px; padding: 5px 9px;
  color: rgba(255,255,255,.85);
}
.speed svg { width: 12px; height: 12px; flex: none; fill: currentColor; }
/* El control de velocitat és de debò: es pot arrossegar i el text canvia
   de ritme, com a l'app. */
.speed-rail {
  flex: 1; appearance: none; -webkit-appearance: none;
  background: transparent; height: 14px; margin: 0; cursor: grab;
}
.speed-rail:active { cursor: grabbing; }
.speed-rail::-webkit-slider-runnable-track {
  height: 3px; border-radius: 999px;
  background: linear-gradient(to right,
    var(--app-accent) 0 var(--pct, 22%), rgba(255,255,255,.25) var(--pct, 22%) 100%);
}
.speed-rail::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 11px; height: 11px; margin-top: -4px;
  background: #fff; border-radius: 999px; border: 0;
}
.speed-rail::-moz-range-track {
  height: 3px; border-radius: 999px; background: rgba(255,255,255,.25);
}
.speed-rail::-moz-range-progress { height: 3px; border-radius: 999px; background: var(--app-accent); }
.speed-rail::-moz-range-thumb {
  width: 11px; height: 11px; background: #fff; border-radius: 999px; border: 0;
}
.speed-rail:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 2px; }

/* Es pot tocar per aturar el text, també com a l'app. */
.prompter { cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.paused-badge {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 3; font-family: var(--app-font); font-weight: 600; font-size: 11px;
  color: #fff; background: rgba(0,0,0,.6); border-radius: 999px;
  padding: 4px 10px; opacity: 0; transition: opacity .18s ease; pointer-events: none;
}
.prompter[data-paused="true"] .paused-badge { opacity: 1; }
.stage-hint {
  margin: 12px 0 0; text-align: center; font-size: .78rem;
  color: var(--muted); max-width: 24ch; margin-inline: auto;
}
@media (hover: none) { .stage-hint { max-width: 26ch; } }

.speed b {
  font-family: var(--mono); font-size: 8px; font-weight: 500;
  min-width: 12px; text-align: right;
}
.pbar { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.pbtn {
  width: 33px; height: 33px; border-radius: 50%;
  background: rgba(0,0,0,.5); display: grid; place-items: center;
}
.pbtn svg { width: 13px; height: 13px; fill: #fff; }
.rec {
  width: 48px; height: 48px; border-radius: 50%;
  border: 3px solid #fff; display: grid; place-items: center;
}
.rec i { width: 37px; height: 37px; border-radius: 50%; background: #ff453a; display: block; }
.phone-time {
  position: absolute; top: 13px; left: 13px; z-index: 4;
  font-family: var(--mono); font-size: 8px; color: rgba(255,255,255,.85);
  background: rgba(0,0,0,.5); border-radius: 999px; padding: 3px 6px;
}

/* ---------- per a qui és ----------
   Reixa amb filets i no targetes: la secció de funcions, just a sobre,
   ja és una graella de quatre en dues columnes, i repetir-la quedava monòton. */

.profiles { display: grid; gap: 0; border-top: 1px solid var(--rule); margin-top: 1.6rem; }
@media (min-width: 760px) { .profiles { grid-template-columns: 1fr 1fr; } }
.profile {
  display: grid; gap: .4rem; align-content: start;
  padding: 1.3rem 1.5rem 1.4rem 0;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 760px) {
  .profile:nth-child(even) { padding-left: 1.8rem; border-left: 1px solid var(--rule); }
}
/* El rol mana: és el que fa que algú s'hi reconegui i segueixi llegint.
   Va en tinta i no en lima perquè el lima a mida gran es queda en 2,11:1
   sobre aquest fons, per sota del mínim. El lima es queda a la marca. */
.profile-role {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.2rem, 2.3vw, 1.45rem);
  letter-spacing: -.005em; text-transform: uppercase;
  color: var(--ink); line-height: 1.15;
  display: flex; align-items: center; gap: .6rem;
}
.profile-role::before {
  content: ""; flex: none;
  width: 18px; height: 4px; border-radius: 2px;
  background: var(--lime-deep);
}
/* Un pas per sota del rol, perquè no se li barallin. */
.profile h3 { font-size: 1rem; }
.profile p { color: var(--ink-soft); margin: 0; font-size: .97rem; }

/* ---------- funcions ---------- */

.features { display: grid; gap: clamp(1.5rem, 3.2vw, 2.4rem); }
@media (min-width: 860px) { .features { grid-template-columns: repeat(2, 1fr); } }

.feature { display: grid; gap: .65rem; align-content: start; }
.feature-num {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .14em;
  color: var(--lime-deep);
}
.feature p { color: var(--ink-soft); margin: 0; }

.shot {
  display: block; width: 100%; height: auto; border-radius: 16px;
  border: 1px solid var(--rule); background: var(--dark);
}

.gallery { display: grid; gap: 1.2rem; margin-top: 1.8rem; }
@media (min-width: 720px) { .gallery { grid-template-columns: repeat(3, 1fr); } }

/* ---------- privadesa, en fosc ---------- */

.dark { background: var(--dark); color: #f3f2ed; }
.dark h2 { color: #fff; }
.dark p { color: #b6bcc3; }
.dark .eyebrow { color: var(--lime); }
.privacy-list { display: grid; gap: .85rem; margin-top: 1.3rem; padding: 0; list-style: none; }
@media (min-width: 720px) { .privacy-list { grid-template-columns: repeat(3, 1fr); } }
.privacy-list li {
  font-family: var(--display); font-weight: 700; font-size: 1rem;
  border-top: 1px solid rgba(255,255,255,.16); padding-top: .85rem;
}
.privacy-list li span { display: block; font-family: var(--body); font-weight: 400; font-size: .88rem; color: #9aa1a9; margin-top: .3rem; }

/* ---------- tancament i peu ---------- */

.close { text-align: center; }
.close h2 { margin-bottom: 1.2rem; }
.close .hero-cta { justify-content: center; }
/* Els paràgrafs porten amplada de lectura, així que centrar-ne el text els
   deixava centrats dins la seva pròpia caixa i no dins la secció. */
.close .terms, .close .price { max-width: none; }
.close .terms { text-align: center; }
.close .price { justify-content: center; }

footer { border-top: 1px solid var(--rule); padding-block: 1.6rem; }
.foot {
  display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; align-items: center;
  font-size: .85rem; color: var(--ink-soft);
}
.foot a { color: var(--ink-soft); }
.foot .sep { margin-left: auto; }

/* ---------- pàgines de text ---------- */

.doc { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.doc h2 { font-size: clamp(1.3rem, 3vw, 1.7rem); margin-top: 1.8rem; margin-bottom: .4rem; }
.doc p { color: var(--ink-soft); }
.faq { border-top: 1px solid var(--rule); margin-top: 2rem; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer; list-style: none; padding: .85rem 0;
  font-family: var(--display); font-weight: 700; font-size: 1rem;
  display: flex; gap: 1rem; align-items: baseline;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; margin-left: auto; color: var(--lime-deep); font-family: var(--mono); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 1.15rem; }