/*
 * Phone-only desktop composition.
 * The early head policy adds data-phone-layout="desktop" only on touch phones
 * whose shortest screen side is at most 767 CSS pixels. Laptop and tablet
 * layouts therefore keep their existing CSS and JavaScript paths unchanged.
 */

:root[data-phone-layout="desktop"] {
  --notebook-layout-x: 12vw;
  --notebook-scale: 0.86;
  --notebook-phone-scale: 1;
}

:root[data-phone-layout="desktop"] .brand-mark {
  top: 3.5vw;
  right: 3.6vw;
  left: auto;
  width: 12vw;
}

:root[data-phone-layout="desktop"] .header-download {
  top: 3.5vw;
  left: 3.6vw;
  right: auto;
}

:root[data-phone-layout="desktop"] .notebook-sequence {
  width: auto;
  height: max(82vh, 62.5vw);
  height: max(82svh, 62.5vw);
  margin-top: -8svh;
  transform:
    translate3d(-50%, -50%, 0)
    translate3d(calc(var(--notebook-layout-x) + var(--notebook-motion-x)), var(--notebook-y), 0)
    rotate(var(--notebook-rotate))
    scale(calc(var(--notebook-scale) * var(--notebook-phone-scale)))
    scaleX(var(--notebook-direction));
}

:root[data-phone-layout="desktop"] .copy-panel {
  right: 3vw;
  width: 70vw;
  transform-origin: center;
}

:root[data-phone-layout="desktop"] .hero-scroll {
  background: var(--paper);
}

:root[data-phone-layout="desktop"] .hero-sticky {
  height: 100vh;
  height: 100dvh;
}

:root[data-phone-layout="desktop"] .intro-copy {
  min-height: 100%;
  padding-top: 14svh;
  transform: translate3d(0, var(--intro-y), 0);
}

:root[data-phone-layout="desktop"] .intro-note {
  margin-bottom: 1svh;
  font-size: clamp(0.92rem, 3.6vw, 1.2rem);
}

:root[data-phone-layout="desktop"] h1 {
  margin-bottom: 3svh;
  font-size: clamp(1.45rem, 6.5vw, 2rem);
  line-height: 1.22;
}

:root[data-phone-layout="desktop"] .hero-summary {
  font-size: clamp(0.8rem, 3.2vw, 1rem);
  line-height: 1.58;
}

:root[data-phone-layout="desktop"] .hero-summary-line {
  white-space: normal;
}

:root[data-phone-layout="desktop"] .intro-copy .hero-actions {
  right: 0;
  bottom: 8%;
}

:root[data-phone-layout="desktop"] .download-button {
  font-size: 3vw;
}

:root[data-phone-layout="desktop"] .download-button-frame {
  min-height: 44px;
  gap: 2vw;
  padding: 1.5vw 2.7vw 1.7vw 3vw;
  border-width: 1.5px;
  border-radius: 3vw;
}

:root[data-phone-layout="desktop"] .download-button svg {
  width: 4.2vw;
}

:root[data-phone-layout="desktop"] .download-note {
  font-size: 2.05vw;
  white-space: nowrap;
}

:root[data-phone-layout="desktop"] .story-copy {
  min-height: 100%;
  justify-content: center;
  padding: 6svh 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: translate3d(var(--story-x), var(--story-y), 0);
}

:root[data-phone-layout="desktop"] .story-preview {
  width: 16vw;
  margin-bottom: 4svh;
}

:root[data-phone-layout="desktop"] .story-copy h2 {
  margin-bottom: 3svh;
  font-size: 4vw;
  line-height: 1.32;
}

:root[data-phone-layout="desktop"] .story-pyramid {
  gap: 1svh;
  font-size: 2.05vw;
  line-height: 1.55;
}

:root[data-phone-layout="desktop"] .story-statement {
  white-space: nowrap;
}

:root[data-phone-layout="desktop"] .story-statement:nth-child(1) { width: 100%; }
:root[data-phone-layout="desktop"] .story-statement:nth-child(2) { width: 82%; }
:root[data-phone-layout="desktop"] .story-statement:nth-child(3) { width: 64%; }

:root[data-phone-layout="desktop"] .story-signoff {
  margin-top: 5svh;
  font-size: 3vw;
}

:root[data-phone-layout="desktop"] .reassurance-heading {
  font-size: 5vw;
}

:root[data-phone-layout="desktop"] .reassurance-papers {
  display: flex;
  flex-direction: row;
  grid-template-columns: none;
  gap: 0;
}

:root[data-phone-layout="desktop"] .reassurance-paper {
  width: 24vw;
  height: 24vw;
  transform: translateY(3vw);
}

