/* Roll Anywhere page styles. */
:root {
  color-scheme:dark;
  --ink:#101a1d;
  --deep:#0d1518;
  --surface:#1a2c32;
  --surface-light:#21373d;
  --paper:#f4eddb;
  --gold:#ddbe7c;
  --gold-dark:#9f834b;
  --muted:#c1c9c4;
  --line:#395057;
  --wax:#b84a39;
  --wax-hover:#ce5845;
  --serif:"Alegreya",Georgia,serif;
  --small-caps:"Alegreya SC",Georgia,serif;
  --sans:"Alegreya Sans","Segoe UI",sans-serif;
  font-family:var(--sans);
  background:var(--ink);
  color:var(--paper);
  font-size:18px;
  line-height:1.55;
  scroll-behavior:smooth;
  scroll-padding-top:100px;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
}

button,a,input,summary {
  -webkit-tap-highlight-color:transparent;
}

a {
  color:inherit;
  text-underline-offset:5px;
}

button {
  font:inherit;
}

img {
  max-width:100%;
  height:auto;
  display:block;
}

h1,h2,h3,p,figure {
  margin:0;
}

h1,h2 {
  font-family:var(--serif);
  font-weight:500;
  text-wrap:balance;
}

h1 em,h2 em {
  font-weight:500;
  color:var(--gold);
}

a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:3px solid var(--gold);
  outline-offset:6px;
}

button,summary {
  cursor:pointer;
}

[hidden] {
  display:none!important;
}

.wrap {
  width:min(1200px,calc(100% - 96px));
  margin-inline:auto;
}

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

.skip-link {
  position:absolute;
  left:20px;
  top:-100px;
  z-index:10;
  padding:12px 20px;
  background:var(--paper);
  color:var(--ink);
}

.skip-link:focus {
  top:12px;
}

.eyebrow {
  text-transform:uppercase;
  letter-spacing:.17em;
  font-size:.7rem;
  font-weight:700;
  line-height:1.6;
  color:var(--gold);
}

.site-header {
  background:var(--ink);
  border-bottom:1px solid #ddbe7c24;
}

.header-inner {
  min-height:92px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.studio-name {
  font-family:var(--small-caps);
  font-weight:700;
  font-size:1.15rem;
  color:var(--gold);
  text-decoration:none;
  letter-spacing:.025em;
}

.studio-name>span {
  margin-left:18px;
  font-size:10px;
  color:var(--wax);
  vertical-align:middle;
}

.header-links {
  display:flex;
  gap:32px;
  margin-left:auto;
  margin-right:22px;
}

.header-links a {
  font-size:.86rem;
  text-decoration:none;
  color:var(--muted);
}

.header-links a:hover {
  color:var(--gold);
}

.button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:22px;
  min-height:54px;
  padding:13px 25px;
  background:var(--wax);
  border:1px solid #e3b57555;
  border-radius:5px;
  color:#fff4e7;
  text-decoration:none;
  font-size:.94rem;
  font-weight:700;
  line-height:1.3;
  transition:background .16s,transform .16s;
}

.button:hover {
  background:var(--wax-hover);
  transform:translateY(-2px);
}

.button>span {
  font-size:1.16rem;
  font-weight:400;
}

.button-small {
  min-height:42px;
  padding:9px 18px;
  font-size:.82rem;
}

.button-outline {
  background:transparent;
  color:var(--gold);
  border-color:var(--gold-dark);
}

.button-outline:hover {
  background:var(--surface-light);
}

.text-link {
  display:inline-flex;
  align-items:center;
  gap:14px;
  min-height:44px;
  font-weight:700;
  font-size:.88rem;
  text-decoration:none;
}

.text-link:hover {
  text-decoration:underline;
}

.hero {
  padding-block:70px 68px;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:66px;
}

.app-identity {
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:25px;
  font-family:var(--small-caps);
  font-weight:700;
  font-size:1.18rem;
  line-height:1.2;
  color:var(--gold);
}

.app-identity img {
  width:51px;
  height:51px;
  border-radius:13px;
}

