:root{--ink:#14233b;--muted:#637083;--paper:#f5f7fb;--white:#fff;--teal:#016cfd;--teal2:#0047b8;--lime:#cfe5ff;--line:#d9ddd5;--radius:28px;--shadow:0 24px 70px rgba(21,35,36,.14)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.55}.skip{position:absolute;left:-9999px}.skip:focus{left:1rem;top:1rem;z-index:99;background:#fff;padding:.75rem}.topbar{height:78px;padding:0 max(24px,5vw);display:flex;align-items:center;gap:28px;position:sticky;top:0;z-index:20;background:rgba(246,244,238,.9);backdrop-filter:blur(16px);border-bottom:1px solid rgba(21,35,36,.08)}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:800;letter-spacing:-.02em}.brand em{font-style:normal;font-weight:500;color:var(--muted)}.brand-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--teal);color:#fff}.topbar nav{display:flex;gap:24px;margin-left:auto}.topbar nav a,footer a{color:var(--ink);text-decoration:none;font-size:.9rem;font-weight:650}.languages{display:flex;border:1px solid var(--line);border-radius:999px;padding:3px}.languages button{border:0;background:none;padding:6px 9px;border-radius:99px;font-size:.72rem;cursor:pointer}.languages button.active{background:var(--ink);color:#fff}.menu-button{display:none}.hero{min-height:calc(100vh - 78px);padding:clamp(60px,8vw,120px) max(24px,8vw);display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:7vw;overflow:hidden}.eyebrow{font-size:.72rem;letter-spacing:.18em;font-weight:850;color:var(--teal);margin:0 0 16px}.hero h1{font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;font-weight:500;line-height:.91;letter-spacing:-.065em;margin:0;max-width:820px}.lede{font-size:clamp(1.05rem,1.6vw,1.3rem);max-width:620px;color:var(--muted);margin:30px 0}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.button{display:inline-block;padding:14px 20px;border:1px solid var(--line);border-radius:99px;color:var(--ink);text-decoration:none;font-weight:750}.button.primary{background:var(--teal);color:#fff;border-color:var(--teal)}.hero-art{height:620px;position:relative}.device{position:absolute;background:#111827;border:9px solid #111827;overflow:hidden;box-shadow:var(--shadow)}.device img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;background:#111827}.ipad{width:78%;height:auto;aspect-ratio:4/3;right:0;top:4%;border-radius:30px}.iphone{width:38%;height:auto;aspect-ratio:9/19.5;left:4%;bottom:0;border-radius:36px}.orbit{position:absolute;border-radius:99px;padding:10px 15px;font-size:.7rem;font-weight:900;letter-spacing:.12em;background:var(--lime);box-shadow:var(--shadow)}.orbit.one{right:4%;bottom:20%}.orbit.two{left:1%;top:8%;background:#fff}.section{padding:clamp(70px,9vw,130px) max(24px,8vw)}.intro{background:#fff}.intro>div:first-child{display:grid;grid-template-columns:1fr 1.4fr;align-items:start}.section h2{font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;font-size:clamp(2.05rem,3.6vw,3.85rem);line-height:1;letter-spacing:-.04em;margin:0 0 32px}.steps{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);margin-top:60px}.steps article{padding:30px 30px 20px 0}.steps b,.number{color:var(--teal);font-size:.75rem;letter-spacing:.12em}.steps h3{font-size:1.4rem;margin:26px 0 8px}.steps p{color:var(--muted);max-width:310px}.example{padding:22px 28px;margin:30px 0 0;background:var(--paper);border-radius:16px}.example span{color:var(--muted);margin-right:16px}.section-heading{max-width:900px;margin-bottom:70px}.section-heading>p:last-child{font-size:1.15rem;color:var(--muted);max-width:700px}.story{display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:clamp(40px,8vw,120px);margin:0 0 clamp(100px,14vw,190px)}.story.reverse .visual{order:2}.visual{height:min(630px,65vw);min-height:420px;background:#dbeafe;border-radius:var(--radius);padding:5%;position:relative;overflow:hidden}.visual:before{content:"";position:absolute;width:360px;height:360px;background:rgba(255,255,255,.32);border-radius:50%;right:-80px;top:-100px}.visual img{width:100%;height:100%;object-fit:contain;position:relative;filter:drop-shadow(0 25px 30px rgba(21,35,36,.2))}.visual span{position:absolute;bottom:20px;left:22px;background:#fff;padding:6px 11px;border-radius:99px;font-size:.7rem;font-weight:800}.story-copy h3{font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;font-size:clamp(1.85rem,3vw,3.15rem);font-weight:500;line-height:1;letter-spacing:-.035em;margin:18px 0 28px}.story-copy>p:not(.number){font-size:1.08rem;color:var(--muted)}.story-copy aside{border-left:3px solid var(--lime);padding:10px 18px;color:var(--muted);font-size:.9rem}.badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}.badges>*{padding:8px 11px;border-radius:7px;font-size:.66rem;letter-spacing:.08em}.badges b{background:var(--teal);color:#fff}.badges span{border:1px solid var(--line)}.selectable{background:var(--lime);display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:center}.selectable .eyebrow{color:var(--teal2)}.selectable h2{font-size:clamp(2.05rem,3.4vw,3.65rem)}.selection-demo{background:#fff;padding:clamp(28px,5vw,60px);border-radius:var(--radius);box-shadow:var(--shadow)}.selection-demo p{font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;font-size:clamp(1.5rem,3vw,2.8rem);line-height:1.3}.selection-demo mark{background:#a9d9ff}.selection-demo div{display:flex;gap:8px}.selection-demo button{background:#f0f1ee;border:0;padding:9px 12px;border-radius:8px}.organize{background:var(--teal2);color:#fff;position:relative;overflow:hidden}.light .eyebrow{color:var(--lime)}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;position:relative;z-index:1}.feature-grid article{background:rgba(255,255,255,.08);padding:32px;border:1px solid rgba(255,255,255,.14);border-radius:20px}.feature-grid span{font-size:2rem;color:var(--lime)}.feature-grid h3{font-size:1.35rem}.feature-grid p{color:#dbeafe}.organize-visual{margin:60px auto 0;max-width:950px;height:470px}.organize-visual img{width:100%;height:100%;object-fit:contain}.profile-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.profile-card{padding:25px;border:1px solid var(--line);border-radius:18px;background:#fff}.profile-card b{display:block;color:var(--teal);font-size:.7rem;letter-spacing:.12em;margin-bottom:30px}.profile-card h3{margin:0 0 8px}.profile-card p{color:var(--muted);font-size:.92rem}.toolkit{background:#fff}.tool-row{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line)}.tool-row article{padding:30px 20px 20px 0}.tool-row b{font-size:1.8rem;color:var(--teal)}.tool-row h3{margin:25px 0 5px}.tool-row p{font-size:.9rem;color:var(--muted)}.more-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.more-grid article{min-height:210px;padding:26px;border-radius:18px;background:#e8eef8}.more-grid article:nth-child(3n+2){background:#dbeafe}.more-grid article:nth-child(3n){background:#e0ecff}.more-grid h3{font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;font-size:1.5rem;margin:0 0 24px}.more-grid p{font-size:.88rem;color:var(--muted)}.more-grid b{font-size:.68rem;color:var(--teal);letter-spacing:.08em}.paste{margin-top:70px;background:var(--ink);color:#fff;border-radius:var(--radius);padding:clamp(30px,6vw,70px);display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:center}.paste h3{font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;font-size:clamp(1.8rem,3vw,3.1rem);font-weight:500;margin:0}.paste p:not(.eyebrow){color:#cbd5e1}.capture-options{display:flex;gap:10px;justify-content:center}.capture-options span{width:100px;height:100px;display:grid;place-items:center;border:1px solid #53605f;border-radius:50%;font-weight:750}.capture-options span:last-child{background:var(--lime);color:var(--ink);border:0}.help{background:#fff}.accordions{max-width:1000px;margin:auto}.accordions details{border-top:1px solid var(--line);padding:0}.accordions summary{cursor:pointer;list-style:none;font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;font-size:1.5rem;padding:25px 45px 25px 0;position:relative}.accordions summary:after{content:"+";position:absolute;right:5px}.accordions details[open] summary:after{content:"−"}.accordions details>p,.accordions details>div{max-width:780px;color:var(--muted);padding:0 0 28px}.placeholder{background:#fff4b8;padding:2px 5px}footer{padding:45px max(24px,8vw);display:grid;grid-template-columns:1fr 1fr auto;align-items:center;gap:25px;border-top:1px solid var(--line)}footer p{color:var(--muted);text-align:center}@media(max-width:900px){.topbar nav{display:none;position:absolute;top:78px;left:0;right:0;background:var(--paper);padding:25px;flex-direction:column}.topbar nav.open{display:flex}.menu-button{display:flex;margin-left:auto;width:42px;height:42px;border:0;background:none;flex-direction:column;justify-content:center;gap:4px}.menu-button span{display:block;width:20px;height:2px;background:var(--ink)}.menu-button b{position:absolute;left:-9999px}.hero{grid-template-columns:1fr}.hero-art{height:500px}.intro>div:first-child,.selectable{grid-template-columns:1fr}.story,.story.reverse{grid-template-columns:1fr}.story.reverse .visual{order:0}.visual{height:560px}.profile-grid,.more-grid{grid-template-columns:repeat(2,1fr)}.tool-row{grid-template-columns:repeat(3,1fr)}.paste{grid-template-columns:1fr}.capture-options{justify-content:flex-start}}@media(max-width:600px){.topbar{padding:0 16px;gap:10px}.brand em{display:none}.languages button{padding:6px}.hero{padding-top:50px}.hero h1{font-size:3.6rem}.hero-art{height:390px}.section{padding:70px 20px}.steps,.feature-grid,.profile-grid,.more-grid{grid-template-columns:1fr}.steps article{border-bottom:1px solid var(--line)}.story{margin-bottom:100px}.visual{height:430px;min-height:0}.story-copy h3{font-size:2.05rem}.tool-row{grid-template-columns:1fr 1fr}.organize-visual{height:300px}.capture-options span{width:82px;height:82px}footer{grid-template-columns:1fr;text-align:center}footer .brand{justify-content:center}}

/* Hero iPad composition */
.hero-mockup{display:grid;place-items:center;isolation:isolate}
.hero-ring{position:absolute;left:50%;top:50%;border:2px solid #bfd3eb;border-radius:50%;transform:translate(-50%,-50%);z-index:-2}
.hero-ring.ring-one{width:min(92%,590px);aspect-ratio:1}
.hero-ring.ring-two{width:min(66%,420px);aspect-ratio:1}
.ipad-mockup{position:relative;width:min(88%,590px);padding:7px;background:#111827;border:7px solid #111827;border-radius:34px;box-shadow:var(--shadow);transform:rotate(4deg);z-index:2}
.ipad-screen{width:100%;height:auto;aspect-ratio:2360/1640;overflow:hidden;border-radius:20px;background:#0b1220}
.ipad-screen img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.ipad-camera{position:absolute;z-index:3;top:3px;left:50%;width:6px;height:6px;border-radius:50%;background:#475569;box-shadow:inset 0 0 0 1px #060b14;transform:translateX(-50%)}
.hero-label{position:absolute;z-index:4;padding:15px 22px;border-radius:999px;background:#fff;color:var(--ink);font-size:.76rem;font-weight:850;letter-spacing:.06em;box-shadow:0 18px 40px rgba(21,35,36,.15);white-space:nowrap}
.label-scan{left:-2%;top:22%}
.label-save{right:-3%;bottom:19%}
@media(max-width:900px){.ipad-mockup{width:min(82%,620px)}.label-scan{left:2%}.label-save{right:2%}}
@media(max-width:600px){.ipad-mockup{width:88%;padding:5px;border-width:5px;border-radius:24px}.ipad-screen{border-radius:14px}.hero-label{padding:10px 14px;font-size:.62rem}.label-scan{left:0;top:18%}.label-save{right:0;bottom:17%}}

/* Header app icon */
.brand-icon{display:block;flex:0 0 auto;width:38px;height:38px;border-radius:9px;overflow:hidden;box-shadow:0 2px 8px rgba(21,35,36,.14)}
.brand-icon img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
@media(max-width:600px){.brand-icon{width:34px;height:34px;border-radius:8px}}

/* Multi-image use-case galleries */
.visual-masonry{padding:18px}
.visual-masonry:before{opacity:.45}
.masonry-grid{position:relative;z-index:1;width:100%;height:100%;display:grid;grid-template-columns:1.08fr .92fr;grid-template-rows:1fr 1fr .82fr;gap:12px}
.masonry-grid .tile{position:relative;min-width:0;min-height:0;margin:0;overflow:hidden;border-radius:18px;background:rgba(255,255,255,.72);border:1px solid rgba(1,108,253,.13)}
.masonry-grid .tile-tall{grid-row:span 2}
.masonry-grid:not(.masonry-three) .tile:last-child{grid-column:1/-1}
.masonry-three{grid-template-columns:1fr 1fr;grid-template-rows:1.25fr .75fr}
.masonry-three .tile-wide{grid-column:1/-1}
.masonry-three-portraits{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:1fr}
.masonry-grid.masonry-three-portraits .tile:last-child{grid-column:auto}
.masonry-five{grid-template-columns:repeat(6,1fr);grid-template-rows:.82fr 1.18fr}
.masonry-five .tile:nth-child(-n+2){grid-column:span 3}
.masonry-five .tile:nth-child(n+3){grid-column:span 2}
.masonry-grid.masonry-five .tile:last-child{grid-column:span 2}
.masonry-grid .tile img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;filter:none;background:#fff}
.visual-masonry .placeholder-tile{display:grid;place-items:center;padding:18px;background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(207,229,255,.8))}
.visual-masonry .placeholder-tile:before{content:"＋";display:grid;place-items:center;width:38px;height:38px;margin-bottom:8px;border:1px solid rgba(1,108,253,.28);border-radius:50%;color:var(--teal);font-size:1.2rem}
.visual-masonry .placeholder-tile span{position:static;background:transparent;padding:0;color:var(--teal2);font-size:.65rem;letter-spacing:.04em;text-align:center}
@media(max-width:600px){.visual-masonry{height:470px;padding:10px}.masonry-grid{gap:8px}.masonry-grid .tile{border-radius:12px}.visual-masonry .placeholder-tile{padding:10px}.visual-masonry .placeholder-tile:before{width:30px;height:30px;font-size:1rem}.visual-masonry .placeholder-tile span{font-size:.58rem}}

/* Three portrait screenshots: allow their aspect ratio to define the gallery
   height instead of inheriting the generic fixed-height visual container. */
.visual-masonry:has(> .masonry-three-portraits) {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

.masonry-grid.masonry-three-portraits {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  align-content: flex-start;
  gap: 12px;
  width: 100%;
  height: auto;
}

.masonry-grid.masonry-three-portraits > .tile,
.masonry-grid.masonry-three-portraits > .tile:last-child {
  position: relative;
  grid-column: auto;
  grid-row: auto;
  flex: 0 0 calc((100% - 24px) / 3);
  width: calc((100% - 24px) / 3);
  aspect-ratio: 9 / 19.5;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.masonry-grid.masonry-three-portraits > .tile img {
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  max-width: none;
  object-fit: cover;
  object-position: center;
  background: #fff;
  border: 0;
  filter: none;
}

@media(max-width:600px) {
  .visual-masonry:has(> .masonry-three-portraits) {
    height: auto !important;
  }

  .masonry-grid.masonry-three-portraits {
    gap: 8px;
  }

  .masonry-grid.masonry-three-portraits > .tile,
  .masonry-grid.masonry-three-portraits > .tile:last-child {
    flex-basis: calc((100% - 16px) / 3);
    width: calc((100% - 16px) / 3);
  }
}

/* Four-image gallery: one natural-ratio landscape image above three iPhones. */
.visual.visual-masonry.visual-lookup-four {
  display: block;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 18px;
  overflow: hidden;
}

.visual-lookup-four > .masonry-grid.masonry-lookup-four {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  gap: 14px;
  width: 100%;
  height: auto;
}

.visual-lookup-four > .masonry-lookup-four > .tile,
.visual-lookup-four > .masonry-lookup-four > .tile:last-child {
  position: relative;
  grid-column: auto;
  grid-row: auto;
  flex: 0 0 calc((100% - 28px) / 3);
  width: calc((100% - 28px) / 3);
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(21,35,36,.14);
  aspect-ratio: 9 / 19.5;
}

.visual-lookup-four > .masonry-lookup-four > .tile:first-child {
  grid-column: 1 / -1;
  flex-basis: 100%;
  width: 100%;
  aspect-ratio: auto;
}

.visual-lookup-four > .masonry-lookup-four > .tile img {
  position: absolute;
  inset: -1px;
  display: block;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  max-width: none;
  object-fit: cover;
  object-position: center;
  background: #fff;
  border: 0;
  filter: none;
}

.visual-lookup-four > .masonry-lookup-four > .tile:first-child img {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  object-fit: contain;
}

@media(max-width:600px) {
  .visual.visual-masonry.visual-lookup-four {
    padding: 10px;
  }

  .visual-lookup-four > .masonry-grid.masonry-lookup-four {
    gap: 8px;
  }

  .visual-lookup-four > .masonry-lookup-four > .tile {
    flex-basis: calc((100% - 16px) / 3);
    width: calc((100% - 16px) / 3);
    border-radius: 12px;
  }

  .visual-lookup-four > .masonry-lookup-four > .tile:first-child {
    flex-basis: 100%;
    width: 100%;
  }
}

/* Keep the Types → Sources → Clips hierarchy horizontal on phones */
@media(max-width:600px){
  .intro .steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:24px}
  .intro .steps article{min-width:0;padding:16px 10px 12px;border-bottom:0;border-right:1px solid var(--line)}
  .intro .steps article:last-child{border-right:0}
  .intro .steps b{font-size:.62rem}
  .intro .steps h3{font-size:1rem;margin:10px 0 6px}
  .intro .steps p{font-size:.68rem;line-height:1.35;margin:0;overflow-wrap:anywhere}
}

/* Desktop hero copy flows around the iPad; mobile keeps the stacked layout. */
@media(min-width:901px){
  .hero.hero-reflow{display:block;min-height:calc(100vh - 78px);overflow:hidden}
  .hero.hero-reflow::after{content:"";display:block;clear:both}
  .hero-reflow .hero-art{float:right;width:min(52%,720px);height:620px;margin:0 0 32px clamp(36px,6vw,100px);shape-outside:margin-box}
  .hero-reflow .hero-copy{display:block}
  .hero-reflow .hero-copy-primary{padding-top:clamp(24px,5vw,76px)}
  .hero-reflow .hero-copy-secondary{padding-top:10px}
  .hero-reflow .hero-copy .lede{max-width:none;white-space:pre-line}
}
@media(max-width:900px){
  .hero.hero-reflow{display:flex;flex-direction:column;align-items:stretch;gap:clamp(24px,6vw,54px)}
  .hero-reflow .hero-copy-primary{order:1}
  .hero-reflow .hero-media{order:2}
  .hero-reflow .hero-art{order:2;float:none;width:100%;margin:0;shape-outside:none}
  .hero-reflow .hero-copy-secondary{order:3}
  .hero-reflow .hero-copy-secondary .lede{margin-top:0}
}
.hero-reflow h1{font-size:clamp(2.8rem,5.4vw,5.8rem)}
@media(max-width:600px){.hero-reflow h1{font-size:clamp(2.55rem,10vw,3.25rem)}}

/* On wide screens, let the introductory heading use the same full content
   width as the image below it. This overrides the original empty 1fr/1.4fr
   split applied to the heading-only wrapper. */
@media(min-width:901px){
  .intro>div:first-child{
    display:block;
    width:100%;
  }

  .intro>div:first-child h2{
    width:100%;
    max-width:none;
  }
}

/* Stable two-part header: the controls remain one unbreakable group. */
.topbar{width:100%;min-width:0;display:flex;padding:0 max(24px,5vw);gap:20px}
.topbar>.brand{flex:0 0 auto;white-space:nowrap;visibility:visible;opacity:1;position:relative;z-index:2}
.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:20px;margin-left:auto;flex:0 0 auto;min-width:0}
.topbar .header-actions nav{display:flex;align-items:center;justify-content:flex-end;gap:24px;margin:0;min-width:0;overflow:hidden;position:static;inset:auto;z-index:auto;width:auto;height:auto;padding:0;background:transparent;backdrop-filter:none;border:0}
.topbar .header-actions nav a{white-space:nowrap}
.header-actions .languages{display:flex;flex:0 0 auto;position:static;transform:none;white-space:nowrap;visibility:visible;opacity:1}
.header-actions .menu-button{display:none;flex:0 0 42px;margin:0}
@media(max-width:1180px){
  .topbar{padding-inline:max(16px,3vw);gap:12px}
  .topbar>.brand em{display:none}
  .header-actions{gap:12px}
  .topbar .header-actions nav{display:none;position:absolute;top:78px;left:0;right:0;bottom:auto;width:auto;height:auto;overflow:visible;background:var(--paper);backdrop-filter:none;padding:25px;flex-direction:column;align-items:flex-start;gap:18px;border:0;border-bottom:1px solid var(--line)}
  .topbar .header-actions nav.open{display:flex}
  .header-actions .menu-button{display:flex;width:42px;height:42px;border:0;background:none;flex-direction:column;justify-content:center;align-items:center;gap:4px}
  .header-actions .menu-button span{display:block;width:20px;height:2px;background:var(--ink)}
  .header-actions .menu-button b{position:absolute;left:-9999px}
}
@media(max-width:420px){
  .topbar{padding-inline:12px;gap:8px}
  .topbar>.brand>span:last-child{display:none}
  .header-actions{gap:8px}
  .header-actions .languages button{padding-inline:6px}
}

/* Six portrait iPhone screenshots: 3 × 2 on wide screens */
.visual-masonry:has(.masonry-grid > .tile:nth-child(6):last-child) {
  height: auto;
  min-height: 0;
}

.visual-masonry .masonry-grid:has(> .tile:nth-child(6):last-child) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, auto);
  gap: 14px;
  width: 100%;
  height: auto;
}

.visual-masonry .masonry-grid:has(> .tile:nth-child(6):last-child) > .tile {
  grid-column: auto;
  grid-row: auto;
  aspect-ratio: 9 / 19.5;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(1,108,253,.13);
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(21,35,36,.14);
}

.visual-masonry .masonry-grid:has(> .tile:nth-child(6):last-child) > .tile:last-child {
  grid-column: auto;
}

.visual-masonry .masonry-grid:has(> .tile:nth-child(6):last-child) > .tile img {
  position: static;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: #fff;
  filter: none;
}

/* Keep empty placeholders fitted to the same portrait frame. */
.visual-masonry .masonry-grid:has(> .tile:nth-child(6):last-child) > .tile.placeholder-tile {
  display: grid;
  place-items: center;
  background: linear-gradient(145deg,rgba(255,255,255,.88),rgba(207,229,255,.8));
}

/* Six screenshots become 2 × 3 on narrow screens. */
@media(max-width:700px) {
  .visual-masonry:has(.masonry-grid > .tile:nth-child(6):last-child) {
    height: auto;
    padding: 10px;
  }

  .visual-masonry .masonry-grid:has(> .tile:nth-child(6):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto);
    gap: 10px;
  }

  .visual-masonry .masonry-grid:has(> .tile:nth-child(6):last-child) > .tile {
    border-radius: 14px;
  }
}

/* Four-image card gallery: three portrait iPhones over one landscape iPad. */
.story > .visual.visual-masonry.visual-card-four {
  display: block;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 18px;
  overflow: hidden;
}

.story > .visual-card-four > .masonry-grid.masonry-card-four {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  gap: 14px;
  width: 100%;
  height: auto;
}

.story > .visual-card-four > .masonry-card-four > .tile {
  position: relative;
  grid-column: auto;
  grid-row: auto;
  flex: 0 0 calc((100% - 28px) / 3);
  width: calc((100% - 28px) / 3);
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(21,35,36,.14);
  aspect-ratio: 9 / 19.5;
}

.story > .visual-card-four > .masonry-card-four > .tile:last-child {
  grid-column: 1 / -1;
  flex-basis: 100%;
  width: 100%;
  aspect-ratio: 2360 / 1640;
}

.story > .visual-card-four > .masonry-card-four > .tile img {
  position: absolute;
  inset: -1px;
  display: block;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  max-width: none;
  object-fit: cover;
  object-position: center;
  background: #fff;
  border: 0;
  filter: none;
}

@media(max-width:600px) {
  .story > .visual.visual-masonry.visual-card-four {
    padding: 10px;
  }

  .story > .visual-card-four > .masonry-grid.masonry-card-four {
    gap: 8px;
  }

  .story > .visual-card-four > .masonry-card-four > .tile {
    flex-basis: calc((100% - 16px) / 3);
    width: calc((100% - 16px) / 3);
    border-radius: 12px;
  }

  .story > .visual-card-four > .masonry-card-four > .tile:last-child {
    flex-basis: 100%;
    width: 100%;
  }
}

/* Final 2 × 2 portrait fix.
   The grid owns its full aspect ratio, so both rows always contribute to
   document height before the following story content is positioned. */
.story > .visual.visual-masonry.visual-portrait-2x2 {
  display: block;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 18px;
  overflow: hidden;
}

.story > .visual-portrait-2x2 > .masonry-grid.masonry-portrait-2x2 {
  position: relative;
  z-index: 1;
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  grid-template-rows: repeat(2,minmax(0,1fr)) !important;
  grid-auto-rows: unset !important;
  gap: 14px;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 9 / 19.5;
  overflow: hidden;
}

.story > .visual-portrait-2x2 > .masonry-portrait-2x2 > .tile,
.story > .visual-portrait-2x2 > .masonry-portrait-2x2 > .tile:last-child {
  position: relative;
  grid-column: auto !important;
  grid-row: auto !important;
  width: 100%;
  height: 100%;
  aspect-ratio: auto !important;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  background: #fff;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(21,35,36,.14);
}

.story > .visual-portrait-2x2 > .masonry-portrait-2x2 > .tile img {
  position: absolute;
  inset: -1px;
  display: block;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  max-width: none;
  object-fit: cover;
  object-position: center;
  background: #fff;
  border: 0;
  filter: none;
}

@media(max-width:600px) {
  .story > .visual.visual-masonry.visual-portrait-2x2 {
    height: auto !important;
    min-height: 0 !important;
    padding: 10px;
  }

  .story > .visual-portrait-2x2 > .masonry-grid.masonry-portrait-2x2 {
    height: auto !important;
    gap: 10px;
  }

  .story > .visual-portrait-2x2 > .masonry-portrait-2x2 > .tile {
    border-radius: 14px;
  }
}

/* Consolidated footer: brand, message and related links stay in three columns. */
.footer-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
  color: var(--muted);
  font-size: .72rem;
  text-align: right;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px 14px;
}

.footer-links a,
.footer-meta > a {
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}

.footer-links a:hover,
.footer-meta > a:hover {
  text-decoration: underline;
}

@media(max-width:600px) {
  .footer-meta {
    align-items: center;
    text-align: center;
  }

.footer-links {
    justify-content: center;
  }
}

/* Museum gallery: four landscape iPhone screenshots in a 2 × 2 grid. */
.story > .visual.visual-masonry.visual-museum-four {
  display: block;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 18px;
  overflow: hidden;
}

.story > .visual-museum-four > .masonry-grid.masonry-museum-four {
  position: relative;
  z-index: 1;
  --museum-gap: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  gap: var(--museum-gap);
  width: 100%;
  height: auto;
}

.story > .visual-museum-four > .masonry-museum-four > .tile,
.story > .visual-museum-four > .masonry-museum-four > .tile:last-child {
  position: relative;
  grid-column: auto;
  grid-row: auto;
  flex: 0 0 calc((100% - var(--museum-gap)) / 2);
  width: calc((100% - var(--museum-gap)) / 2);
  height: auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  background: #050505;
  box-shadow: 0 12px 30px rgba(21,35,36,.14);
  aspect-ratio: 19.5 / 9;
}

.story > .visual-museum-four > .masonry-museum-four > .tile img {
  position: absolute;
  inset: -1px;
  display: block;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  max-width: none;
  object-fit: cover;
  object-position: center;
  background: #050505;
  border: 0;
  filter: none;
}

.story > .visual-museum-four > .masonry-museum-four > .tile:first-child img {
  object-position: center 52%;
}

@media(max-width:600px) {
  .story > .visual.visual-masonry.visual-museum-four {
    padding: 10px;
  }

  .story > .visual-museum-four > .masonry-grid.masonry-museum-four {
    --museum-gap: 8px;
  }

  .story > .visual-museum-four > .masonry-museum-four > .tile {
    border-radius: 12px;
  }
}

/* Compact secondary reference sections. */
.profiles.section,
.toolkit.section,
.more.section {
  padding-block: clamp(44px,5.5vw,76px);
}

.profiles .section-heading,
.toolkit .section-heading,
.more .section-heading {
  max-width: 760px;
  margin-bottom: 34px;
}

.profiles .section-heading h2,
.toolkit .section-heading h2,
.more .section-heading h2 {
  font-size: clamp(1.9rem,3vw,3rem);
  margin-bottom: 18px;
}

.profiles .section-heading > p:last-child {
  max-width: 650px;
  margin-bottom: 0;
  font-size: 1rem;
}

.profiles .profile-grid {
  gap: 10px;
}

.profiles .profile-card {
  padding: 18px;
  border-radius: 14px;
}

.profiles .profile-card b {
  margin-bottom: 16px;
}

.profiles .profile-card h3,
.profiles .profile-card p,
.toolkit .tool-row h3,
.toolkit .tool-row p,
.more .more-grid h3,
.more .more-grid p {
  margin-top: 0;
}

.profiles .profile-card p,
.toolkit .tool-row p,
.more .more-grid p {
  margin-bottom: 0;
  line-height: 1.45;
}

.toolkit .tool-row article {
  padding: 20px 16px 14px 0;
}

.toolkit .tool-row b {
  font-size: 1.45rem;
}

.toolkit .tool-row h3 {
  margin: 12px 0 4px;
}

.more .more-grid {
  gap: 10px;
}

.more .more-grid article {
  min-height: 150px;
  padding: 19px;
  border-radius: 14px;
}

.more .more-grid h3 {
  margin-bottom: 12px;
  font-size: 1.25rem;
}

.more .paste {
  margin-top: 34px;
  padding: clamp(24px,4vw,42px);
  gap: clamp(24px,5vw,60px);
  border-radius: 20px;
}

.more .paste h3 {
  font-size: clamp(1.55rem,2.4vw,2.25rem);
}

.more .capture-options span {
  width: 78px;
  height: 78px;
  font-size: .82rem;
}

@media(max-width:600px) {
  .profiles.section,
  .toolkit.section,
  .more.section {
    padding: 46px 20px;
  }

  .profiles .section-heading,
  .toolkit .section-heading,
  .more .section-heading {
    margin-bottom: 22px;
  }

  .profiles .section-heading h2,
  .toolkit .section-heading h2,
  .more .section-heading h2 {
    margin-bottom: 12px;
    font-size: clamp(1.7rem,8vw,2.15rem);
  }

  .profiles .section-heading > p:last-child {
    font-size: .92rem;
    line-height: 1.45;
  }

  .profiles .profile-grid,
  .toolkit .tool-row,
  .more .more-grid {
    display: flex;
    grid-template-columns: none;
    flex-wrap: nowrap;
    gap: 10px;
    width: 100%;
    padding: 2px 0 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .profiles .profile-card,
  .more .more-grid article {
    flex: 0 0 72vw;
    max-width: 300px;
    min-height: 0;
    scroll-snap-align: start;
  }

  .profiles .profile-card {
    padding: 17px;
  }

  .profiles .profile-card b {
    margin-bottom: 12px;
  }

  .toolkit .tool-row {
    border-top: 0;
  }

  .toolkit .tool-row article {
    flex: 0 0 62vw;
    max-width: 230px;
    min-height: 0;
    padding: 17px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--paper);
    scroll-snap-align: start;
  }

  .toolkit .tool-row h3 {
    margin: 9px 0 3px;
  }

  .more .more-grid article {
    min-height: 142px;
    padding: 17px;
  }

  .more .paste {
    margin-top: 22px;
    padding: 22px;
    gap: 18px;
    border-radius: 18px;
  }

  .more .paste .eyebrow {
    margin-bottom: 10px;
  }

  .more .paste h3 {
    font-size: 1.5rem;
  }

  .more .paste p:not(.eyebrow) {
    margin-bottom: 0;
    font-size: .9rem;
  }

  .more .capture-options {
    gap: 8px;
  }

  .more .capture-options span {
    width: 62px;
    height: 62px;
    font-size: .72rem;
  }
}


p[data-i18n],
li[data-i18n],
aside[data-i18n] {
  white-space: pre-wrap;
  tab-size: 4;
}
/* Base: title, gallery and body stacked */
.story.story-title-above {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: max-content max-content max-content;
  grid-template-areas:
    "title"
    "visual"
    "body";
  gap: 20px;
  min-height: 0;
  align-items: start;
  align-content: start;
}

.story.story-title-above > .story-copy {
  grid-area: title;
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
}

.story.story-title-above > .visual {
  grid-area: visual;
  order: initial;
  width: 100%;
  margin: 0;
}

.story.story-title-above > .story-body {
  grid-area: body;
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
}

.story.story-title-above .story-copy .number {
  margin: 0 0 10px;
}

.story.story-title-above .story-copy h3 {
  position: static;
  margin: 0;
}

.story.story-title-above .story-body p {
  margin: 0 0 1.35em;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.55;
}

@media (min-width: 901px) {
  .story.reverse.story-title-above {
    grid-template-columns:
      minmax(0, 1.08fr)
      minmax(320px, 0.92fr);

    grid-template-rows:
      max-content
      max-content;

    grid-template-areas:
      "visual title"
      "visual body";

    column-gap: clamp(40px, 8vw, 120px);
    row-gap: 24px;
    align-items: start;
  }

  .story.reverse.story-title-above > .visual {
    grid-area: visual;
    order: initial;
    max-width: 100%;
    align-self: start;
  }

  .story.reverse.story-title-above > .story-copy {
    grid-area: title;
    align-self: end;
  }

  .story.reverse.story-title-above > .story-body {
    grid-area: body;
    align-self: start;
  }
}

/* Apple Look Up section: float the gallery on the right so long copy can
   continue beneath it instead of remaining trapped in a fixed column. */
@media (min-width: 901px) {
  .selectable.section.lookup-reflow {
    display: block;
  }

  .selectable.section.lookup-reflow::after {
    content: "";
    display: block;
    clear: both;
  }

  .lookup-reflow > .visual.visual-masonry.visual-lookup-four {
    float: right;
    width: min(52%, 860px);
    margin: 0 0 clamp(24px, 4vw, 56px) clamp(32px, 6vw, 96px);
  }

  .lookup-reflow > .lookup-copy {
    display: block;
  }

  .lookup-reflow > .lookup-copy h2 {
    max-width: none;
  }

  .lookup-reflow > .lookup-copy > p:last-child {
    max-width: none;
    margin-bottom: 0;
  }
}

@media (max-width: 900px) {
  .selectable.section.lookup-reflow {
    display: flex;
    flex-direction: column;
    gap: clamp(28px, 6vw, 48px);
  }

  .lookup-reflow > .lookup-copy {
    order: 1;
  }

  .lookup-reflow > .visual.visual-masonry.visual-lookup-four {
    float: none;
    order: 2;
    width: 100%;
    margin: 0;
  }
}

/* Allow the use-case introduction to occupy the section’s full width */
#uses > .section-heading {
  width: 100%;
  max-width: none;
}