:root[data-phone-layout="desktop"] .reassurance-paper + .reassurance-paper {
  margin-left: -0.6vw;
}

:root[data-phone-layout="desktop"] .reassurance-paper:nth-child(2) { transform: translateY(-1.2vw); }
:root[data-phone-layout="desktop"] .reassurance-paper:nth-child(3) { transform: translateY(2.4vw); }
:root[data-phone-layout="desktop"] .reassurance-paper:nth-child(4) { transform: translateY(-0.8vw); }

:root[data-phone-layout="desktop"] .blue-book-scene {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 43vw;
  align-content: center;
  min-height: 100svh;
  padding: 0 3vw;
}

:root[data-phone-layout="desktop"] .blue-book-visual {
  position: absolute;
  top: 50%;
  right: 0;
  bottom: auto;
  left: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  transform: translateY(-50%);
}

:root[data-phone-layout="desktop"] .blue-book-card {
  grid-column: 2;
  flex: none;
  gap: 2.4vw;
  width: 43vw;
  padding: 2.5vw 0 2vw;
  border: 1px solid #2b1a07;
  border-radius: 2vw;
  background: #fffcf9;
  box-shadow: 0 1px 5px rgb(0 0 0 / 0.06);
  transform: none;
}

:root[data-phone-layout="desktop"] .blue-book-title {
  padding-inline: 3vw;
  font-size: 3.7vw;
  line-height: 1.25;
}

:root[data-phone-layout="desktop"] .blue-book-options {
  gap: 1vw;
}

:root[data-phone-layout="desktop"] .blue-book-options > li::before {
  margin-bottom: 1vw;
}

:root[data-phone-layout="desktop"] .blue-book-option {
  min-height: 24px;
  padding: 0 2.7vw;
  font-size: 2vw;
  line-height: 1.35;
}

:root[data-phone-layout="desktop"] .blue-book-option-number {
  flex-basis: 5vw;
  margin-left: 2vw;
}

:root[data-phone-layout="desktop"] .extras-scene {
  padding-block: 8svh 6svh;
}

:root[data-phone-layout="desktop"] .extras-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, 1fr);
  justify-content: initial;
  gap: 3vw 4vw;
  min-height: 70svh;
  padding: 0 4vw;
}

:root[data-phone-layout="desktop"] .extras-heading {
  grid-area: 2 / 2;
  min-height: 0;
  padding: 0;
  transform: translateY(-2vw);
}

:root[data-phone-layout="desktop"] .extras-heading h2 {
  font-size: 5vw;
}

:root[data-phone-layout="desktop"] .extras-flourish {
  width: 18vw;
  margin-bottom: 1vw;
  transform: translateX(8vw);
}

:root[data-phone-layout="desktop"] .extras-doodle {
  --caption-size: 3vw;
  width: 28vw;
  aspect-ratio: 6 / 5;
}

:root[data-phone-layout="desktop"] .extras-doodle figcaption {
  font-size: 3vw;
}

:root[data-phone-layout="desktop"] .extras-doodle--bag {
  --row: 1; --column: 1; --align-x: start; --align-y: start;
  --tilt: -2deg; --shift-x: 1vw; --shift-y: 1.7vw; --caption-y: 52%;
}

:root[data-phone-layout="desktop"] .extras-doodle--tools {
  --row: 2; --column: 1; --align-x: start; --align-y: center;
  --tilt: -1deg; --shift-x: 12vw; --shift-y: -1vw;
  --ink-clip: inset(44% 0 0 0); --caption-x: 20%; --caption-y: 8%; --caption-width: 70%;
}

:root[data-phone-layout="desktop"] .extras-doodle--paper {
  --row: 1; --column: 2; --align-x: center; --align-y: start;
  --tilt: 1deg; --shift-x: -2.8vw; --shift-y: -1vw;
  --ink-clip: inset(0 0 44% 0); --caption-x: 20%; --caption-y: 58%; --caption-width: 60%;
}

:root[data-phone-layout="desktop"] .extras-doodle--review {
  --row: 1; --column: 3; --align-x: end; --align-y: start;
  --tilt: 3deg; --shift-x: -11.4vw; --shift-y: 0.6vw;
  --ink-clip: inset(0 49% 0 0); --caption-x: 51%; --caption-y: 36.6%;
  --caption-width: 28%; --caption-align: left; --caption-size: 2.7vw; --caption-leading: 1.15;
}

:root[data-phone-layout="desktop"] .extras-doodle__heart { clip-path: inset(64.5% 12% 26% 79%); }