.identity-subtitle {
  display:block;
  margin-top:5px;
  font-family:var(--sans);
  font-weight:400;
  letter-spacing:.03em;
  font-size:.71rem;
  color:var(--muted);
}

h1 {
  font-size:clamp(3.2rem,6.6vw,5.3rem);
  line-height:.98;
  letter-spacing:-.035em;
}

.hero-description {
  margin-top:28px;
  max-width:390px;
  color:var(--muted);
  font-size:1.04rem;
  line-height:1.55;
}

.hero-actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:15px 28px;
  margin-top:28px;
}

.hero-reassurance {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  font-size:.81rem;
  margin-top:19px;
  color:var(--paper);
}

.hero-reassurance>span {
  color:var(--gold-dark);
}

.android-note {
  font-size:.73rem;
  color:#9cadab;
  margin-top:4px;
}

.hero-showcase {
  min-width:0;
  scroll-margin-top:30px;
}

.showcase-stage {
  position:relative;
  height:560px;
  background:#2b4b50;
  isolation:isolate;
  overflow:hidden;
  touch-action:pan-y;
  container-type:size;
  --arrow-inset:30px;
}

.stage-arrow {
  position:absolute;
  top:50%;
  z-index:3;
  margin-top:-22px;
  box-shadow:0 4px 14px #0008;
}

#showcase-previous {
  left:var(--arrow-inset);
}

#showcase-next {
  right:var(--arrow-inset);
}

.showcase-stage::before {
  content:"";
  position:absolute;
  inset:18px;
  border:1px solid #ddbe7c33;
  z-index:-1;
}

.showcase-eyebrow {
  position:absolute;
  left:31px;
  right:25px;
  top:32px;
  font-size:.64rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#e4e8dc;
  font-weight:700;
}

.device {
  position:absolute;
  top:65px;
  left:50%;
  width:190px;
  aspect-ratio:9/19.5;
  transform:translateX(-50%) rotate(-5deg);
  border:6px solid #1c2528;
  border-radius:19px;
  box-shadow:14px 23px 30px #06151755;
  overflow:hidden;
  background:#263035;
}

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

.device video {
  display:block;
}

/* The phone fills the stage's height, but never so wide that it reaches the arrows (44px each, plus 8px of space). */
.showcase-stage .device {
  --phone-top:60px;
  box-sizing:content-box;
  top:var(--phone-top);
  width:auto;
  height:calc(100% - var(--phone-top) - 30px);
  height:min(calc(100cqh - var(--phone-top) - 30px), calc((100cqw - 2 * (var(--arrow-inset) + 52px)) * 19.5 / 9));
  transform:translateX(-50%);
}

.showcase-stage .device video {
  object-fit:contain;
}

/* A round play/pause button matching the arrows; the icon is drawn in CSS so phones can't swap it for an emoji. */
.video-toggle {
  position:absolute;
  right:var(--arrow-inset);
  bottom:23px;
  z-index:3;
}

.video-toggle::before {
  content:"";
  width:12px;
  height:14px;
  border-left:4px solid currentColor;
  border-right:4px solid currentColor;
  box-sizing:border-box;
}

.video-toggle.is-paused::before {
  width:0;
  height:0;
  margin-left:4px;
  border-right:0;
  border-left:12px solid currentColor;
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
}

.video-toggle:hover {
  background:var(--surface-light);
  border-color:var(--gold);
}

.video-fallback {
  display:block;
  text-align:center;
}

.showcase-controls {
  display:flex;
  justify-content:space-between;
  gap:4px;
  margin-top:16px;
  border-bottom:1px solid var(--line);
}

.showcase-controls button {
  flex:1;
  background:transparent;
  color:var(--muted);
  border:0;
  border-bottom:2px solid transparent;
  padding:10px 3px 12px;
  font-size:.75rem;
  line-height:1.3;
}

.showcase-controls button[aria-pressed=true] {
  color:var(--gold);
  border-bottom-color:var(--gold);
}

.showcase-controls button:hover {
  color:var(--paper);
}

.showcase-caption {
  margin-top:10px;
  min-height:2.8em;
  font-size:.75rem;
  color:#a9b7b3;
  text-align:center;
}