#uses > .section-heading > p[data-i18n="usesIntro"] {
  width: 100%;
  max-width: none;
}

#uses > .section-heading > h2,
#uses > .section-heading > h3 {
  width: 100%;
  max-width: none;
}

/* Long use-case articles: keep the gallery on the left and allow the copy
   to wrap beside it before continuing across the full article width. */
@media (min-width: 901px) {
  .story.story-left-reflow {
    display: block;
    min-height: 0;
  }

  .story.story-left-reflow::after {
    content: "";
    display: block;
    clear: both;
  }

  .story-left-reflow > .visual.visual-masonry {
    float: left;
    width: min(52%, 860px);
    margin: 0 clamp(32px, 6vw, 96px) clamp(24px, 4vw, 56px) 0;
  }

  .story-left-reflow > .story-copy,
  .story-left-reflow > .story-body {
    display: block;
    width: auto;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }

  .story-left-reflow > .story-copy h3 {
    max-width: none;
  }

  .story-left-reflow > .story-body p {
    max-width: none;
  }
}

@media (max-width: 900px) {
  .story.story-left-reflow {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-height: 0;
  }

  .story-left-reflow > .story-copy {
    order: 1;
  }

  .story-left-reflow > .visual.visual-masonry {
    float: none;
    order: 2;
    width: 100%;
    margin: 0;
  }

  .story-left-reflow > .story-body {
    order: 3;
  }
}

/* App Store badge — localised SVG from Apple CDN */
.appstore-badge{display:inline-block;margin-top:4px;}
.appstore-badge img{height:44px;display:block;}

.hero-media .hero-appstore {
  justify-content: center;
  margin-top: 14px;
}

@media (min-width: 901px) {
  .hero.hero-reflow .hero-media {
    float: right;
    width: min(52%, 720px);
    margin: 0 0 32px clamp(36px, 6vw, 100px);
  }

  .hero.hero-reflow .hero-media .hero-art {
    float: none;
    width: 100%;
    height: 620px;
    margin: 0;
  }
}