/* Kidoodle Apps — storybook, torn paper (design A5) */

@font-face { font-family: "Minya Nouvelle"; src: url(../fonts/minya-nouvelle-regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Minya Nouvelle"; src: url(../fonts/minya-nouvelle-bold.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --ink: #3A2A1E;
  --ink-soft: #7A5A3A;
  --ink-muted: #6A4E33;
  --red: #8E2A1F;
  --red-dark: #5E1A12;
  --orange: #B5451B;
  --cream: #FFF1C9;
  --paper: #F3E8D2;
  --card: #FBF6EA;
  --card-line: #D9C9A8;
  --band: #EFE3C8;
  --brown: #3A2A1E;
  --button: #1E1A17;
  --content: 1072px;
  --gutter: 24px;
  /* Layout: each pair of boxes sits side by side until the row is narrower than
     their minimum widths added up (plus gap and page padding), then stacks. */
  --hero-text-min: 369px;
  --hero-art-min: 314px;
  --card-min: 343px;
  --how-text-min: 380px;
  --how-art-min: 440px;
  --note-min: 350px;
  --awards-min: 440px;
  --quotes-min: 380px;
  /* Type: base text size grows from --base-min at a 375px screen to --base-max at
     1280px; every other size is in rem, so it follows. Headings have their own ranges. */
  --base-min: 15px;
  --base-max: 16px;
  --base-slope: 0.0011049724; /* (base-max - base-min) / (1280 - 375) */
  --h1-min: 42px;
  --h1-max: 64px;
  --h2-min: 32px;
  --h2-max: 40px;
}
html { font-size: clamp(var(--base-min), calc(var(--base-min) + (100vw - 375px) * var(--base-slope)), var(--base-max)); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper) url(../img/paper.webp) repeat;
  background-size: 1211px auto;
  font-family: "Minya Nouvelle", "Trebuchet MS", sans-serif;
  color: var(--ink);
  font-size: 1.125rem;
  line-height: 1.5;
}
a { color: var(--red); }
a:hover { color: var(--red-dark); }
img { display: block; max-width: 100%; }
h1, h2, h3 { font-weight: 700; margin: 0; }

.page { min-height: 100vh; display: flex; flex-direction: column; }
.wrap { max-width: calc(var(--content) + 2 * var(--gutter)); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 10; padding: 8px 14px; background: var(--cream); color: var(--ink); border-radius: 8px; }

/* Paper texture on coloured bands */
.tex { background-image: url(../img/paper.webp); background-size: 1211px auto; background-blend-mode: multiply; }