.player-quote {
  padding:31px 40px 39px;
  border-top:1px solid var(--line);
  display:grid;
  justify-items:center;
  text-align:center;
  gap:10px;
}

.review-stars {
  scroll-margin-top:-100px;
  color:var(--gold);
  font-size:.8rem;
  letter-spacing:.18em;
}

.player-quote blockquote {
  font-family:var(--serif);
  font-size:1.35rem;
  line-height:1.35;
  max-width:760px;
  margin:0;
  text-wrap:balance;
}

.player-quote figcaption {
  font-size:.73rem;
  color:#a9b7b3;
}

.section-space {
  padding-block:100px;
}

.feature-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px;
  align-items:center;
}

.history-section {
  background:var(--paper);
  color:var(--ink);
}

.history-section .eyebrow {
  color:#86532f;
}

.feature-copy h2,.section-heading h2 {
  font-size:clamp(2.6rem,4.8vw,4.1rem);
  line-height:1.03;
  letter-spacing:-.025em;
  margin-top:17px;
}

.feature-copy>p:not(.eyebrow) {
  margin-top:24px;
  max-width:410px;
  font-size:1.04rem;
  line-height:1.6;
}

.feature-copy>p+p:not(.eyebrow) {
  margin-top:16px;
}

.history-section h2 em {
  color:#8f402e;
}

.feature-copy .feature-footnote {
  font-size:.79rem!important;
  line-height:1.6!important;
  padding-top:8px;
  opacity:.85;
}

.editor-showcase {
  min-width:0;
}

.editor-crop {
  display:block;
  overflow:hidden;
  position:relative;
  border-radius:13px;
  border:7px solid #253337;
  box-shadow:15px 18px 0 #b79e6b44;
  aspect-ratio:.91;
  background:#10181b;
}

.editor-crop img {
  width:100%;
  max-width:none;
  height:auto;
  position:absolute;
  top:0;
  left:0;
}

.history-art {
  padding-right:20px;
}

.history-art .editor-crop {
  aspect-ratio:.85;
  transform:rotate(-3deg);
}

.history-art .editor-crop img {
  width:108.7%;
  transform:translate(-4%,-25%);
}

.editor-showcase figcaption {
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:center;
  font-size:.73rem;
  margin-top:27px;
  letter-spacing:.03em;
}

.editor-showcase figcaption>span {
  color:var(--wax);
  font-size:10px;
}

.custom-section {
  background:#1a2c32;
}

.custom-section .feature-copy>p:not(.eyebrow) {
  color:var(--muted);
}

.custom-art {
  padding:0 22px 0 0;
}

.custom-art .editor-crop {
  aspect-ratio:.88;
  transform:rotate(3deg);
  box-shadow:15px 18px 0 #d8b56a1a;
  border-color:#0d171b;
}

.custom-art figcaption {
  color:#c4cec7;
}

.extra-section {
  background:var(--ink);
}

.carousel-heading {
  margin-bottom:26px;
  font-family:var(--small-caps);
  font-size:clamp(1.45rem,3vw,2rem);
  font-weight:700;
  line-height:1.2;
  color:var(--gold);
}

.section-heading {
  max-width:630px;
  margin-bottom:54px;
}

.section-heading>p:last-child {
  margin-top:23px;
  color:var(--muted);
  font-size:1.05rem;
}

.extra-features {
  position:relative;
  display:flex;
  gap:24px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;
  scrollbar-width:thin;
  scrollbar-color:var(--gold-dark) transparent;
  padding-bottom:12px;
}

.extra-features:focus-visible {
  outline:3px solid var(--gold);
  outline-offset:6px;
}

.feature-carousel-row {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-items:center;
  gap:16px;
  min-width:0;
}

.feature-carousel-row.has-controls {
  grid-template-columns:44px minmax(0,1fr) 44px;
}

.feature-position {
  margin-top:14px;
  text-align:center;
  font-size:.83rem;
  letter-spacing:.05em;
  color:var(--muted);
}

.feature-arrow {
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border:1px solid var(--gold-dark);
  border-radius:50%;
  background:var(--surface);
  color:var(--gold);
  font-size:1.3rem;
}

