/* Landing page */
main { flex: 1; }
section { padding: var(--s-8) var(--gutter); }
section > * { max-width: var(--max); margin-inline: auto; }

/* Hero: copy left, a contact sheet of the same photo at three sizes right */
.hero {
  display: grid; gap: var(--s-7); align-items: center;
  padding-top: var(--s-7); max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto;
}
@media (min-width: 960px) { .hero { grid-template-columns: 1.05fr 1fr; padding-top: var(--s-8); padding-bottom: var(--s-9); } }
.hero > * { max-width: none; margin: 0; }
.hero__kicker { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-5); }
.dot { width: 34px; height: 1px; background: var(--accent-fill); } /* the site's eyebrow rule */
.hero .display { margin-bottom: var(--s-5); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.facts { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); margin: var(--s-6) 0 0; padding: var(--s-4) 0 0; list-style: none; border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--text-muted); }
.facts b { display: block; font: 500 var(--fs-2xl)/1.1 var(--font-mono); color: var(--text); }

.sheet { position: relative; min-height: 440px; }
@media (min-width: 960px) { .sheet { min-height: 560px; } }
.sheet__print { position: absolute; margin: 0; padding: 8px 8px 30px; background: #fff; border-radius: var(--r-print); box-shadow: var(--sh-pop); }
.sheet__print img { width: 100%; height: auto; border-radius: 1px; background: var(--surface-sunk); }
.sheet__print figcaption { position: absolute; left: 10px; bottom: 9px; font-size: var(--fs-2xs); color: var(--text-muted); }
.sheet__dim { position: absolute; top: -20px; left: 0; font-size: var(--fs-2xs); color: var(--text-muted); }
.sheet__print--story { width: 42%; left: 4%; top: 4%; transform: rotate(-3deg); z-index: 2; }
.sheet__print--thumb { width: 60%; right: 0; top: 0; transform: rotate(2deg); }
.sheet__print--square { width: 40%; right: 8%; bottom: 0; transform: rotate(-1deg); z-index: 3; }
.sheet__stamp {
  position: absolute; left: 34%; bottom: 6%; z-index: 4; display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%;
  background: var(--accent-fill); color: #FFFFFF; font-size: var(--fs-lg); font-weight: 600; text-align: center; line-height: 1.05; transform: rotate(-12deg);
}
.sheet__stamp small { display: block; font-size: 10px; font-weight: 500; }
@media (prefers-reduced-motion: no-preference) {
  .sheet__print { animation: settle var(--t-slow) var(--ease-out) both; }
  .sheet__print--thumb { animation-delay: 80ms; }
  .sheet__print--square { animation-delay: 160ms; }
  @keyframes settle { from { opacity: 0; translate: 0 18px; } }
}

/* How it works: the same dark band as "Free, with nothing hidden." */
.steps { background: var(--surface-inverse); color: var(--text-inverse); padding-block: var(--s-8); }
.steps .h2 { margin-bottom: var(--s-6); }
.steps__list { display: grid; gap: var(--s-5); margin: 0 auto; padding: 0; list-style: none; }
@media (min-width: 720px) { .steps__list { grid-template-columns: repeat(4, 1fr); } }
.steps__list li { display: grid; gap: var(--s-2); align-content: start; padding-top: var(--s-3); border-top: 1px solid var(--night-line); }
.steps__list .label { color: var(--tm-cyan-dark); }
.steps__list b { font-size: var(--fs-lg); font-weight: 600; line-height: 1.3; }
.steps__list p { margin: 0; font-size: var(--fs-md); line-height: 1.45; color: var(--text-inverse-muted); }

/* What it does: a statement that lights as you read, then five demos that loop while on screen.
   The motion language is tyekesmedia.com's: words lighting up, frame edges drawn in spectrum
   light, a glowing scan line, mono readouts. Every demo shows real output of the app. */
@property --p { syntax: '<percentage>'; inherits: true; initial-value: 100%; }

.statement { padding-block: var(--s-9) var(--s-7); }
.statement__text { max-width: 22ch; margin: 0 auto 0 0; font: 600 clamp(30px, 4.6vw, 64px)/1.08 var(--font-display); letter-spacing: -0.03em; }
.statement > .statement__text { margin-inline: auto; max-width: min(var(--max), 22ch); }
@media (min-width: 960px) { .statement > .statement__text { max-width: 24ch; margin-left: max(0px, calc((100% - var(--max)) / 2)); } }
.statement .w { color: var(--paper-300); transition: color var(--t-slow) var(--ease-out); }
.statement .w.is-lit { color: var(--ink-900); }
.statement .w.is-lit.is-key { color: var(--accent); }

.reel { padding-top: 0; }
.reel__head { display: grid; gap: var(--s-3); margin-bottom: var(--s-6); }
.feat { display: grid; gap: var(--s-6); align-items: center; padding-block: var(--s-7); border-top: 1px solid var(--line); }
@media (min-width: 960px) {
  .feat { grid-template-columns: 1fr 1.15fr; gap: var(--s-8); padding-block: var(--s-8); }
  .feat--flip .feat__copy { order: 2; }
}
.feat__copy { display: grid; gap: var(--s-4); justify-items: start; }
.feat__n { margin: 0; font-size: var(--fs-xs); color: var(--accent-text); letter-spacing: .1em; }
.feat__title { margin: 0; font: 600 var(--fs-3xl)/1.02 var(--font-display); letter-spacing: var(--tracking-display); background: var(--steel); -webkit-background-clip: text; background-clip: text; color: transparent; }
.feat__body { margin: 0; max-width: 44ch; font-size: var(--fs-lg); line-height: 1.5; color: var(--text-muted); }
.feat__readout { display: inline-flex; align-items: center; gap: var(--s-2); margin: 0; padding: 6px 12px 6px 10px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); font-size: var(--fs-xs); color: var(--text); }
.feat__readout::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--spectrum); box-shadow: 0 0 10px rgba(106, 43, 214, .55); }
.feat__readout span { transition: opacity var(--t-base) var(--ease-out); }
.feat__readout span.is-swap { opacity: 0; }

