/* Shared product foundation. Loaded last on every route. */
:root {
  --secondary:#68686d;
  --tertiary:#727278;
  --content:1120px;
  --header-height:72px
}
@media(prefers-color-scheme:dark) {
  :root {
    --secondary:#adadb2;
    --tertiary:#a2a2a8
  }
}
html {
  scroll-padding-top:100px
}
body {
  overflow-x:clip
}
a,button,input {
  touch-action:manipulation
}
button,a {
  -webkit-tap-highlight-color:transparent
}
.skip-link {
  position:fixed;
  top:-100px;
  left:16px;
  z-index:200;
  padding:12px 18px;
  background:var(--text);
  color:var(--background);
  border-radius:10px
}
.skip-link:focus {
  top:12px
}
.site-header,.topbar {
  position:sticky;
  top:0;
  z-index:30;
  pointer-events:auto;
  background:color-mix(in srgb,var(--background) 94%,transparent);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(16px)
}
.site-header-inner,.topbar-inner {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  width:100%;
  max-width:var(--content);
  min-height:calc(var(--header-height) + var(--safe-top));
  margin:0 auto;
  padding:calc(14px + var(--safe-top)) 0 14px
}
.site-brand {
  display:inline-flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
  color:var(--text);
  font-size:15px;
  letter-spacing:-.025em;
  font-weight:600;
  text-decoration:none
}
.site-brand img {
  width:28px;
  height:28px;
  border-radius:8px
}
.site-nav {
  display:flex;
  align-items:center;
  gap:30px;
  margin-left:auto
}
.site-nav a {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  color:var(--secondary);
  font-size:13px;
  font-weight:500;
  text-decoration:none;
  white-space:nowrap
}
.site-nav a:hover,.site-nav a[aria-current] {
  color:var(--text)
}
.site-nav a[aria-current] {
  text-decoration:underline;
  text-underline-offset:8px;
  text-decoration-color:var(--line-strong)
}
.header-action {
  display:inline-flex;
  align-items:center;
  gap:24px;
  min-height:40px;
  padding:8px 16px;
  border:1px solid var(--line-strong);
  border-radius:999px;
  color:var(--text);
  text-decoration:none;
  font-size:13px;
  font-weight:500;
  background:var(--surface)
}
.gear-button {
  position:static;
  width:40px;
  height:40px;
  flex:0 0 auto;
  font-size:18px;
  box-shadow:none
}
.gear-button .icon {
  width:20px;
  height:20px
}
.topbar-title {
  display:none!important
}
.topbar.has-title .site-nav {
  display:flex
}
.mobile-menu {
  display:none
}
.mobile-menu summary {
  cursor:pointer;
  list-style:none;
  font-size:13px;
  font-weight:500;
  min-height:44px;
  display:flex;
  align-items:center;
  gap:8px
}
.mobile-menu summary::-webkit-details-marker {
  display:none
}
.mobile-menu nav {
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  width:230px;
  display:flex;
  flex-direction:column;
  padding:8px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--surface);
  box-shadow:var(--shadow-float)
}
.mobile-menu nav a {
  padding:12px;
  color:var(--text);
  font-size:14px;
  text-decoration:none;
  border-radius:8px
}
.mobile-menu nav a:hover {
  background:var(--fill)
}
.view-search {
  max-width:none;
  padding:0
}
.home {
  min-height:calc(100svh - var(--header-height) - var(--safe-top));
  display:grid;
  place-items:center;
  position:relative;
  max-width:none;
  padding:40px 24px 90px;
  margin:0;
  isolation:isolate
}
.home-center {
  width:100%;
  max-width:560px;
  display:flex;
  flex-direction:column;
  align-items:center;
  position:relative
}
.home .search-hero {
  position:static;
  inset:auto;
  width:100%;
  margin:0 0 30px
}
.search-hero h1 {
  font-size:clamp(36px,4vw,52px);
  font-weight:500;
  letter-spacing:-.055em;
  line-height:1.08;
  margin-bottom:14px
}
.search-hero p {
  font-size:clamp(15px,1.5vw,18px);
  color:var(--secondary)
}
.home .photo-actions {
  position:static;
  inset:auto;
  width:100%;
  max-width:none;
  margin:0;
  gap:12px
}
.photo-entry {
  width:100%;
  min-height:76px;
  border-radius:24px;
  border:1px solid var(--line);
  background:var(--surface);
  padding:0 24px;
  box-shadow:0 3px 14px #00000003;
  transition:border-color .15s,box-shadow .15s;
  font-size:19px
}
.photo-entry:hover {
  border-color:var(--line-strong);
  box-shadow:0 5px 20px #00000007
}
.photo-entry .icon {
  width:24px;
  height:24px
}
.photo-entry-plus {
  margin-left:auto
}
.camera-button {
  min-height:44px;
  margin:0;
  color:var(--secondary);
  font-size:14px
}
.camera-button .icon {
  width:19px;
  height:19px
}