.feature-arrow:hover:enabled {
  background:var(--surface-light);
  border-color:var(--gold);
}

.feature-arrow:disabled {
  opacity:.35;
  cursor:default;
}

.extra-feature {
  min-width:0;
  flex:0 0 100%;
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:48px;
  align-items:center;
  padding:36px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface);
  scroll-snap-align:start;
  scroll-snap-stop:always;
}

.feature-visual {
  --feature-image-height:360px;
  display:grid;
  place-items:center;
  min-width:0;
  height:var(--feature-image-height);
}

.feature-shot {
  display:block;
  position:relative;
  width:100%;
  max-width:390px;
  height:100%;
}

.feature-phone {
  display:block;
  position:absolute;
  top:0;
  left:3%;
  height:100%;
  aspect-ratio:var(--phone-aspect,.42857143);
  overflow:hidden;
  border-radius:13px;
  box-shadow:0 0 0 3px var(--deep),7px 12px 24px #0004;
}

.feature-phone img {
  display:block;
  width:100%;
  height:100%;
}

.feature-zoom {
  display:block;
  position:absolute;
  right:0;
  top:var(--zoom-top,50%);
  transform:translateY(-50%);
  width:var(--zoom-size,66%);
  aspect-ratio:var(--shot-aspect);
  overflow:hidden;
  border:2px solid var(--gold);
  border-radius:9px;
  box-shadow:0 12px 26px #0008;
  background:var(--surface);
}

.feature-zoom img {
  position:absolute;
  max-width:none;
  width:var(--shot-width);
  height:auto;
  top:0;
  left:0;
  transform:translate(var(--shot-x),var(--shot-y));
}

.shot-expand {
  position:absolute;
  right:9px;
  bottom:9px;
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
  border:1px solid var(--gold-dark);
  border-radius:4px;
  background:var(--ink);
  color:var(--gold);
  font-size:1rem;
}

.feature-shot:hover .feature-zoom {
  border-color:var(--gold);
}

.reroll-shot {
  --zoom-size:78%;
  --zoom-top:48%;
  --shot-aspect:2.5;
  --shot-width:136.708861%;
  --shot-x:-5.555556%;
  --shot-y:-41.269841%;
}

.total-shot {
  --shot-aspect:.86538462;
  --shot-width:150%;
  --shot-x:-33.333333%;
  --shot-y:-27.777778%;
}

.outcome-shot {
  --shot-aspect:.84705882;
  --shot-width:150%;
  --shot-x:-33.333333%;
  --shot-y:-27.777778%;
}

.formula-shot {
  --zoom-size:78%;
  --zoom-top:44%;
  --shot-aspect:1.22469136;
  --shot-width:108.870968%;
  --shot-x:-8.148148%;
  --shot-y:-18.650794%;
}

.saved-shot {
  --phone-aspect:.47787611;
  --zoom-size:68%;
  --zoom-top:24%;
  --shot-aspect:2.04511278;
  --shot-width:198.529412%;
  --shot-x:-7.037037%;
  --shot-y:-14.778761%;
}

.extra-copy {
  margin-top:0;
}

.extra-copy h3 {
  font-family:var(--serif);
  font-weight:500;
  font-size:2.2rem;
  line-height:1.13;
  color:var(--paper);
  text-wrap:balance;
}

.extra-copy .pro-label {
  font-family:var(--sans);
  font-weight:400;
  vertical-align:middle;
  margin-left:5px;
}

.extra-copy p {
  font-size:.97rem;
  line-height:1.6;
  color:var(--muted);
  margin-top:14px;
  max-width:490px;
}

details {
  border-bottom:1px solid var(--line);
}

summary {
  list-style:none;
  display:flex;
  align-items:center;
  gap:12px;
  padding:21px 0;
  font-size:1.1rem;
  font-weight:500;
  line-height:1.3;
}

summary::-webkit-details-marker {
  display:none;
}

.detail-mark {
  margin-left:auto;
  font-family:var(--sans);
  font-size:1.3rem;
  font-weight:400;
  color:var(--gold);
}

details[open]>summary>.detail-mark {
  transform:rotate(45deg);
}