:root[data-phone-layout="desktop"] .extras-doodle--records {
  --row: 3; --column: 1; --align-x: start; --align-y: end;
  --tilt: -1deg; --shift-x: 4.4vw; --shift-y: -1.7vw;
  --caption-x: 5%; --caption-y: 52%; --caption-width: 90%;
}

:root[data-phone-layout="desktop"] .extras-doodle--payments {
  --row: 2; --column: 3; --align-x: end; --align-y: center;
  --tilt: -1deg; --shift-x: -5.6vw; --shift-y: -2.5vw;
  --ink-clip: inset(0 0 48% 0); --caption-x: 20%; --caption-y: 55%; --caption-width: 65%;
}

:root[data-phone-layout="desktop"] .extras-doodle--organised {
  --row: 3; --column: 2; --align-x: center; --align-y: end;
  --tilt: 0deg; --shift-x: -1.7vw; --shift-y: -3.1vw;
  --ink-clip: inset(0 0 0 64.58%); --caption-x: 3%; --caption-y: 41%; --caption-width: 57%;
}

:root[data-phone-layout="desktop"] .extras-doodle--customers {
  --row: 3; --column: 3; --align-x: end; --align-y: end;
  --tilt: -4deg; --shift-x: -13.9vw; --shift-y: -4.4vw;
  --caption-x: 15%; --caption-y: 52.5%; --caption-width: 70%; --caption-leading: 1.14;
}

:root[data-phone-layout="desktop"] .safety-scene {
  min-height: 90svh;
  padding: 8svh 4vw;
}

:root[data-phone-layout="desktop"] .safety-title { font-size: 5vw; }

:root[data-phone-layout="desktop"] .safety-subtitle {
  margin-top: 1.5svh;
  font-size: 3vw;
}

:root[data-phone-layout="desktop"] .safety-mobile-break { display: none; }

:root[data-phone-layout="desktop"] .safety-stage {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1200 / 720;
  margin-top: 0;
}

:root[data-phone-layout="desktop"] .safety-note {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32vw;
  transform: translate(-50%, -50%);
}

:root[data-phone-layout="desktop"] .safety-sticker {
  display: block;
  width: 10vw;
}

:root[data-phone-layout="desktop"] .book-gallery [data-gallery-desktop] { display: block; }
:root[data-phone-layout="desktop"] .book-gallery [data-gallery-mobile] { display: none; }
:root[data-phone-layout="desktop"] .book-gallery [data-gallery-sticker] { pointer-events: none; }

:root[data-phone-layout="desktop"] .good-hands__desktop-lines { display: block; }
:root[data-phone-layout="desktop"] .good-hands__mobile-lines { display: none; }

:root[data-phone-layout="desktop"] .good-hands__title {
  top: 28%;
  right: 18%;
  left: auto;
  width: 5.5241em;
  font-size: 5vw;
  text-align: right;
  transform: none;
}

:root[data-phone-layout="desktop"] .good-hands__scribble {
  bottom: 30%;
  left: 20%;
  width: 8.89vw;
}

:root[data-phone-layout="desktop"] .faq {
  padding: 12svh 6vw 18svh;
}

:root[data-phone-layout="desktop"] .faq__title {
  margin-bottom: 8svh;
  font-size: 6vw;
}

:root[data-phone-layout="desktop"] .faq__question,
:root[data-phone-layout="desktop"] .faq__answer p {
  font-size: 4vw;
}

:root[data-phone-layout="desktop"] .page-footer {
  min-height: 78svh;
  border-radius: 8vw 8vw 0 0;
}

:root[data-phone-layout="desktop"] .page-footer__inner { padding-inline: 5vw; }

:root[data-phone-layout="desktop"] .page-footer__top {
  flex-direction: row;
  justify-content: space-between;
  gap: 6vw;
  padding-top: 8svh;
}

:root[data-phone-layout="desktop"] .page-footer__title {
  flex-shrink: 0;
  max-width: 52vw;
  font-size: 5vw;
}

:root[data-phone-layout="desktop"] .page-footer__nav {
  width: auto;
  max-width: none;
  font-size: 3.5vw;
  white-space: nowrap;
}

:root[data-phone-layout="desktop"] .page-footer__underline { display: block; }

:root[data-phone-layout="desktop"] .page-footer__bottom {
  margin-top: auto;
}

:root[data-phone-layout="desktop"] .page-footer__copyright {
  padding-bottom: max(4vw, env(safe-area-inset-bottom));
  font-size: 3.5vw;
}

@media (orientation: landscape) {
  :root[data-phone-layout="desktop"] .intro-copy { padding-top: 9svh; }
  :root[data-phone-layout="desktop"] .extras-grid { min-height: 100svh; }
  :root[data-phone-layout="desktop"] .safety-scene { min-height: 110svh; }
}