.example-link {
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:36px;
  min-height:44px;
  font-size:13px;
  color:var(--text);
  text-underline-offset:5px;
  text-decoration-color:var(--line-strong)
}
.home-marketing {
  max-width:var(--content);
  margin:0 auto;
  padding:0 0 112px
}
.home-marketing>.recent-block {
  max-width:680px;
  margin:0 auto 80px;
  padding:0
}
.editorial-section {
  padding:72px 0;
  border-top:1px solid var(--line);
  margin:0
}
.section-heading-wide {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:48px;
  margin-bottom:36px
}
.section-heading-wide>p {
  max-width:300px;
  font-size:14px;
  color:var(--secondary);
  margin:0
}
.eyebrow {
  font-size:11px;
  line-height:1.4;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:600;
  color:var(--secondary);
  margin:0 0 14px
}
.editorial-section h2,.support-strip h2 {
  font-size:clamp(26px,3.3vw,38px);
  letter-spacing:-.045em;
  line-height:1.12;
  font-weight:500;
  margin:0
}
.three-columns {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:48px
}
.three-columns h3 {
  margin:20px 0 10px;
  font-size:17px;
  font-weight:600;
  letter-spacing:-.02em
}
.three-columns p {
  font-size:14px;
  line-height:1.7;
  color:var(--secondary);
  margin:0
}
.feature-symbol {
  font-size:26px;
  font-weight:400
}
.compact-faq {
  display:grid;
  grid-template-columns:1fr 1.5fr;
  gap:80px
}
.compact-faq .inline-link {
  margin-top:20px
}
.faq-list {
  border-top:1px solid var(--line)
}
.faq-list summary {
  font-size:15px;
  padding:22px 36px 22px 0;
  min-height:66px;
  font-weight:500;
  line-height:1.5;
  list-style:none;
  position:relative;
  cursor:pointer
}
.faq-list summary::-webkit-details-marker {
  display:none
}
.faq-list details {
  border-bottom:1px solid var(--line)
}
.faq-list summary:after {
  content:'+';
  position:absolute;
  right:4px;
  top:20px;
  font-size:20px;
  font-weight:400;
  color:var(--secondary)
}
.faq-list details[open] summary:after {
  content:'−'
}
.faq-list details p {
  font-size:14px;
  color:var(--secondary);
  line-height:1.75;
  margin:0 36px 24px 0;
  max-width:720px
}
/* Walkthrough: useful, user-controlled, and entirely local. */
.example {
  border:1px solid var(--line);
  border-radius:24px;
  background:var(--surface);
  overflow:hidden
}
.example-controls {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px 28px;
  border-bottom:1px solid var(--line)
}
.example-controls .eyebrow {
  margin:0
}
.example-counter {
  font-size:12px;
  color:var(--secondary);
  font-variant-numeric:tabular-nums
}
.example-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:410px
}
.example-visual {
  display:grid;
  place-items:center;
  padding:36px;
  background:var(--surface-muted);
  border-right:1px solid var(--line)
}
.example-stage {
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:320px
}
.example-photo {
  position:relative;
  width:214px;
  height:236px;
  border-radius:10px;
  overflow:hidden;
  box-shadow:var(--shadow-soft)
}
.example-photo>img {
  width:100%;
  height:100%;
  object-fit:cover
}
.example img.guide-portrait { object-position:50% 35%; }
.example-photo .crop-corner { border-color:#6e7b74; }
.crop-corner {
  position:absolute;
  width:24px;
  height:24px;
  border-color:#fff;
  border-style:solid;
  border-width:0
}
.tl {
  top:12px;
  left:12px;
  border-top-width:2px;
  border-left-width:2px
}
.tr {
  top:12px;
  right:12px;
  border-top-width:2px;
  border-right-width:2px
}
.bl {
  bottom:12px;
  left:12px;
  border-bottom-width:2px;
  border-left-width:2px
}
.br {
  bottom:12px;
  right:12px;
  border-bottom-width:2px;
  border-right-width:2px
}
.visual-caption {
  font-size:11px;
  color:var(--secondary);
  margin-top:20px
}
.example-copy {
  padding:30px;
  display:flex;
  flex-direction:column;
  justify-content:center
}
.example-steps {
  margin:0;
  padding:0;
  list-style:none
}
.example-steps button {
  display:flex;
  align-items:flex-start;
  gap:18px;
  width:100%;
  border:0;
  background:none;
  text-align:left;
  padding:18px 0;
  color:var(--secondary)
}
.example-steps button>span {
  font-family:var(--mono);
  font-size:11px;
  line-height:24px
}
.example-steps h3 {
  font-size:17px;
  font-weight:500;
  margin:0 0 6px;
  letter-spacing:-.02em
}
.example-steps p {
  font-size:13px;
  line-height:1.6;
  margin:0;
  color:var(--secondary)
}
.example-steps button[aria-current] {
  color:var(--text)
}
.example-steps button[aria-current]>span {
  background:var(--text);
  color:var(--background);
  border-radius:50%;
  min-width:26px;
  height:26px;
  text-align:center;
  margin-left:-4px;
  margin-right:-4px;
  line-height:26px
}
.example-next {
  justify-content:flex-start;
  color:var(--text);
  font-size:13px;
  padding:10px 0
}
.example-disclaimer {
  font-size:11px;
  line-height:1.6;
  color:var(--secondary);
  margin:8px 0 0
}
.example-order {
  max-width:280px;
  width:100%;
  text-align:center;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  padding:24px
}
.example-order>img {
  width:60px;
  height:60px;
  object-fit:cover;
  border-radius:16px
}
.example-order h3 {
  font-size:22px;
  margin:12px 0 20px;
  letter-spacing:-.03em;
  font-weight:500
}
.example-order>div {
  display:flex;
  justify-content:space-between;
  font-size:14px;
  padding-top:16px;
  border-top:1px solid var(--line)
}
.example-order p {
  font-size:12px;
  color:var(--secondary)
}
.example-payment {
  display:block;
  background:var(--text);
  color:var(--background);
  font-size:12px;
  border-radius:10px;
  padding:12px;
  margin-top:20px
}
.example-results {
  width:100%;
  max-width:330px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  padding:22px
}
.example-results-title {
  font-size:18px;
  letter-spacing:-.03em
}
.example-results>div {
  display:flex;
  gap:12px;
  align-items:center;
  border-bottom:1px solid var(--line);
  padding:18px 0
}
.example-results img {
  width:56px;
  height:62px;
  object-fit:cover;
  border-radius:10px
}
.example-results strong {
  font-size:13px;
  font-weight:500
}
.example-results small {
  display:block;
  font-size:11px;
  color:var(--secondary);
  margin-top:4px
}
.example-results b {
  font-size:12px;
  font-weight:500;
  margin-left:auto;
  background:var(--surface-muted);
  padding:4px 6px;
  border-radius:6px
}
.example-results>p {
  font-size:10px;
  color:var(--secondary);
  margin:16px 0 0
}
.example-result-note {
  font-size:12px;
  color:var(--secondary);
  padding:10px 14px;
  background:var(--surface-muted);
  border-radius:10px;
  margin:20px 0 20px
}
/* Content, company and legal pages share the same chrome and reading rhythm. */
.content-main {
  width:100%;
  max-width:var(--content);
  margin:0 auto;
  padding:0 0 100px
}
.page-intro {
  padding:80px 0 56px;
  max-width:820px
}
.page-intro h1 {
  font-size:clamp(36px,5vw,58px);
  letter-spacing:-.055em;
  line-height:1.07;
  font-weight:500;
  margin:0 0 22px
}
.page-description {
  font-size:17px;
  line-height:1.65;
  color:var(--secondary);
  max-width:620px;
  margin:0
}
.prose {
  max-width:760px
}
.prose p,.prose li {
  font-size:15px;
  line-height:1.85;
  color:var(--secondary)
}
.prose h2 {
  font-size:24px;
  line-height:1.3;
  font-weight:500;
  letter-spacing:-.03em;
  margin:40px 0 14px;
  scroll-margin-top:100px
}
.prose h3 {
  font-size:17px;
  margin-top:28px
}
.prose ul {
  padding-left:22px
}
.prose a {
  color:var(--text);
  text-underline-offset:4px
}
.document-layout {
  display:grid;
  grid-template-columns:220px minmax(0,760px);
  gap:60px
}
.document-nav {
  align-self:start;
  position:sticky;
  top:100px;
  display:flex;
  flex-direction:column;
  gap:4px;
  border-left:1px solid var(--line);
  padding-left:18px
}
.document-nav a {
  font-size:12px;
  line-height:1.6;
  padding:7px 0;
  color:var(--secondary);
  text-decoration:none
}
.document-nav a:hover {
  color:var(--text)
}
.document-meta {
  font-size:12px;
  color:var(--secondary);
  margin:0 0 30px
}
.notice {
  padding:18px 22px;
  background:var(--surface-muted);
  border:1px solid var(--line);
  border-radius:14px;
  font-size:14px;
  line-height:1.7;
  color:var(--secondary);
  margin-bottom:28px
}
.prose .notice p {
  margin:0;
  font-size:14px
}
.support-strip {
  padding:40px 0;
  margin-top:56px;
  border-top:1px solid var(--line)
}
.support-strip p {
  font-size:14px;
  color:var(--secondary)
}
.support-strip a {
  font-size:14px;
  color:var(--text);
  text-underline-offset:5px
}
.pricing-layout {
  display:grid;
  grid-template-columns:minmax(0,430px) minmax(0,1fr);
  gap:100px
}
.price-card {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:24px;
  padding:36px
}
.price-card h2 {
  font-weight:500;
  font-size:23px;
  letter-spacing:-.03em;
  margin:18px 0
}
.price-amount {
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px 8px;
  font-size:64px;
  line-height:1.1;
  letter-spacing:-.06em;
  margin:22px 0
}
.price-amount .price-currency {
  font-size:14px;
  letter-spacing:0;
  color:var(--secondary)
}
.price-card>p:not(.price-amount) {
  color:var(--secondary);
  font-size:13px
}
.clean-list {
  padding:24px 0;
  list-style:none;
  margin:24px 0;
  border-top:1px solid var(--line)
}
.clean-list li {
  position:relative;
  padding:9px 0 9px 24px;
  color:var(--secondary);
  font-size:14px
}
.clean-list li:before {
  content:'✓';
  position:absolute;
  left:0;
  color:var(--text)
}
.price-card .primary-button {
  font-size:15px;
  min-height:50px;
  border-radius:14px
}
.price-card .small-copy {
  font-size:11px;
  line-height:1.6;
  text-align:center;
  margin:16px 0 0
}
.price-context {
  padding:24px 0
}
.price-context h2 {
  font-size:27px;
  letter-spacing:-.04em;
  font-weight:500;
  margin:0 0 32px
}
.price-context h3 {
  font-size:16px;
  font-weight:500;
  margin:24px 0 10px
}
.price-context p {
  font-size:14px;
  color:var(--secondary);
  line-height:1.75
}
.article-filters {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding-bottom:32px
}
.learn-tab {
  border:1px solid var(--line);
  background:transparent;
  color:var(--secondary);
  font-size:13px;
  border-radius:999px;
  min-height:42px;
  padding:9px 17px
}
.learn-tab[aria-pressed=true] {
  background:var(--text);
  color:var(--background);
  border-color:var(--text)
}
.article-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px
}
.article-card {
  display:flex;
  flex-direction:column;
  min-height:262px;
  padding:26px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--surface);
  color:var(--text);
  text-decoration:none;
  transition:border-color .15s
}
.article-card:hover {
  border-color:var(--line-strong)
}
.article-card h3 {
  font-size:22px;
  font-weight:500;
  letter-spacing:-.035em;
  line-height:1.25;
  margin:25px 0 12px
}
.article-card p {
  color:var(--secondary);
  font-size:13px;
  line-height:1.7;
  margin:0
}
.article-meta {
  font-size:10px;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--secondary)
}
.article-read {
  margin-top:auto;
  padding-top:28px;
  font-size:12px;
  color:var(--text)
}
.article-standfirst {
  font-size:19px!important;
  color:var(--text)!important;
  line-height:1.65!important
}
.article-back {
  display:inline-block;
  font-size:13px;
  color:var(--secondary);
  margin:36px 0 0;
  text-decoration:none
}
.related-reading {
  margin-top:60px;
  border-top:1px solid var(--line);
  padding-top:28px
}
.empty-library {
  padding:40px 0
}
.empty-library h2 {
  font-size:22px;
  font-weight:500
}
.empty-library p {
  font-size:14px;
  color:var(--secondary)
}
.unified-footer {
  max-width:var(--content);
  margin:0 auto;
  padding:44px 0 26px;
  border-top:1px solid var(--line)
}
.footer-grid {
  display:grid;
  grid-template-columns:1.6fr repeat(4,1fr);
  gap:32px
}
.footer-brand p {
  font-size:12px;
  line-height:1.6;
  color:var(--secondary);
  max-width:190px;
  margin:14px 0
}
.footer-column {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:0
}
.footer-column h3 {
  font-size:11px;
  text-transform:none;
  letter-spacing:0;
  margin:6px 0 14px;
  font-weight:600
}
.footer-column a,.footer-link-button {
  font-size:12px;
  color:var(--secondary);
  min-height:36px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  line-height:1.5;
  background:none;
  border:0;
  padding:4px 0;
  text-align:left
}
.footer-column a:hover {
  color:var(--text);
  text-decoration:underline;
  text-underline-offset:3px
}
.footer-bottom {
  display:flex;
  justify-content:space-between;
  gap:24px;
  margin-top:40px;
  padding-top:24px;
  border-top:1px solid var(--line);
  color:var(--secondary);
  font-size:11px
}
.footer-bottom p {
  margin:0
}
.footer-link-button {
  margin-top:14px;
  text-decoration:underline;
  text-underline-offset:4px
}
.tabbar {
  z-index:32
}
.storage-banner {
  bottom:calc(var(--safe-bottom) + 90px);
  border-radius:16px;
  border:1px solid var(--line);
  padding:12px 16px;
  max-width:380px
}
.storage-banner-copy strong {
  font-size:12px
}
.storage-banner-copy span {
  font-size:11px
}
.storage-banner-icon {
  background:var(--surface-muted);
  color:var(--secondary)
}
.storage-banner-action {
  color:var(--text)
}
.consent-pending .camera-button {
  display:inline-flex
}
.settings-section {
  margin-bottom:26px
}
.settings-group {
  border-radius:14px;
  box-shadow:none;
  border:1px solid var(--line)
}
.settings-row {
  min-height:64px
}
.settings-label {
  font-size:11px;
  letter-spacing:.06em;
  color:var(--secondary)
}
.settings-icon {
  color:var(--secondary)
}
.settings-copy>span {
  font-size:14px
}
.settings-copy small {
  font-size:12px
}
.settings-about p {
  font-size:11px
}
.app-identity {
  border:0;
  background:none;
  padding:12px 0 24px
}
.sheet-nav {
  border-bottom:1px solid var(--line);
  padding:18px 24px
}
.sheet-nav h2 {
  font-size:18px;
  letter-spacing:-.03em
}
.sheet-scroll {
  padding:24px
}
.sheet-panel {
  border-radius:24px 24px 0 0;
  max-height:92dvh
}
.sheet-dialog {
  background:transparent
}
.screen-topbar {
  border-bottom:1px solid var(--line)
}
.screen-topbar h2 {
  font-size:14px
}
.consent-copy {
  font-size:11px;
  line-height:1.65
}
.consent-row .switch-label {
  font-size:12px;
  line-height:1.6
}
.search-photo-wrap {
  position:relative;
  box-shadow:none
}
.search-photo-wrap:after {
  content:'';
  position:absolute;
  inset:-10px;
  border:1px solid var(--line-strong);
  border-radius:inherit;
  animation:search-breathe 2.8s ease-in-out infinite
}
.search-progress>.spinner {
  display:none
}
.search-progress-copy h2 {
  font-weight:500;
  letter-spacing:-.035em;
  font-size:28px
}
.search-progress-copy p {
  font-size:14px
}
@keyframes search-breathe {
  0%,100% {
    opacity:.3;
    transform:scale(.98)
  }
  50% {
    opacity:1;
    transform:scale(1.02)
  }
}
@media(min-width:700px) {
  .sheet-panel {
    width:min(560px,calc(100vw - 48px));
    border-radius:22px
  }
  .view-results {
    padding-top:40px
  }
  .sheet-dialog[open] {
    display:grid;
    place-items:center
  }
  .sheet-panel {
    position:relative;
    inset:auto;
    max-height:84dvh
  }
  .screen-dialog {
    border-radius:22px
  }
  .screen-dialog::backdrop {
    backdrop-filter:blur(5px)
  }
}
@media(max-width:1190px) {
  .site-header-inner,.topbar-inner {
    width:calc(100% - 64px)
  }
  .home-marketing,.content-main,.unified-footer {
    width:calc(100% - 64px)
  }
  .home-marketing .unified-footer {
    width:100%
  }
  .pricing-layout {
    gap:60px
  }
}
@media(max-width:760px) {
  :root {
    --header-height:64px
  }
  .site-header-inner,.topbar-inner {
    width:calc(100% - 40px);
    gap:16px;
    padding:calc(10px + var(--safe-top)) 0 10px;
    min-height:calc(64px + var(--safe-top))
  }
  .site-brand {
    font-size:14px
  }
  .site-nav {
    display:none!important
  }
  .mobile-menu {
    display:block;
    margin-left:auto;
    order:2
  }
  .gear-button {
    order:3;
    width:38px;
    height:38px
  }
  .header-action {
    display:none
  }
  .home {
    padding:32px 24px 74px;
    min-height:calc(100svh - 64px - var(--safe-top))
  }
  .home-center {
    max-width:500px
  }
  .home .search-hero {
    margin-bottom:28px
  }
  .search-hero h1 {
    font-size:38px
  }
  .search-hero p {
    font-size:15px
  }
  .photo-entry {
    min-height:66px;
    padding:0 20px;
    border-radius:21px;
    font-size:17px
  }
  .home-marketing,.content-main,.unified-footer {
    width:calc(100% - 40px)
  }
  .home-marketing {
    padding-bottom:110px
  }
  .editorial-section {
    padding:44px 0
  }
  .section-heading-wide {
    gap:20px;
    align-items:flex-start;
    flex-direction:column;
    margin-bottom:26px
  }
  .section-heading-wide>p {
    max-width:none;
    font-size:13px
  }
  .three-columns {
    gap:28px;
    grid-template-columns:1fr
  }
  .three-columns h3 {
    margin-top:12px
  }
  .three-columns p {
    max-width:480px
  }
  .compact-faq {
    display:block
  }
  .compact-faq>div:first-child {
    margin-bottom:24px
  }
  .example-layout {
    grid-template-columns:1fr
  }
  .example-visual {
    border-right:0;
    border-bottom:1px solid var(--line);
    padding:28px
  }
  .example-stage {
    min-height:272px
  }
  .example-photo {
    width:180px;
    height:198px
  }
  .example-copy {
    padding:18px 24px 24px
  }
  .example-controls {
    padding:18px 24px
  }
  .example-steps button {
    padding:13px 0
  }
  .example-steps h3 {
    font-size:16px
  }
  .example-steps p {
    font-size:12px
  }
  .example-results {
    max-width:320px
  }
  .example-order {
    max-width:260px;
    padding:20px
  }
  .page-intro {
    padding:48px 0 36px
  }
  .page-intro h1 {
    font-size:39px
  }
  .page-description {
    font-size:15px
  }
  .content-main {
    padding-bottom:60px
  }
  .document-layout {
    display:block
  }
  .document-nav {
    position:static;
    margin-bottom:30px;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 20px
  }
  .prose h2 {
    font-size:22px
  }
  .prose p,.prose li {
    font-size:14px
  }
  .pricing-layout {
    grid-template-columns:1fr;
    gap:24px
  }
  .price-card {
    max-width:500px;
    padding:28px
  }
  .price-context {
    padding:20px 0
  }
  .article-grid {
    grid-template-columns:1fr
  }
  .article-card {
    min-height:220px
  }
  .article-card h3 {
    font-size:23px;
    margin-top:22px
  }
  .footer-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:28px
  }
  .footer-brand {
    grid-column:1/-1
  }
  .footer-brand p {
    max-width:none
  }
  .footer-column a {
    min-height:38px
  }
  .footer-bottom {
    flex-direction:column;
    gap:10px;
    margin-top:30px
  }
  .unified-footer {
    padding-top:34px
  }
  .sheet-scroll {
    padding:20px
  }
  .sheet-panel {
    max-height:90dvh
  }
  .sheet-nav {
    padding:16px 20px
  }
  .home-marketing>.recent-block {
    margin-bottom:40px
  }