.inline-link {
  display:inline-block;
  font-size:.82rem;
  color:var(--gold);
  margin-top:13px;
  text-decoration:none;
}

.inline-link:hover {
  text-decoration:underline;
}

.pro-label {
  display:inline-block;
  padding:3px 7px;
  background:#ddbe7c1a;
  color:var(--gold);
  font-size:.6rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}

code {
  font-size:.8em;
  background:#0004;
  border-radius:3px;
  padding:3px 5px;
}

.reassurance-strip {
  background:var(--surface);
  border-block:1px solid #ddbe7c20;
  padding-block:47px;
}

.reassurance-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:55px;
}

.reassurance-grid>div>span {
  color:var(--gold);
  font-size:1.5rem;
  line-height:1;
}

.reassurance-grid h3 {
  font-family:var(--small-caps);
  font-size:1.16rem;
  color:var(--paper);
  margin-top:10px;
  font-weight:700;
}

.reassurance-grid p {
  margin-top:8px;
  color:var(--muted);
  font-size:.89rem;
  max-width:290px;
  line-height:1.6;
}

.pricing-section {
  background:var(--deep);
}

.pricing-section .section-heading {
  margin-inline:auto;
  text-align:center;
}

.plans {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  max-width:930px;
  margin-inline:auto;
}

.plan {
  position:relative;
  padding:36px 38px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--ink);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  isolation:isolate;
}

.plan::after {
  content:"";
  position:absolute;
  inset:7px;
  border:1px dashed #ddbe7c33;
  border-radius:5px;
  pointer-events:none;
  z-index:-1;
}

.plan h3 {
  font-family:var(--serif);
  font-size:3rem;
  line-height:1.2;
  font-weight:500;
  margin-top:9px;
}

.plan-description {
  color:var(--muted);
  font-size:.92rem;
  margin-top:10px;
  min-height:2.8em;
}

.plan ul {
  padding:0;
  list-style:none;
  display:grid;
  gap:14px;
  margin:28px 0;
  font-size:.91rem;
  line-height:1.4;
}

.plan li {
  position:relative;
  padding-left:21px;
}

.plan li::before {
  content:"✓";
  position:absolute;
  left:0;
  color:var(--gold);
}

.plan .button {
  margin-top:auto;
}

.plan-pro {
  border-color:var(--gold-dark);
  background:var(--surface);
}

.plan-pro h3 {
  color:var(--gold);
}

.plan-note {
  font-size:.83rem;
  color:var(--muted);
  padding-block:14px;
  margin-top:auto;
}

.full-comparison {
  max-width:930px;
  margin:30px auto 0;
  border-top:1px solid var(--line);
}

.full-comparison>summary {
  font-size:.9rem;
  justify-content:center;
  gap:20px;
}

.full-comparison>summary>.detail-mark {
  margin-left:0;
}

.comparison-scroll {
  overflow-x:auto;
  padding-bottom:25px;
}

table {
  width:100%;
  border-collapse:collapse;
  font-size:.82rem;
  text-align:left;
}

th,td {
  padding:13px 12px;
  border-bottom:1px solid var(--line);
}

thead th {
  color:var(--gold);
  font-size:.93rem;
}

tbody th {
  font-weight:400;
}

td {
  color:var(--muted);
}

td:nth-child(n+2),thead th:nth-child(n+2) {
  text-align:center;
}

.closing-section {
  background:#243c3d;
  padding-block:75px 85px;
  position:relative;
  isolation:isolate;
}

.closing-section::before {
  content:"";
  position:absolute;
  inset:16px;
  border:1px solid #d8b56a28;
  z-index:-1;
  pointer-events:none;
}