/* Torn edges */
.tear { height: 18px; }
.tear-up { clip-path: polygon(0 100%,0.0% 62.3%,0.62% 64.3%,1.25% 62.3%,1.88% 63.9%,2.5% 67.7%,3.12% 65.2%,3.75% 67.0%,4.38% 62.6%,5.0% 67.6%,5.62% 50.0%,6.25% 44.6%,6.88% 47.8%,7.5% 45.7%,8.12% 44.9%,8.75% 37.8%,9.38% 48.7%,10.0% 45.1%,10.62% 44.5%,11.25% 45.2%,11.88% 40.0%,12.5% 42.7%,13.12% 46.3%,13.75% 51.3%,14.38% 49.8%,15.0% 49.4%,15.62% 48.1%,16.25% 51.3%,16.88% 48.6%,17.5% 43.5%,18.12% 39.8%,18.75% 40.5%,19.38% 37.9%,20.0% 35.6%,20.62% 40.9%,21.25% 42.1%,21.88% 37.4%,22.5% 32.7%,23.12% 32.2%,23.75% 31.1%,24.38% 33.4%,25.0% 39.2%,25.62% 41.8%,26.25% 50.6%,26.88% 56.7%,27.5% 54.9%,28.12% 56.1%,28.75% 60.2%,29.38% 53.5%,30.0% 54.1%,30.62% 58.1%,31.25% 55.8%,31.88% 60.7%,32.5% 66.4%,33.12% 62.5%,33.75% 69.5%,34.38% 59.3%,35.0% 56.4%,35.62% 51.5%,36.25% 53.5%,36.88% 51.3%,37.5% 55.5%,38.12% 51.3%,38.75% 61.2%,39.38% 61.8%,40.0% 66.3%,40.62% 62.8%,41.25% 63.3%,41.88% 67.7%,42.5% 66.7%,43.12% 66.3%,43.75% 70.5%,44.38% 75.0%,45.0% 67.4%,45.62% 67.9%,46.25% 63.8%,46.88% 61.6%,47.5% 55.4%,48.12% 50.6%,48.75% 53.0%,49.38% 53.3%,50.0% 49.2%,50.62% 54.4%,51.25% 51.3%,51.88% 48.2%,52.5% 44.0%,53.12% 34.5%,53.75% 41.0%,54.38% 48.5%,55.0% 51.6%,55.62% 54.9%,56.25% 51.1%,56.88% 50.9%,57.5% 52.3%,58.12% 50.8%,58.75% 46.0%,59.38% 39.2%,60.0% 44.5%,60.62% 43.4%,61.25% 39.5%,61.88% 40.7%,62.5% 44.5%,63.12% 37.7%,63.75% 37.0%,64.38% 29.7%,65.0% 34.4%,65.62% 29.4%,66.25% 38.9%,66.88% 38.4%,67.5% 50.7%,68.12% 49.1%,68.75% 53.5%,69.38% 53.8%,70.0% 48.7%,70.62% 49.5%,71.25% 52.8%,71.88% 53.7%,72.5% 60.5%,73.12% 59.9%,73.75% 64.9%,74.38% 64.8%,75.0% 59.8%,75.62% 52.7%,76.25% 56.7%,76.88% 48.7%,77.5% 52.8%,78.12% 51.5%,78.75% 56.1%,79.38% 55.7%,80.0% 58.9%,80.62% 63.8%,81.25% 62.0%,81.88% 64.2%,82.5% 62.1%,83.12% 62.9%,83.75% 65.3%,84.38% 69.1%,85.0% 74.1%,85.62% 77.8%,86.25% 74.5%,86.88% 74.1%,87.5% 64.6%,88.12% 60.0%,88.75% 56.6%,89.38% 60.1%,90.0% 54.5%,90.62% 58.3%,91.25% 59.7%,91.88% 53.1%,92.5% 51.9%,93.12% 53.0%,93.75% 43.4%,94.38% 44.2%,95.0% 41.7%,95.62% 48.8%,96.25% 45.3%,96.88% 53.2%,97.5% 50.9%,98.12% 56.7%,98.75% 49.9%,99.38% 46.8%,100.0% 45.9%,100% 100%); }
.tear-down { clip-path: polygon(0 0,100% 0,100.0% 33.2%,99.38% 29.4%,98.75% 34.1%,98.12% 39.1%,97.5% 44.0%,96.88% 44.1%,96.25% 52.3%,95.62% 49.0%,95.0% 47.8%,94.38% 55.8%,93.75% 48.7%,93.12% 44.5%,92.5% 51.2%,91.88% 48.7%,91.25% 52.2%,90.62% 56.6%,90.0% 50.3%,89.38% 51.7%,88.75% 49.7%,88.12% 46.9%,87.5% 48.4%,86.88% 49.2%,86.25% 48.6%,85.62% 54.9%,85.0% 55.7%,84.38% 65.4%,83.75% 67.1%,83.12% 63.7%,82.5% 65.2%,81.88% 66.0%,81.25% 63.8%,80.62% 69.3%,80.0% 67.3%,79.38% 70.3%,78.75% 77.0%,78.12% 73.4%,77.5% 68.6%,76.88% 61.2%,76.25% 58.2%,75.62% 63.2%,75.0% 50.6%,74.38% 56.3%,73.75% 53.4%,73.12% 54.4%,72.5% 57.9%,71.88% 59.8%,71.25% 55.3%,70.62% 52.7%,70.0% 50.7%,69.38% 50.5%,68.75% 58.6%,68.12% 60.7%,67.5% 60.5%,66.88% 60.2%,66.25% 59.8%,65.62% 60.9%,65.0% 53.0%,64.38% 50.6%,63.75% 49.0%,63.12% 45.3%,62.5% 40.9%,61.88% 44.7%,61.25% 37.1%,60.62% 42.2%,60.0% 40.1%,59.38% 35.1%,58.75% 28.8%,58.12% 27.8%,57.5% 31.4%,56.88% 36.5%,56.25% 40.5%,55.62% 46.7%,55.0% 42.8%,54.38% 48.1%,53.75% 48.3%,53.12% 49.2%,52.5% 44.9%,51.88% 48.8%,51.25% 45.9%,50.62% 51.5%,50.0% 53.1%,49.38% 54.1%,48.75% 48.4%,48.12% 48.0%,47.5% 46.1%,46.88% 49.7%,46.25% 45.2%,45.62% 30.4%,45.0% 46.8%,44.38% 52.8%,43.75% 51.9%,43.12% 56.6%,42.5% 55.2%,41.88% 57.9%,41.25% 54.8%,40.62% 62.6%,40.0% 62.3%,39.38% 65.1%,38.75% 65.2%,38.12% 69.5%,37.5% 74.6%,36.88% 71.6%,36.25% 69.1%,35.62% 73.5%,35.0% 64.4%,34.38% 64.2%,33.75% 62.8%,33.12% 57.1%,32.5% 62.8%,31.88% 58.2%,31.25% 63.3%,30.62% 58.6%,30.0% 55.9%,29.38% 54.8%,28.75% 53.6%,28.12% 50.3%,27.5% 54.7%,26.88% 57.4%,26.25% 66.1%,25.62% 65.1%,25.0% 62.8%,24.38% 64.4%,23.75% 60.3%,23.12% 52.7%,22.5% 51.2%,21.88% 51.5%,21.25% 51.8%,20.62% 49.3%,20.0% 46.2%,19.38% 49.2%,18.75% 39.7%,18.12% 41.8%,17.5% 31.2%,16.88% 34.1%,16.25% 28.5%,15.62% 37.4%,15.0% 40.1%,14.38% 36.5%,13.75% 46.4%,13.12% 46.6%,12.5% 45.8%,11.88% 41.3%,11.25% 41.2%,10.62% 46.0%,10.0% 49.2%,9.38% 47.8%,8.75% 50.6%,8.12% 52.0%,7.5% 50.8%,6.88% 46.1%,6.25% 42.0%,5.62% 38.5%,5.0% 41.2%,4.38% 44.0%,3.75% 38.8%,3.12% 47.7%,2.5% 46.8%,1.88% 52.8%,1.25% 51.7%,0.62% 52.4%,0.0% 51.6%); }
.tear-flip { transform: scaleY(-1); }
.lift-down { position: relative; z-index: 2; filter: drop-shadow(0 1px 0 rgba(255,240,214,0.35)) drop-shadow(0 3px 4px rgba(40,22,10,0.32)) drop-shadow(0 1px 1px rgba(40,22,10,0.22)); }
.lift-up { position: relative; z-index: 2; filter: drop-shadow(0 -1px 0 rgba(255,240,214,0.35)) drop-shadow(0 -3px 4px rgba(40,22,10,0.32)) drop-shadow(0 -1px 1px rgba(40,22,10,0.22)); }
.on-red { background-color: var(--red); }
.on-band { background-color: var(--band); }
.on-brown { background-color: var(--brown); }