.example-link {
    margin-top:26px
  }
}
@media(min-width:761px) and (max-width:1000px) {
  .site-nav {
    gap:20px
  }
  .site-header-inner {
    gap:22px
  }
  .article-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .article-grid>a:last-child {
    grid-column:1/-1
  }
  .footer-grid {
    grid-template-columns:1.4fr repeat(2,1fr)
  }
  .compact-faq {
    gap:40px
  }
  .document-layout {
    grid-template-columns:180px minmax(0,1fr);
    gap:30px
  }
}
@media(max-width:360px) {
  .site-brand {
    gap:6px;
    font-size:13px
  }
  .site-brand img {
    width:24px;
    height:24px
  }
  .site-header-inner {
    gap:12px
  }
  .mobile-menu summary {
    font-size:12px
  }
  .home {
    padding-left:20px;
    padding-right:20px
  }
  .search-hero h1 {
    font-size:33px
  }
  .search-hero p {
    font-size:14px
  }
  .photo-entry {
    font-size:16px
  }
  .page-intro h1 {
    font-size:34px
  }
  .example-controls,.example-copy {
    padding-left:18px;
    padding-right:18px
  }
  .example-visual {
    padding:20px
  }
  .storage-banner {
    width:calc(100% - 24px)
  }
}
@media(max-height:560px) {
  .home {
    min-height:calc(100svh - 64px);
    padding-top:32px;
    padding-bottom:80px
  }
  .home .search-hero {
    margin-bottom:20px
  }
  .home .search-hero h1 {
    font-size:32px
  }
  .home .photo-actions {
    margin:0
  }
  .example-link {
    margin-top:8px
  }
  .camera-button {
    min-height:32px
  }
  .screen-dialog {
    max-height:calc(100dvh - 16px)
  }
  .sheet-panel {
    max-height:calc(100dvh - 16px)
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
}
.checkout-layout {
  display:grid;
  grid-template-columns:minmax(0,480px) minmax(0,1fr);
  gap:90px;
  align-items:start
}
.order-card {
  padding:32px;
  border:1px solid var(--line);
  border-radius:22px;
  background:var(--surface)
}
.order-card h1 {
  font-size:32px;
  letter-spacing:-.04em;
  font-weight:500;
  margin:10px 0 30px
}
.checkout-order-row {
  display:flex;
  justify-content:space-between;
  gap:24px;
  padding:20px 0;
  border-top:1px solid var(--line);
  font-size:15px
}
.checkout-order-row strong {
  font-size:22px;
  font-weight:500
}
.checkout-summary {
  font-size:13px;
  color:var(--secondary);
  line-height:1.8;
  margin:0 0 24px
}
.checkout-consent {
  display:flex;
  align-items:flex-start;
  gap:12px;
  cursor:pointer;
  font-size:12px;
  line-height:1.8;
  color:var(--secondary)
}
.checkout-consent input {
  width:18px;
  height:18px;
  flex:0 0 auto;
  margin-top:3px;
  accent-color:var(--text)
}
.checkout-links {
  font-size:11px;
  line-height:1.8;
  margin:18px 0 24px
}
.checkout-links a {
  color:var(--text);
  text-underline-offset:3px
}
.order-card .primary-button {
  min-height:50px;
  border-radius:12px;
  font-size:15px
}
.checkout-cancel {
  display:block;
  width:100%;
  padding:14px;
  min-height:48px;
  border:0;
  background:none;
  color:var(--secondary);
  font-size:13px
}
.checkout-reference {
  font-size:10px;
  color:var(--secondary);
  text-align:center;
  margin:10px 0 0
}
.checkout-aside {
  padding:20px 0;
  max-width:360px
}
.checkout-aside h2 {
  font-weight:500;
  font-size:24px;
  letter-spacing:-.03em;
  margin-top:0
}
.checkout-aside li {
  padding:10px 0;
  font-size:14px;
  color:var(--secondary);
  line-height:1.7
}
.checkout-aside ol {
  padding-left:20px
}
.checkout-aside p {
  font-size:13px;
  line-height:1.8;
  color:var(--secondary);
  margin-top:28px
}
.checkout-aside a {
  font-size:13px;
  color:var(--text);
  text-underline-offset:5px
}
.checkout-error {
  max-width:500px;
  margin:40px 0
}
.checkout-error h1 {
  font-size:32px;
  font-weight:500
}
.checkout-error p {
  color:var(--secondary);
  font-size:15px;
  margin:20px 0 30px
}
.floating-tabs {
  z-index:32
}
.home .camera-button {
  display:inline-flex
}
@media(max-width:760px) {
  .checkout-layout {
    grid-template-columns:1fr;
    gap:24px
  }
  .order-card {
    padding:24px
  }
  .checkout-aside {
    max-width:none
  }
}
.example-step-copy {
  display:flex;
  flex-direction:column;
  gap:6px
}
.example-steps button>.example-step-copy {
  font-family:var(--font);
  font-size:13px;
  line-height:1.6
}
.example-step-copy strong {
  font-size:17px;
  font-weight:500;
  letter-spacing:-.02em;
  line-height:1.3
}
.example-step-copy>span {
  font-size:13px;
  line-height:1.6;
  color:var(--secondary)
}
.example-steps button[aria-current]>.example-step-copy {
  background:none;
  color:var(--text);
  border-radius:0;
  min-width:0;
  height:auto;
  text-align:left;
  margin:0;
  line-height:1.6
}
@media(max-width:760px) {
  .example-step-copy strong {
    font-size:16px
  }
  .example-step-copy>span {
    font-size:12px
  }
}
/* Sheets open in their final geometry. No entrance transform or intrinsic-height shift. */
html { scrollbar-gutter: stable; }
.sheet-dialog[open] { display:flex; align-items:flex-end; justify-content:center; }
.sheet-panel { position:relative; inset:auto; margin:0; animation:none; transform:none; }
.sheet-scroll { min-height:0; flex:1 1 auto; scrollbar-gutter:stable; overflow-anchor:none; }
#settings-dialog .sheet-panel { height:min(820px,90dvh); }
.example-visual { position:relative; }
.example .example-playback { position:absolute; top:12px; right:12px; z-index:8; display:grid; place-items:center; width:44px; height:44px; min-height:44px; padding:12px; border:1px solid var(--line); border-radius:50%; background:var(--surface); color:var(--text); cursor:pointer; }
.example-playback svg { display:none; width:18px; height:18px; }
.example-playback .guide-icon-pause { fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round; }
.example-playback .guide-icon-play { fill:currentColor; }
.example-playback[data-paused="false"] .guide-icon-pause,
.example-playback[data-paused="true"] .guide-icon-play { display:block; }
.example-playback:hover { background:var(--surface-muted); }
.example-link { font-size:15px; text-decoration:none; }
.example-visual { height:390px; }
.example-stage { height:100%; min-height:0; }
@media(min-width:700px) {
  .sheet-dialog[open] { align-items:center; padding:24px; }
  #settings-dialog .sheet-panel { height:min(820px,calc(100dvh - 48px)); max-height:calc(100dvh - 48px); }
}
@media(max-width:760px) { .example-visual { height:370px; } .example-stage { min-height:0; } }
@media(max-height:560px) { #settings-dialog .sheet-panel { height:calc(100dvh - 16px); max-height:calc(100dvh - 16px); } }

/* Shared motion: brief fades and color changes, with no animated sheet geometry. */
:root {
  --motion-quick: 120ms;
  --motion-standard: 180ms;
  --motion-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  :where(a, button, summary, .settings-row, .article-card, .example-steps button) {
    transition:
      color var(--motion-quick) ease,
      background-color var(--motion-quick) ease,
      border-color var(--motion-quick) ease,
      box-shadow var(--motion-standard) ease,
      opacity var(--motion-quick) ease,
      transform var(--motion-quick) var(--motion-ease);
  }

  :where(.icon-button, .pill-button, .circle-button):active {
    transform: scale(0.97);
  }

  .view:not([hidden]),
  .example-stage:not([hidden]),
  .mobile-menu[open] nav,
  .faq-list details[open] > p {
    animation: content-fade-in var(--motion-standard) var(--motion-ease);
  }

  /* Fallback entry fade for browsers without discrete display transitions. */
  dialog.sheet-dialog[open],
  dialog.screen-dialog[open],
  dialog.alert-dialog[open],
  dialog.action-dialog[open] {
    animation: content-fade-in var(--motion-standard) var(--motion-ease);
  }

  @supports (transition-behavior: allow-discrete) {
    dialog.sheet-dialog,
    dialog.screen-dialog,
    dialog.alert-dialog,
    dialog.action-dialog {
      opacity: 0;
      transition:
        opacity var(--motion-standard) var(--motion-ease),
        display var(--motion-standard) allow-discrete,
        overlay var(--motion-standard) allow-discrete;
    }

    dialog.sheet-dialog[open],
    dialog.screen-dialog[open],
    dialog.alert-dialog[open],
    dialog.action-dialog[open] {
      opacity: 1;
      animation: none;
    }

    dialog::backdrop {
      opacity: 0;
      transition:
        opacity var(--motion-standard) ease,
        display var(--motion-standard) allow-discrete,
        overlay var(--motion-standard) allow-discrete;
    }

    dialog[open]::backdrop {
      opacity: 1;
    }

    @starting-style {
      dialog.sheet-dialog[open],
      dialog.screen-dialog[open],
      dialog.alert-dialog[open],
      dialog.action-dialog[open],
      dialog[open]::backdrop {
        opacity: 0;
      }
    }
  }

  /* Native disclosure sizing is progressively enhanced where supported. */
  @supports (interpolate-size: allow-keywords) {
    .faq-list details {
      interpolate-size: allow-keywords;
    }

    .faq-list details::details-content {
      block-size: 0;
      opacity: 0;
      overflow: clip;
      transition:
        block-size var(--motion-standard) var(--motion-ease),
        opacity var(--motion-standard) ease,
        content-visibility var(--motion-standard) allow-discrete;
    }

    .faq-list details[open]::details-content {
      block-size: auto;
      opacity: 1;
    }
  }
}

@keyframes content-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  .content-main,
  .article-grid > .article-card {
    animation: content-fade-in var(--motion-standard) var(--motion-ease);
  }

  @supports selector(details::details-content) {
    .mobile-menu::details-content {
      opacity: 0;
      transition:
        opacity var(--motion-standard) ease,
        content-visibility var(--motion-standard) allow-discrete;
    }

    .mobile-menu[open]::details-content {
      opacity: 1;
    }

    .mobile-menu[open] nav {
      animation: none;
    }

    @starting-style {
      .mobile-menu[open]::details-content {
        opacity: 0;
      }
    }
  }
}

/* Layered, compact search consent. Provider details remain available before upload. */
.crop-consent {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.crop-consent .consent-copy {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
}
.crop-disclosure {
  color: var(--secondary);
  font-size: 12px;
  line-height: 1.6;
}
.crop-disclosure summary {
  display: flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  min-height: 40px;
  padding: 5px 0;
  cursor: pointer;
  list-style: none;
}
.crop-disclosure summary::-webkit-details-marker {
  display: none;
}
.crop-disclosure summary::after {
  content: '';
  width: 5px;
  height: 5px;
  margin-top: -3px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--motion-quick) ease;
}
.crop-disclosure[open] summary::after {
  margin-top: 2px;
  transform: rotate(225deg);
}
.crop-disclosure-body {
  padding: 4px 0 12px;
}
.crop-disclosure-body p {
  margin: 0 0 10px;
}
.crop-disclosure-body p:last-child {
  margin-bottom: 0;
}
.crop-disclosure-body a,
.crop-terms-note a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.crop-consent .consent-row {
  min-height: 54px;
  padding: 10px 12px;
  gap: 14px;
}
.crop-consent .switch-label {
  font-size: 13px;
  line-height: 1.45;
}
.crop-terms-note {
  margin: 2px 0 0;
  font-size: 11px;
  line-height: 1.65;
  color: var(--secondary);
}
@media (prefers-reduced-motion: no-preference) {
  .crop-disclosure[open] .crop-disclosure-body {
    animation: content-fade-in var(--motion-standard) var(--motion-ease);
  }
  @supports (interpolate-size: allow-keywords) {
    .crop-disclosure { interpolate-size: allow-keywords; }
    .crop-disclosure::details-content {
      block-size: 0;
      overflow: clip;
      opacity: 0;
      transition: block-size var(--motion-standard) var(--motion-ease),
        opacity var(--motion-standard) ease,
        content-visibility var(--motion-standard) allow-discrete;
    }
    .crop-disclosure[open]::details-content {
      block-size: auto;
      opacity: 1;
    }
  }
}

.feature-symbol.icon { display: block; width: 25px; height: 25px; color: var(--secondary); stroke-width: 1.5; }
:root { --motion-quick: 140ms; --motion-standard: 220ms; --motion-ease: cubic-bezier(0.22, 0.68, 0.3, 1); }

/* Loading is transient between the native picker and crop: do not retain its top layer on exit. */
dialog.screen-dialog.loading-screen { transition: none; opacity: 1; }
dialog.screen-dialog.loading-screen::backdrop { transition: none; }

@media (prefers-reduced-motion: no-preference) {
  .example-stage:not([hidden]) { animation: guide-stage-reveal 260ms var(--motion-ease); }
  .example-steps button > span:first-child {
    transition: color var(--motion-standard) ease, background-color var(--motion-standard) ease;
  }
  .article-card,
  .photo-entry,
  .settings-row,
  .icon-button {
    transition: background-color var(--motion-quick) ease,
      color var(--motion-quick) ease,
      border-color var(--motion-standard) ease,
      box-shadow var(--motion-standard) ease,
      transform var(--motion-quick) var(--motion-ease);
  }
}
@media (hover: hover) and (pointer: fine) {
  .article-card:hover { box-shadow: 0 6px 22px #00000006; }
}
@keyframes guide-stage-reveal { from { opacity: 0.4; } to { opacity: 1; } }

/* One site menu, including Settings. No separate Settings or balance control. */
.site-menu {
  display: block;
  position: relative;
  flex: 0 0 auto;
}
.site-menu summary { user-select: none; }
.site-menu nav { opacity: 1; transition: none; animation: none !important; }
.site-menu::details-content,
.site-menu[open]::details-content { opacity: 1; transition: none; }
@starting-style { .site-menu[open]::details-content { opacity: 1; } }
.site-menu nav a,
.site-menu nav button {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  text-align: left;
  text-decoration: none;
}
.site-menu nav button:hover { background: var(--fill); }
.site-menu .menu-settings { margin-top: 6px; border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; }
.site-menu.is-closing nav { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .site-menu.is-closing nav { transition: opacity 160ms ease-out; }
  /* Menus and sheets open immediately; their existing native exit transitions fade out. */
  dialog.sheet-dialog[open],
  dialog.screen-dialog[open],
  dialog.alert-dialog[open],
  dialog.action-dialog[open] { animation: none; transition-duration: 0s; }
  dialog[open]::backdrop { transition-duration: 0s; }
}

/* Estimated progress stays below 100 until a successful response is available. */
.search-meter { width: min(280px, 100%); margin: 12px 0 8px; }
.search-meter-track { height: 5px; border-radius: 999px; background: var(--fill-strong); overflow: hidden; }
.search-meter-fill { height: 100%; width: 100%; border-radius: inherit; background: var(--text); transform: scaleX(0); transform-origin: left center; will-change: transform; }
.search-meter-meta { display: flex; align-items: center; justify-content: flex-end; margin-top: 12px; color: var(--secondary); font-size: 11px; line-height: 1.5; }
#search-progress-percent { min-width: 4ch; text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }
.search-progress-copy { min-height: 45px; margin-top: 8px; }
.search-screen.is-ready .search-photo-wrap::after { animation: none; opacity: 0; }
.search-screen.is-ready .search-meter-fill { background: var(--success); }
@media (prefers-reduced-motion: no-preference) {
  .search-meter-fill { transition: background-color 220ms ease; }
  .search-screen.is-ready .search-progress-copy { animation: content-fade-in 180ms ease; }
}

/* Fixed camera geometry; front-camera captures preserve the mirrored preview. */
.camera-content { display:flex; flex-direction:column; align-items:center; gap:12px; padding:20px 24px 28px; }
.camera-stage { position:relative; flex:0 0 auto; width:var(--camera-frame-width,300px); height:var(--camera-frame-height,400px); aspect-ratio:3/4; overflow:hidden; border-radius:18px; background:#171717; isolation:isolate; }
#camera-video { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; opacity:0; pointer-events:none; }
.camera-status { min-height:20px; max-width:360px; margin:0; text-align:center; font-size:12px; line-height:1.6; color:var(--secondary); }
.camera-toolbar { display:grid; grid-template-columns:44px 68px 44px; align-items:center; justify-content:center; gap:30px; }
.camera-shutter { display:grid; place-items:center; width:68px; height:68px; padding:4px; border:2px solid var(--text); border-radius:50%; background:transparent; }
.camera-shutter span { width:54px; height:54px; border-radius:50%; background:var(--text); }
.camera-shutter:disabled { opacity:.35; }
.camera-content .text-button { font-size:12px; color:var(--secondary); }


/* Snapshot the entire capture sheet before requesting either camera. */
#screen-camera {
  inset:auto;
  left:var(--camera-left,0px);
  top:var(--camera-top,0px);
  width:var(--camera-width,100%);
  height:var(--camera-height,100%);
  max-width:none;
  max-height:none;
  transform:none;
  overflow:hidden;
}
#screen-camera .screen-topbar { height:calc(56px + var(--safe-top)); min-height:calc(56px + var(--safe-top)); padding:calc(8px + var(--safe-top)) 16px 8px; }
#screen-camera .camera-content { height:calc(100% - 56px - var(--safe-top)); min-height:0; overflow-y:auto; overscroll-behavior:contain; }
#screen-camera .camera-status { flex:0 0 40px; height:40px; overflow-y:auto; }
#screen-camera .camera-toolbar,
#screen-camera .camera-content > .text-button { flex-shrink:0; }
#screen-camera[data-compact="true"] .camera-content { display:grid; grid-template-columns:minmax(0,1fr) 210px; grid-template-rows:minmax(36px,1fr) 68px minmax(44px,1fr); gap:10px; padding:12px 20px; }
#screen-camera[data-compact="true"] .camera-stage { grid-column:1; grid-row:1/4; justify-self:center; }
#screen-camera[data-compact="true"] .camera-status { grid-column:2; grid-row:1; align-self:end; width:100%; }
#screen-camera[data-compact="true"] .camera-toolbar { grid-column:2; grid-row:2; gap:24px; }
#screen-camera[data-compact="true"] .camera-content > .text-button { grid-column:2; grid-row:3; align-self:start; }

/* Never expose the native video compositor's transient startup sizing. */
#camera-preview { position:absolute; inset:0; display:block; width:100%; height:100%; opacity:0; }
#camera-preview[data-ready="true"] { opacity:1; }
#screen-crop .crop-stage { width:var(--crop-stage-size,300px); height:var(--crop-stage-size,300px); flex-shrink:0; }
#crop-image[data-ready="false"] { opacity:0; }
#crop-image[data-ready="true"] { opacity:1; }
@media (prefers-reduced-motion:no-preference) {
  #camera-preview,
  #crop-image { transition:opacity 140ms ease; }
}

/* The walkthrough acts out selection, cropping, checkout, and a source-page tap. */
.example-stage,
.example-order,
.example-results { position:relative; }
.guide-timeline { display:flex; flex-shrink:0; gap:4px; margin-left:auto; margin-right:12px; }
.guide-timeline > span { width:16px; height:3px; border-radius:9px; overflow:hidden; background:var(--fill-strong); }
.guide-timeline i { display:block; width:100%; height:100%; background:var(--text); transform:scaleX(0); transform-origin:left; }
.example[data-step="1"] .guide-timeline > span:first-child i,
.example[data-step="2"] .guide-timeline > span:not(:last-child) i { transform:scaleX(1); }
.guide-upload-target { position:absolute; left:50%; top:45%; transform:translate(-50%,-50%); z-index:3; display:flex; align-items:center; gap:12px; width:min(260px,100%); min-height:58px; padding:16px; border:1px solid var(--line); border-radius:17px; background:var(--surface); color:var(--text); font-size:13px; opacity:0; pointer-events:none; }
.guide-upload-target .icon { width:18px; height:18px; color:var(--secondary); }
.guide-upload-target > span:last-child { margin-left:auto; color:var(--secondary); font-size:20px; }
.guide-pointer { position:absolute; z-index:5; width:17px; height:17px; border:1.5px solid var(--text); border-radius:50%; background:var(--surface); box-shadow:0 2px 8px #0002; opacity:0; pointer-events:none; }
.guide-pointer::after { content:''; position:absolute; inset:-10px; border:1px solid var(--text); border-radius:50%; opacity:0; }
.guide-photo-pointer { left:65%; top:51%; }
.guide-checkout-pointer { right:28px; bottom:35px; }
.guide-source-pointer { right:28px; top:84px; }
.guide-mini-progress { position:absolute; left:24px; right:24px; bottom:10px; height:2px; border-radius:6px; overflow:hidden; background:var(--fill); opacity:0; }
.guide-mini-progress > span { display:block; width:100%; height:100%; background:var(--text); transform:scaleX(0); transform-origin:left; }
.guide-source-preview { display:block; position:absolute; inset:8px; z-index:4; padding:16px; border:1px solid var(--line); border-radius:13px; background:var(--surface); text-align:center; opacity:0; pointer-events:none; }
.guide-browser-bar { display:block; padding-bottom:12px; border-bottom:1px solid var(--line); color:var(--secondary); font-size:10px; }
.guide-source-preview img { display:block; width:62px; height:68px; margin:18px auto 10px; border-radius:10px; object-fit:cover; }
.guide-source-name { display:block; font-size:15px; font-weight:500; }
.guide-text-line { display:block; height:4px; width:75%; margin:12px auto 0; border-radius:6px; background:var(--fill-strong); }
.guide-text-line.short { width:50%; margin-top:7px; }
@media (prefers-reduced-motion:no-preference) {
  .example[data-enhanced="true"][data-step="0"] .guide-timeline > span:nth-child(1) i,
  .example[data-enhanced="true"][data-step="1"] .guide-timeline > span:nth-child(2) i,
  .example[data-enhanced="true"][data-step="2"] .guide-timeline > span:nth-child(3) i { animation:guide-time 5200ms linear both; }
  .example[data-enhanced="true"] .example-stage[data-stage="0"]:not([hidden]) .guide-upload-target { animation:guide-upload 5200ms linear both; }
  .example[data-enhanced="true"] .example-stage[data-stage="0"]:not([hidden]) .example-photo,
  .example[data-enhanced="true"] .example-stage[data-stage="0"]:not([hidden]) .visual-caption { animation:guide-photo-appear 5200ms linear both; }
  .example[data-enhanced="true"] .example-stage[data-stage="0"]:not([hidden]) .example-photo img { animation:guide-crop 5200ms ease-in-out both; }
  .example[data-enhanced="true"] .example-stage[data-stage="0"]:not([hidden]) .guide-photo-pointer { animation:guide-photo-tap 5200ms ease-in-out both; }
  .example[data-enhanced="true"] .guide-photo-pointer::after { animation:guide-photo-ripple 5200ms linear both; }
  .example[data-enhanced="true"] .example-stage[data-stage="1"]:not([hidden]) .guide-checkout-pointer { animation:guide-tap 5200ms ease-in-out both; }
  .example[data-enhanced="true"] .guide-checkout-pointer::after,
  .example[data-enhanced="true"] .guide-source-pointer::after { animation:guide-ripple 5200ms linear both; }
  .example[data-enhanced="true"] .example-stage[data-stage="1"]:not([hidden]) .example-payment { animation:guide-button-press 5200ms ease both; }
  .example[data-enhanced="true"] .example-stage[data-stage="1"]:not([hidden]) .guide-mini-progress { animation:guide-mini-show 5200ms linear both; }
  .example[data-enhanced="true"] .example-stage[data-stage="1"]:not([hidden]) .guide-mini-progress > span { animation:guide-mini-fill 5200ms ease-in-out both; }
  .example[data-enhanced="true"] .example-stage[data-stage="2"]:not([hidden]) .guide-source-pointer { animation:guide-tap 5200ms ease-in-out both; }
  .example[data-enhanced="true"] .example-stage[data-stage="2"]:not([hidden]) .guide-source-preview { animation:guide-source-open 5200ms ease both; }
  .example[data-playing="false"] :is(.guide-timeline i,.guide-upload-target,.example-photo,.example-photo img,.visual-caption,.guide-pointer,.example-payment,.guide-mini-progress,.guide-mini-progress > span,.guide-source-preview),
  .example[data-playing="false"] .guide-pointer::after { animation-play-state:paused !important; }
}
@keyframes guide-time { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes guide-upload { 0%,18% { opacity:1; } 25%,100% { opacity:0; } }
@keyframes guide-photo-appear { 0%,20% { opacity:0; } 30%,100% { opacity:1; } }
@keyframes guide-crop { 0%,38% { transform:translate(9px,6px) scale(1.1); } 65%,100% { transform:translate(0,0) scale(1); } }
@keyframes guide-photo-tap { 0%,7% { opacity:0; transform:translate(10px,12px) scale(1); } 14% { opacity:1; transform:translate(0,0) scale(1); } 19% { opacity:1; transform:translate(0,0) scale(.78); } 25% { opacity:0; transform:translate(0,0) scale(1); } 38% { opacity:0; transform:translate(-15px,-40px); } 45% { opacity:1; transform:translate(-15px,-40px) scale(.8); } 64% { opacity:1; transform:translate(-33px,-56px) scale(.8); } 72%,100% { opacity:0; transform:translate(-33px,-56px) scale(1); } }
@keyframes guide-photo-ripple { 0%,16%,28%,100% { opacity:0; transform:scale(.3); } 19% { opacity:.5; transform:scale(.5); } 27% { opacity:0; transform:scale(1.5); } }
@keyframes guide-tap { 0%,28% { opacity:0; transform:translate(12px,10px); } 40% { opacity:1; transform:translate(0,0) scale(1); } 48% { opacity:1; transform:translate(0,0) scale(.78); } 57%,100% { opacity:0; transform:translate(0,0) scale(1); } }
@keyframes guide-ripple { 0%,45% { opacity:0; transform:scale(.3); } 49% { opacity:.5; transform:scale(.6); } 59%,100% { opacity:0; transform:scale(1.6); } }
@keyframes guide-button-press { 0%,45%,54%,100% { transform:scale(1); } 49% { transform:scale(.97); } }
@keyframes guide-mini-show { 0%,54% { opacity:0; } 62%,100% { opacity:1; } }
@keyframes guide-mini-fill { 0%,58% { transform:scaleX(0); } 96%,100% { transform:scaleX(1); } }
@keyframes guide-source-open { 0%,61% { opacity:0; transform:translateY(4px); } 73%,100% { opacity:1; transform:translateY(0); } }

.currency-choice { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 22px; color:var(--secondary); font-size:12px; }
.currency-choice select { max-width:230px; width:70%; min-width:0; min-height:44px; padding:8px 30px 8px 10px; border:1px solid var(--line); border-radius:10px; background-color:var(--surface); color:var(--text); font:inherit; font-size:12px; }
.price-amount [data-compact="true"] { font-size:clamp(28px,8vw,40px); letter-spacing:-.04em; }