.closing-inner {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.closing-inner>img {
  width:76px;
  height:76px;
  border-radius:18px;
  margin-bottom:21px;
}

.closing-inner h2 {
  font-size:clamp(2.7rem,5.6vw,4.6rem);
  line-height:1.04;
  letter-spacing:-.025em;
  margin-block:18px 28px;
}

.closing-inner>p:last-child {
  font-size:.8rem;
  margin-top:15px;
  color:var(--muted);
}

.site-footer {
  padding-block:39px 30px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:24px;
}

.site-footer nav {
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  margin-left:auto;
}

.site-footer nav a {
  font-size:.8rem;
  color:var(--muted);
  text-decoration:none;
}

.site-footer nav a:hover {
  color:var(--gold);
}

.footer-notes {
  width:100%;
  border-top:1px solid var(--line);
  padding-top:20px;
  display:flex;
  flex-wrap:wrap;
  gap:12px 25px;
  color:#9cadab;
  font-size:.71rem;
}

.image-viewer {
  padding:0;
  border:0;
  background:transparent;
  max-width:94vw;
  max-height:92vh;
  overflow:visible;
}

.image-viewer::backdrop {
  background:#070d10ed;
}

.image-viewer>img {
  max-width:90vw;
  max-height:88vh;
  object-fit:contain;
  width:auto;
  height:auto;
  border-radius:9px;
  box-shadow:0 15px 65px #0008;
}

.image-viewer form {
  position:absolute;
  right:-9px;
  top:-16px;
}

.viewer-close {
  width:44px;
  height:44px;
  display:grid;
  place-content:center;
  border:1px solid var(--gold);
  border-radius:50%;
  background:var(--surface);
  color:var(--paper);
  font-size:30px;
  line-height:1;
}

.screenshot-link {
  cursor:zoom-in;
}

@media(min-width:1450px) {
  .hero {
    gap:90px;
  }
  .showcase-stage {
    height:595px;
  }
  .device {
    top:92px;
  }
}

@media(max-width:1100px) {
  .wrap {
    width:calc(100% - 64px);
  }
  .hero {
    gap:35px;
    padding-top:55px;
  }
  h1 {
    font-size:clamp(3.3rem,7.2vw,4.7rem);
  }
  .showcase-stage {
    height:525px;
  }
  .header-links {
    gap:22px;
    margin-right:0;
  }
  .feature-layout {
    gap:60px;
  }
  .extra-feature {
    gap:30px;
    padding:28px;
  }
  .feature-visual {
    --feature-image-height:320px;
  }
  .plan {
    padding:32px 27px;
  }
  .hero-actions {
    gap:12px 20px;
  }
  .hero-actions .button {
    padding:13px 18px;
  }
  .showcase-controls button {
    font-size:.69rem;
  }
}

@media(max-width:800px) {
  .showcase-stage {
    --arrow-inset:12px;
  }
  .header-inner {
    min-height:78px;
    gap:14px;
  }
  .header-links {
    gap:18px;
  }
  .header-links a {
    font-size:.76rem;
  }
  .hero {
    gap:28px;
    padding-block:43px 48px;
    grid-template-columns:1fr 1fr;
  }
  .app-identity {
    font-size:1.03rem;
    margin-bottom:22px;
  }
  .app-identity img {
    width:43px;
    height:43px;
  }
  .identity-subtitle {
    font-size:.62rem;
  }
  h1 {
    font-size:clamp(2.9rem,7.9vw,4rem);
  }
  .hero-description {
    font-size:.96rem;
    margin-top:23px;
  }
  .hero-actions {
    margin-top:23px;
  }
  .hero-actions .text-link {
    display:none;
  }
  .hero-reassurance {
    font-size:.74rem;
    gap:7px;
  }
  .showcase-stage {
    height:465px;
  }
  .showcase-eyebrow {
    font-size:.55rem;
    left:24px;
    top:28px;
  }
  .device {
    top:65px;
    width:156px;
    border-width:6px;
    border-radius:19px;
  }
  .showcase-controls {
    gap:7px;
    margin-top:12px;
  }
  .showcase-controls button {
    padding:9px 0;
    font-size:.65rem;
  }
  .showcase-caption {
    font-size:.69rem;
  }
  .player-quote {
    padding:25px 15px 32px;
  }
  .player-quote blockquote {
    font-size:1.2rem;
  }
  .section-space {
    padding-block:70px;
  }
  .feature-layout {
    gap:42px;
  }
  .feature-copy h2,.section-heading h2 {
    font-size:2.8rem;
  }
  .feature-copy>p:not(.eyebrow) {
    font-size:.96rem;
  }
  .editor-showcase {
    padding-right:10px;
  }
  .feature-footnote {
    font-size:.73rem!important;
  }
  .section-heading {
    margin-bottom:38px;
  }
  .extra-copy h3 {
    font-size:1.5rem;
  }
  .extra-copy p {
    font-size:.93rem;
  }
  .reassurance-grid {
    gap:25px;
  }
  .reassurance-grid h3 {
    font-size:1.03rem;
  }
  .reassurance-grid p {
    font-size:.83rem;
  }
  .plans {
    gap:20px;
  }
  .plan {
    padding:28px 23px;
  }
  .plan-description {
    font-size:.85rem;
  }
  .plan ul {
    font-size:.84rem;
  }
  .plan .button {
    font-size:.82rem;
    padding-inline:15px;
  }
  .site-footer nav {
    gap:18px;
  }
}

@media(max-width:620px) {
  :root {
    font-size:18px;
  }
  .wrap {
    width:calc(100% - 40px);
  }
  .header-inner {
    min-height:72px;
  }
  .studio-name {
    font-size:1.06rem;
  }
  .studio-name>span {
    margin-left:11px;
  }
  .header-links {
    display:none;
  }
  .button-small {
    min-height:40px;
    padding:8px 13px;
    font-size:.76rem;
    gap:13px;
  }
  .hero {
    grid-template-columns:1fr;
    padding-block:35px 27px;
    gap:35px;
  }
  .hero-copy {
    max-width:470px;
  }
  .app-identity {
    margin-bottom:21px;
    font-size:1.1rem;
  }
  .app-identity img {
    width:45px;
    height:45px;
  }
  .identity-subtitle {
    font-size:.66rem;
  }
  h1 {
    font-size:clamp(3.6rem,13.3vw,4.8rem);
    line-height:.98;
  }
  .hero-description {
    font-size:1rem;
    max-width:360px;
  }
  .hero-actions {
    gap:15px 23px;
  }
  .hero-actions .text-link {
    display:inline-flex;
  }
  .hero-actions .button {
    font-size:.86rem;
  }
  .hero-reassurance {
    margin-top:18px;
    font-size:.8rem;
    gap:10px;
  }
  .android-note {
    font-size:.71rem;
  }
  .showcase-stage {
    height:505px;
  }
  .device {
    top:65px;
    width:170px;
    border-width:6px;
    border-radius:19px;
  }
  .showcase-eyebrow {
    font-size:.6rem;
    top:29px;
    left:28px;
  }
  .showcase-controls {
    gap:10px;
  }
  .showcase-controls button {
    font-size:.74rem;
    min-height:48px;
  }
  .showcase-caption {
    font-size:.73rem;
    min-height:0;
  }
  .player-quote {
    padding:23px 8px 34px;
    gap:11px;
  }
  .player-quote blockquote {
    font-size:1.18rem;
  }
  .player-quote figcaption {
    font-size:.7rem;
  }
  .section-space {
    padding-block:57px;
  }
  .feature-layout {
    grid-template-columns:1fr;
    gap:35px;
  }
  .feature-copy h2,.section-heading h2 {
    font-size:3rem;
  }
  .feature-copy>p:not(.eyebrow) {
    font-size:1rem;
    max-width:440px;
  }
  .feature-copy .feature-footnote {
    font-size:.8rem!important;
  }
  .feature-copy {
    order:-1;
  }
  .editor-showcase {
    width:min(100% - 16px,390px);
    padding-right:8px;
    margin-inline:auto;
  }
  .editor-showcase .editor-crop {
    aspect-ratio:.99;
  }
  .custom-art .editor-crop {
    aspect-ratio:.94;
  }
  .history-art .editor-crop {
    aspect-ratio:.85;
  }
  .editor-showcase figcaption {
    margin-top:22px;
    font-size:.7rem;
  }
  .extra-feature {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:24px;
    padding:20px;
  }
  .feature-carousel-row.has-controls {
    --mobile-image-height:260px;
    grid-template-columns:minmax(0,1fr);
    gap:0;
  }
  .feature-carousel-row>.extra-features,
  .feature-carousel-row>.feature-arrow {
    grid-column:1;
    grid-row:1;
  }
  .feature-carousel-row>.feature-arrow {
    position:relative;
    z-index:2;
    align-self:start;
    margin-top:calc(20px + var(--mobile-image-height) / 2 - 22px);
    box-shadow:0 4px 14px #0008;
  }
  #feature-previous {
    justify-self:start;
    transform:translateX(-20px);
  }
  #feature-next {
    justify-self:end;
    transform:translateX(20px);
  }
  .feature-visual {
    --feature-image-height:var(--mobile-image-height,260px);
    flex:0 0 var(--feature-image-height);
  }
  .extra-copy {
    flex:1;
  }
  .extra-copy h3 {
    font-size:1.65rem;
  }
  .extra-copy p {
    font-size:1rem;
  }
  .section-heading>p:last-child {
    font-size:1rem;
  }
  .eyebrow {
    font-size:.68rem;
  }
  .reassurance-strip {
    padding-block:36px;
  }
  .reassurance-grid {
    grid-template-columns:1fr;
    gap:28px;
  }
  .reassurance-grid>div {
    display:grid;
    grid-template-columns:27px 1fr;
    column-gap:13px;
  }
  .reassurance-grid>div>span {
    grid-column:1;
    grid-row:1/3;
    font-size:1.35rem;
    padding-top:4px;
  }
  .reassurance-grid h3 {
    margin-top:0;
    font-size:1.17rem;
  }
  .reassurance-grid p {
    font-size:.91rem;
    max-width:390px;
    grid-column:2;
    margin-top:5px;
  }
  .plans {
    grid-template-columns:1fr;
    gap:23px;
  }
  .plan {
    padding:29px 31px;
  }
  .plan-description {
    font-size:.95rem;
    min-height:0;
  }
  .plan ul {
    font-size:.94rem;
    gap:14px;
    margin-block:23px;
  }
  .plan .button {
    font-size:.91rem;
  }
  .plan-note {
    font-size:.86rem;
    padding-block:4px;
  }
  .full-comparison {
    margin-top:20px;
  }
  table {
    font-size:.73rem;
  }
  th,td {
    padding:12px 7px;
  }
  .closing-section {
    padding-block:56px 62px;
  }
  .closing-section::before {
    inset:10px;
  }
  .closing-inner h2 {
    font-size:2.95rem;
  }
  .closing-inner>img {
    width:68px;
    height:68px;
  }
  .site-footer {
    padding-block:30px 25px;
    gap:22px;
  }
  .site-footer nav {
    width:100%;
    margin-left:0;
    gap:23px;
  }
  .site-footer nav a {
    font-size:.8rem;
  }
  .footer-notes {
    font-size:.7rem;
    gap:8px 20px;
  }
  .image-viewer>img {
    max-width:89vw;
    max-height:84vh;
  }
}