/* Header */
.site-header { position: relative; z-index: 3; padding: 6px 64px 2px; }
.site-header .bar { position: relative; max-width: var(--content); margin: 0 auto; min-height: 50px; padding-left: clamp(170px, 24vw, 270px); display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
.logo { position: absolute; z-index: 5; left: 6px; top: -38px; width: clamp(150px, 20vw, 240px); transform: rotate(-3deg); filter: drop-shadow(0 6px 6px rgba(40,22,10,0.35)) drop-shadow(0 1px 1px rgba(40,22,10,0.3)); }
.logo img { width: 100%; height: auto; }
.main-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 22px; font-size: 1.125rem; font-weight: 700; }
.main-nav a, .site-footer a { color: var(--cream); text-decoration: none; padding: 10px 0; }
.main-nav a:hover, .site-footer a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 5px; }
.main-nav svg { vertical-align: -3px; margin-right: 6px; }
@media (max-width: 720px) {
  .site-header { padding: 6px var(--gutter) 2px; }
  .site-header .bar { padding-left: 0; padding-top: 70px; justify-content: center; }
  .logo { left: 50%; top: -18px; width: 150px; margin-left: -75px; }
  .main-nav { justify-content: center; gap: 0 16px; font-size: 1rem; }
}

/* Buttons */
.store-btn { display: inline-flex; flex-direction: column; justify-content: center; min-height: 56px; padding: 8px 22px; background: var(--button); color: #FFFFFF; border-radius: 12px; text-decoration: none; line-height: 1.15; box-shadow: 0 3px 6px rgba(40,22,10,0.28), 0 1px 1px rgba(40,22,10,0.22); }
.store-btn:hover { color: #FFFFFF; background: #000; }
.store-btn .name { font-size: 1.1875rem; font-weight: 700; }
.store-btn .sub { font-size: 0.8125rem; opacity: 0.85; }
.store-btn.small { flex-direction: row; align-items: center; min-height: 48px; padding: 0 20px; border-radius: 10px; font-weight: 700; font-size: 1.0625rem; }
.store-btn.soon { opacity: 0.85; cursor: default; }
.buttons { display: flex; flex-wrap: wrap; gap: 12px; }

/* Hero */
.hero { max-width: calc(var(--content) + 2 * var(--gutter)); margin: 0 auto; padding: 84px var(--gutter) 24px; display: flex; flex-wrap: wrap; gap: 40px; align-items: center; }
.hero-text { flex: 1 1 var(--hero-text-min); min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.kicker { margin: 0; font-size: 1.25rem; color: var(--ink-soft); }
.hero h1 { font-size: clamp(var(--h1-min), 6vw, var(--h1-max)); line-height: 1.02; color: var(--orange); }
.lead { margin: 0; font-size: 1.3125rem; line-height: 1.5; max-width: 34em; }
.hero-art { flex: 1 1 var(--hero-art-min); min-width: 0; position: relative; padding: 10px 10px 40px; }
.ipad { padding: 18px; background: #1C1C1E; border-radius: 30px; box-shadow: 0 0 0 2px #B8BCC2, 0 18px 36px rgba(58,42,30,0.32); }
.ipad img { width: 100%; height: auto; border-radius: 10px; }
.ipad.tilt-left { transform: rotate(-2deg); }
.ipad.small { position: absolute; right: -8px; bottom: -53px; width: 62%; padding: 11px; border-radius: 20px; transform: rotate(3deg); }
.ipad.small img { border-radius: 7px; }
@media (max-width: 720px) { .hero { padding-top: 40px; } .ipad.small { right: 0; bottom: -20px; width: 55%; } }

/* Ribbon */
.ribbon-wrap { padding: 48px var(--gutter) 40px; }
.ribbon { position: relative; max-width: 1000px; margin: 0 auto; filter: drop-shadow(0 6px 5px rgba(58,30,12,0.28)) drop-shadow(0 2px 1px rgba(58,30,12,0.18)); }
.ribbon .tail { position: absolute; top: 18px; bottom: -18px; width: 82px; background: #8C3313; }
.ribbon .tail.l { left: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 24px 50%); }
.ribbon .tail.r { right: 0; clip-path: polygon(0 0, 100% 0, calc(100% - 24px) 50%, 100% 100%, 0 100%); }
.ribbon .fold { position: absolute; z-index: 1; bottom: -18px; width: 18px; height: 18px; background: #5C1F0A; }
.ribbon .fold.l { left: 64px; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.ribbon .fold.r { right: 64px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.ribbon ul { position: relative; z-index: 2; margin: 0 64px; padding: 16px 28px; list-style: none; background: var(--orange); box-shadow: inset 0 3px 0 rgba(255,255,255,0.12), inset 0 -3px 0 rgba(0,0,0,0.12); display: grid; grid-template-columns: repeat(2, auto); justify-content: center; justify-items: center; gap: 6px 48px; text-align: center; font-weight: 700; font-size: clamp(1.25rem, 3vw, 1.625rem); color: var(--cream); }
@media (max-width: 560px) { .ribbon ul { margin: 0 40px; padding: 14px 12px; gap: 4px 18px; font-size: 1.0625rem; } .ribbon .tail { width: 56px; } .ribbon .fold.l { left: 40px; } .ribbon .fold.r { right: 40px; } }

/* Section headings */
.section { max-width: calc(var(--content) + 2 * var(--gutter)); margin: 0 auto; padding: 40px var(--gutter) 48px; }
.section-title { text-align: center; font-size: clamp(var(--h2-min), 5vw, var(--h2-max)); margin-bottom: 28px; }

/* App cards */
.books { display: flex; flex-wrap: wrap; gap: 32px; }
.book { position: relative; flex: 1 1 var(--card-min); min-width: 0; background: var(--card); border: 1px solid var(--card-line); box-shadow: 0 2px 0 var(--card-line), 0 12px 28px rgba(58,42,30,0.12); display: flex; flex-direction: column; scroll-margin-top: 24px; }
.book.tilt-l { transform: rotate(-0.6deg); }
.book.tilt-r { transform: rotate(0.5deg); }
.book .stripe { height: 10px; background: var(--red); }
.tape { z-index: 2; position: absolute; top: -14px; left: 50%; width: 120px; height: 30px; margin-left: -60px; background: rgba(236,224,190,0.85); box-shadow: 0 1px 2px rgba(58,42,30,0.2); clip-path: polygon(2% 8%,98% 0,100% 30%,97% 55%,100% 92%,3% 100%,0 70%,3% 45%,0 20%); }
.tape.l { transform: rotate(-3deg); }
.tape.r { transform: rotate(2.5deg); }
.book-body { padding: 24px 28px 28px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.book-head { display: flex; align-items: center; gap: 14px; }
.book-head img { width: 56px; height: 56px; border-radius: 13px; box-shadow: 0 3px 8px rgba(58,42,30,0.25); }
.book h3 { font-size: 1.875rem; line-height: 1.05; }
.book .with { margin: 2px 0 0; color: var(--ink-soft); font-size: 1.0625rem; }
.book p { margin: 0; font-size: 1.1875rem; line-height: 1.5; }
.chips { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 5px 12px; background: #F3EBDA; border: 1px solid var(--card-line); border-radius: 999px; font-size: 0.9375rem; }
.book .actions { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; margin-top: auto; padding-top: 8px; }

/* Screenshot crossfade */
.fade { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--band); }
.fade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.fade img:first-child { opacity: 1; }
.fade4 img { animation: fade4 16s infinite; }
.fade3 img { animation: fade3 12s infinite; }
.fade img:nth-child(2) { animation-delay: 4s; }
.fade img:nth-child(3) { animation-delay: 8s; }
.fade img:nth-child(4) { animation-delay: 12s; }
@keyframes fade4 { 0% { opacity: 0 } 5% { opacity: 1 } 25% { opacity: 1 } 30% { opacity: 0 } 100% { opacity: 0 } }
@keyframes fade3 { 0% { opacity: 0 } 6.7% { opacity: 1 } 33.3% { opacity: 1 } 40% { opacity: 0 } 100% { opacity: 0 } }
@media (prefers-reduced-motion: reduce) { .fade img { animation: none; } }

/* How it works */
.how { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; padding-top: 24px; padding-bottom: 56px; }
.how-text { flex: 1 1 var(--how-text-min); min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.how h2 { font-size: clamp(var(--h2-min), 5vw, var(--h2-max)); scroll-margin-top: 24px; }
.steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 16px; font-size: 1.1875rem; line-height: 1.45; }
.steps li { display: flex; gap: 16px; align-items: baseline; }
.steps .n { font-weight: 700; font-size: 2.125rem; color: var(--orange); min-width: 28px; }
.how .ipad { flex: 1 1 var(--how-art-min); min-width: 0; }

/* Parent cards */
.parents .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--note-min), 100%), 1fr)); gap: 24px; }
.note { background: var(--card); border: 1px solid var(--card-line); border-top: 8px solid var(--red); padding: 24px; box-shadow: 0 8px 18px rgba(58,42,30,0.1); }
.note:nth-child(1) { transform: rotate(-0.7deg); }
.note:nth-child(2) { transform: rotate(0.5deg); }
.note:nth-child(3) { transform: rotate(-0.4deg); }
.note h3 { font-size: 1.5rem; margin-bottom: 12px; }
.note ul { margin: 0; padding-left: 20px; font-size: 1.125rem; line-height: 1.6; }

/* Awards */
.awards { position: relative; z-index: 3; }
.awards .wrap { padding-top: 48px; padding-bottom: 48px; display: flex; flex-wrap: wrap; gap: 40px; }
.awards .lists { flex: 1 1 var(--awards-min); min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.awards h2 { font-size: clamp(calc(var(--h2-min) * 0.9), 4.5vw, calc(var(--h2-max) * 0.9)); scroll-margin-top: 24px; }
.awards h3 { font-size: 1.25rem; color: var(--red); margin-bottom: 6px; }
.awards ul { margin: 0; padding-left: 22px; font-size: 1.125rem; line-height: 1.6; }
.awards .fine { margin: 0; color: var(--ink-muted); font-size: 1.0625rem; }
.quotes { flex: 1 1 var(--quotes-min); min-width: 0; display: flex; flex-direction: column; gap: 18px; justify-content: center; }
blockquote { margin: 0; padding: 20px 24px; background: var(--card); border: 1px solid var(--card-line); font-size: 1.3125rem; line-height: 1.4; }
blockquote p { margin: 0; }
blockquote footer { margin-top: 8px; font-size: 1rem; color: var(--ink-muted); }

/* Pre-footer */
.prefooter { position: relative; z-index: 3; overflow: hidden; color: var(--cream); }
.prefooter .char { position: absolute; bottom: 0; height: auto; }
.prefooter .char.josephine { left: 0; width: clamp(130px, 17vw, 210px); }
.prefooter .char.oscar { right: 0; width: clamp(150px, 21vw, 270px); }
.prefooter .body { position: relative; max-width: 640px; margin: 0 auto; padding: 64px var(--gutter) 72px; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.prefooter h2 { font-size: clamp(var(--h2-min), 5vw, var(--h2-max)); color: var(--cream); }
.prefooter p { margin: 0; font-size: 1.25rem; line-height: 1.5; }
.prefooter .langs { margin-top: 6px; font-size: 1.0625rem; color: #F2D9B0; }
.prefooter .buttons { justify-content: center; padding-top: 6px; }
.prefooter .store-btn .name { font-size: 1.125rem; }
@media (max-width: 820px) { .prefooter .body { padding-bottom: 200px; } .prefooter .char { max-width: 40%; } }

/* Footer */
.site-footer { position: relative; z-index: 3; flex: 1; color: #F3EBDA; }
.site-footer .wrap { padding-top: 32px; padding-bottom: 32px; display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; align-items: center; font-size: 1.0625rem; }
.site-footer p { margin: 0; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 4px 24px; align-items: center; }
.site-footer .copy { color: #CDBB9A; }

/* Privacy page */
.doc { max-width: 760px; margin: 0 auto; padding: 96px var(--gutter) 64px; }
.doc-card { background: var(--card); border: 1px solid var(--card-line); box-shadow: 0 12px 28px rgba(58,42,30,0.12); padding: 40px clamp(20px, 5vw, 48px); }
.doc h1 { font-size: 2.75rem; color: var(--orange); margin-bottom: 12px; }
.doc h2 { font-size: 1.625rem; margin: 32px 0 8px; }
.doc p, .doc li { font-size: 1.125rem; line-height: 1.6; }
.doc hr { border: 0; border-top: 1px solid var(--card-line); margin: 24px 0; }
.doc table { width: 100%; border-collapse: collapse; font-size: 1.0625rem; margin: 12px 0; }
.doc th, .doc td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--card-line); vertical-align: top; }
.doc th { background: #F3EBDA; }
@media (max-width: 720px) { .doc { padding-top: 40px; } }

:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

/* Support page */
.support-email { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.support-email [data-email-text] { font-weight: 700; }
.doc h3 { font-size: 1.25rem; margin: 22px 0 4px; }