/* The stage: a night-blue screen with a corner light, like the screens on tyekesmedia.com */
.feat__stage {
  position: relative; aspect-ratio: 5 / 4; overflow: hidden; border-radius: var(--r-lg);
  background:
    radial-gradient(60% 55% at 85% 0%, rgba(34, 228, 255, .16), transparent 70%),
    radial-gradient(60% 60% at 0% 100%, rgba(106, 43, 214, .28), transparent 70%),
    linear-gradient(var(--night-line) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, var(--night-line) 1px, transparent 1px) 0 0 / 28px 28px,
    var(--night-2);
  box-shadow: 0 30px 60px -30px rgba(11, 13, 31, .55);
}

/* 01 Every shape: one frame grows and shrinks through five platform shapes. The photo stays
   still and a clip window resizes over it, so nothing is re-laid out or stretched while it
   moves. Spectrum edges draw once the frame settles. */
.shape { position: absolute; inset: 0; }
.shape__win {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  clip-path: inset(0 round 2px); transition: clip-path .75s cubic-bezier(.65, 0, .35, 1); will-change: clip-path;
}
.shape__win img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.shape__edges { position: absolute; pointer-events: none; }
/* Edges are hidden while the frame changes shape (their glow would smear across the stage)
   and drawn fresh once it settles. */
.edge { position: absolute; opacity: 0; background: var(--spectrum); box-shadow: 0 0 14px rgba(34, 228, 255, .7), 0 0 28px rgba(106, 43, 214, .45); }
.shape__edges.is-drawing .edge { opacity: 1; }
.feat__stage { contain: paint; }
.e1 { left: -2px; right: -2px; top: -2px; height: 2px; transform-origin: left; }
.e2 { top: -2px; bottom: -2px; right: -2px; width: 2px; transform-origin: top; }
.e3 { left: -2px; right: -2px; bottom: -2px; height: 2px; transform-origin: right; }
.e4 { top: -2px; bottom: -2px; left: -2px; width: 2px; transform-origin: bottom; }
.shape__edges.is-drawing .e1 { animation: edgeX .45s var(--ease-out) both; }
.shape__edges.is-drawing .e2 { animation: edgeY .45s var(--ease-out) .12s both; }
.shape__edges.is-drawing .e3 { animation: edgeX .45s var(--ease-out) .24s both; }
.shape__edges.is-drawing .e4 { animation: edgeY .45s var(--ease-out) .36s both; }
@keyframes edgeX { from { transform: scaleX(0); } }
@keyframes edgeY { from { transform: scaleY(0); } }