@media(max-width:360px) {
  /* Room for the top line to wrap onto two lines. */
  .showcase-stage .device {
    --phone-top:72px;
  }
  .feature-carousel-row.has-controls {
    --mobile-image-height:230px;
  }
  #feature-previous {
    transform:translateX(-16px);
  }
  #feature-next {
    transform:translateX(16px);
  }
  .wrap {
    width:calc(100% - 32px);
  }
  h1 {
    font-size:3.4rem;
  }
  .hero-actions {
    gap:10px;
  }
  .hero-actions .text-link {
    font-size:.8rem;
  }
  .hero-actions .button {
    font-size:.8rem;
    padding-inline:14px;
    gap:13px;
  }
  .showcase-stage {
    height:435px;
  }
  .device {
    top:62px;
    width:145px;
  }
  .showcase-controls button {
    font-size:.66rem;
  }
  .feature-copy h2,.section-heading h2 {
    font-size:2.6rem;
  }
  .closing-inner h2 {
    font-size:2.5rem;
  }
  .plan {
    padding:27px;
  }
  .player-quote blockquote {
    font-size:1.1rem;
  }
}

@media(prefers-reduced-motion:reduce) {
  :root {
    scroll-behavior:auto;
  }
  .button {
    transition:none;
  }
  .button:hover {
    transform:none;
  }
}