/* 02 It finds the face: a scan line sweeps the banner, then the frame moves to the face */
.smart { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--s-4); }
.smart__strip { position: relative; width: min(86%, 560px); aspect-ratio: 3 / 1; border-radius: 3px; transition: box-shadow var(--t-slow) var(--ease-out); }
.smart__strip img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; border-radius: 3px; transition: object-position 1s var(--ease-in-out); }
.smart__scan { position: absolute; left: -4%; right: -4%; top: 0; height: 2px; opacity: 0; background: var(--spectrum); box-shadow: 0 0 16px rgba(34, 228, 255, .9), 0 0 32px rgba(106, 43, 214, .6); }
.smart.is-scanning .smart__scan { animation: scanY 1.1s var(--ease-in-out) both; }
@keyframes scanY { 0% { top: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
.smart.is-locked .smart__strip { box-shadow: 0 0 0 2px #22E4FF, 0 0 24px rgba(34, 228, 255, .55), 0 0 60px rgba(106, 43, 214, .45); }
.smart__tag { margin: 0; padding: 5px 12px; border-radius: var(--r-pill); border: 1px solid var(--night-line-2); color: var(--text-inverse); font-size: var(--fs-xs); transition: border-color var(--t-base), color var(--t-base); }
.smart.is-locked .smart__tag { border-color: #22E4FF; color: #22E4FF; }

/* 03 Lift the subject: a glowing line wipes from photo to cutout and back */
.wipe { position: absolute; top: 8%; bottom: 8%; left: 50%; transform: translateX(-50%); aspect-ratio: 4 / 5; border-radius: 3px; overflow: hidden; --p: 100%; }
.wipe img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wipe__after { clip-path: inset(0 0 0 var(--p)); }
.wipe__line { position: absolute; top: 0; bottom: 0; left: var(--p); width: 2px; margin-left: -1px; background: linear-gradient(#22E4FF, #6A2BD6 60%, #B8168F); box-shadow: 0 0 14px rgba(34, 228, 255, .9), 0 0 34px rgba(106, 43, 214, .7); }
.is-playing .wipe { animation: wipe 5.2s var(--ease-in-out) infinite; }
@keyframes wipe { 0%, 12% { --p: 100%; } 42%, 62% { --p: 0%; } 92%, 100% { --p: 100%; } }
/* The line shows only while it moves, so it never rests as a stripe on the frame's edge */
.wipe__line { opacity: 0; }
.is-playing .wipe__line { animation: wipeLine 5.2s var(--ease-in-out) infinite; }
@keyframes wipeLine { 0%, 12% { opacity: 0; } 16%, 38% { opacity: 1; } 42%, 62% { opacity: 0; } 66%, 88% { opacity: 1; } 92%, 100% { opacity: 0; } }

/* 04 Fifty at once: a deck of prints deals out into a contact sheet */
.deal { position: absolute; inset: 0; }
.deal img {
  /* each print fits its grid cell whatever its shape */
  position: absolute; left: 50%; top: 46%; max-width: 27%; max-height: 34%; width: auto; height: auto; padding: 3px; background: #FFFFFF; border-radius: 2px;
  box-shadow: 0 12px 24px -10px rgba(0, 0, 0, .7);
  transform: translate(-50%, -50%) rotate(var(--r)); transition: transform .9s var(--ease-in-out), left .9s var(--ease-in-out), top .9s var(--ease-in-out);
}
.deal img:nth-child(1) { --r: -9deg; --gx: 20%; --gy: 27%; }
.deal img:nth-child(2) { --r: 6deg;  --gx: 50%; --gy: 27%; transition-delay: .06s; }
.deal img:nth-child(3) { --r: -3deg; --gx: 80%; --gy: 27%; transition-delay: .12s; }
.deal img:nth-child(4) { --r: 10deg; --gx: 20%; --gy: 66%; transition-delay: .18s; }
.deal img:nth-child(5) { --r: -6deg; --gx: 50%; --gy: 66%; transition-delay: .24s; }
.deal img:nth-child(6) { --r: 3deg;  --gx: 80%; --gy: 66%; transition-delay: .30s; }
.deal.is-dealt img { left: var(--gx); top: var(--gy); transform: translate(-50%, -50%) rotate(0deg); }
.deal__zip { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: var(--s-2); margin: 0; padding: 6px 14px; border-radius: var(--r-pill); background: rgba(8, 11, 31, .8); border: 1px solid var(--night-line-2); color: var(--text-inverse); font-size: var(--fs-xs); white-space: nowrap; transition: border-color var(--t-base), color var(--t-base), box-shadow var(--t-base); }
.deal__zip svg { width: 14px; height: 14px; }
.deal.is-zipped .deal__zip { border-color: #22E4FF; color: #22E4FF; box-shadow: 0 0 20px rgba(34, 228, 255, .35); }

/* 05 Under any limit: the file size counts down under a cap */
.limit { position: absolute; inset: 0; display: grid; place-content: center; gap: var(--s-4); width: min(80%, 460px); margin: 0 auto; color: var(--text-inverse); }
.limit__kb { margin: 0; font-size: clamp(56px, 9vw, 104px); font-weight: 500; line-height: 1; letter-spacing: -0.04em; font-feature-settings: 'tnum'; }
.limit__kb small { font-size: .32em; color: var(--text-inverse-muted); letter-spacing: 0; }
.limit__bar { position: relative; height: 10px; border-radius: var(--r-pill); background: var(--night-line); }
.limit__bar i { position: absolute; inset: 0 auto 0 0; width: 100%; border-radius: var(--r-pill); background: var(--spectrum); box-shadow: 0 0 18px rgba(106, 43, 214, .55); }
.limit__cap { position: absolute; top: -8px; bottom: -8px; left: 19.9%; width: 2px; background: #22E4FF; box-shadow: 0 0 12px #22E4FF; }
.limit__cap b { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); font-size: var(--fs-2xs); font-weight: 500; color: #22E4FF; white-space: nowrap; }
.limit__meta { display: flex; justify-content: space-between; margin: 0; font-size: var(--fs-xs); color: var(--text-inverse-muted); }
.limit__meta b { color: var(--text-inverse); font-weight: 500; }
.limit.is-done [data-limit-ok] { color: #22E4FF; }

@media (max-width: 959px) { .feat__stage { aspect-ratio: 1 / 1; } }
@media (prefers-reduced-motion: reduce) {
  .is-playing .wipe { animation: none; --p: 50%; }
  .is-playing .wipe__line { animation: none; opacity: 1; }
  .shape__win, .smart__strip img, .deal img { transition: none; }
}

/* Sizes */
.sizes { border-top: 1px solid var(--line); }
.sizes__head { display: grid; gap: var(--s-3); margin-bottom: var(--s-6); }
@media (min-width: 960px) { .sizes__head { grid-template-columns: 1fr 1fr; align-items: end; } }
.sizes__table { columns: 1; column-gap: var(--s-7); }
@media (min-width: 720px) { .sizes__table { columns: 2; } }
@media (min-width: 1100px) { .sizes__table { columns: 3; } }
.sizes__group { break-inside: avoid; margin-bottom: var(--s-6); }
.sizes__platform { margin: 0 0 var(--s-2); padding-bottom: var(--s-2); border-bottom: 1.5px solid var(--ink-900); font: 600 var(--fs-lg)/1.2 var(--font-display); }
.sizes__group ul { margin: 0; padding: 0; list-style: none; }
.sizes__group a {
  display: grid; grid-template-columns: 28px 1fr auto 44px; gap: var(--s-3); align-items: center; min-height: 44px; padding: 0 var(--s-2);
  border-bottom: 1px solid var(--line); text-decoration: none; font-size: var(--fs-sm);
  transition: background var(--t-fast);
}
.sizes__group a .mono { font-size: var(--fs-xs); text-align: right; }
.sizes__group a:hover { background: var(--surface); }
.sizes__group a:hover .glyph { background: var(--accent); border-color: var(--accent); }
.glyph { display: block; justify-self: center; border: 1.5px solid var(--ink-900); border-radius: 2px; transition: background var(--t-fast); }

/* Free */
.free { background: var(--surface-inverse); color: var(--text-inverse); padding-block: var(--s-8); }
.free .h2 { margin-bottom: var(--s-6); }
.free__list { display: grid; gap: var(--s-5); margin: 0 auto var(--s-6); }
@media (min-width: 720px) { .free__list { grid-template-columns: repeat(3, 1fr); } }
.free__list div { padding-top: var(--s-3); border-top: 1px solid var(--night-line); }
.free__list dt { color: var(--tm-cyan-dark); margin-bottom: var(--s-2); }
.free__list dd { margin: 0; font-size: var(--fs-lg); line-height: 1.4; }
.free .btn { display: flex; width: max-content; }
.steps__in > .h2, .free__in > .h2 { margin-inline: auto; }
.steps__in, .free__in { max-width: var(--max); margin: 0 auto; }
.sheet__print--thumb figcaption { left: auto; right: 10px; }

/* What's different: a ruled comparison, our column lit with the spectrum */
.compare { border-top: 1px solid var(--line); }
.compare__head { display: grid; gap: var(--s-3); margin-bottom: var(--s-6); justify-items: start; }
.compare__table { display: grid; border-top: 1.5px solid var(--ink-900); }
.compare__row { display: grid; grid-template-columns: 1fr; gap: var(--s-2); padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.compare__row--head { display: none; }
.compare__row > b { font: 600 var(--fs-lg)/1.3 var(--font-display); }
.compare__row > span { font-size: var(--fs-md); line-height: 1.5; color: var(--text-muted); }
.compare__row > span::before { content: attr(data-label); display: block; margin-bottom: 2px; font: 500 var(--fs-2xs)/1.4 var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.compare__row > .compare__us { color: var(--text); }
.compare__row > .compare__us::before { color: var(--accent-text); }
@media (min-width: 900px) {
  .compare__row { grid-template-columns: 1fr 1.4fr 1.4fr; gap: var(--s-6); padding: var(--s-5) 0; align-items: start; }
  .compare__row--head { display: grid; padding: var(--s-3) 0; }
  .compare__row--head span { font: 500 var(--fs-2xs)/1.4 var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
  .compare__row--head .compare__us { color: var(--accent-text); }
  .compare__row > span::before { display: none; }
  .compare__row > .compare__us { position: relative; padding-left: var(--s-4); }
  .compare__row > .compare__us::after { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; border-radius: 2px; background: var(--spectrum); }
}
.compare sup { margin-left: 2px; font: 500 var(--fs-2xs)/0 var(--font-mono); }
.compare sup a, .free sup a { color: var(--accent-text); text-decoration: none; }
.free sup a { color: var(--tm-cyan-dark); }
.compare__sources { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: var(--s-5) auto var(--s-2); padding-left: var(--s-5); font: 500 var(--fs-xs)/1.5 var(--font-mono); color: var(--text-muted); }
.compare__sources a { color: var(--text-muted); overflow-wrap: anywhere; }
.compare__sources a:hover { color: var(--text); }
.compare__sources li:target { color: var(--text); }
.compare__note { max-width: var(--max); }

/* Pricing */
.free__kicker { margin-bottom: var(--s-3) !important; color: var(--text-inverse-muted); }
.free__aside { margin: 0 auto var(--s-6); font-size: var(--fs-md); color: var(--text-inverse-muted); }
.free__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.free__cta .btn { display: inline-flex; width: auto; }
.facts { gap: var(--s-2) var(--s-5); }
.compare__sources { list-style-position: inside; padding-left: 0; }
.compare > .compare__note { margin-inline: auto; }
.compare__row--head .compare__us::after { display: none; }
@media (max-width: 480px) { .facts { display: grid; grid-template-columns: 1fr 1fr; } }

/* Pricing: two plans on the night band */
.plans { display: grid; gap: var(--s-4); margin: 0 auto var(--s-6); }
@media (min-width: 820px) { .plans { grid-template-columns: 1fr 1fr; } }
.plan { display: grid; align-content: start; gap: var(--s-4); padding: var(--s-6) var(--s-5); border-radius: var(--r-lg); border: 1px solid var(--night-line); background: rgba(255, 255, 255, .03); }
.plan--plus { position: relative; border-color: transparent; background: linear-gradient(var(--night-2), var(--night-2)) padding-box, var(--spectrum) border-box; border: 1.5px solid transparent; }
.plan__name { margin: 0; font-family: var(--font-display); font-size: var(--fs-xl); }
.plan--plus .plan__name { color: var(--tm-cyan-dark); }
.plan__price { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2); color: var(--text-inverse-muted); }
.plan__price b { font-family: var(--font-display); font-size: 48px; line-height: 1; color: var(--text-inverse); letter-spacing: -.02em; }
.plan__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-2); }
.plan__list li { position: relative; padding-left: 24px; line-height: 1.4; }
.plan__list li::before { content: '✓'; position: absolute; left: 0; color: var(--tm-cyan-dark); font-weight: 700; }
.plan .btn { width: max-content; }
.plan__note { margin: 0; font-size: var(--fs-sm); color: var(--text-inverse-muted); }