/* Akshar — Photomator-style shared styles */
:root{
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --bg:#fff; --fg:#1d1d1f; --fg-dim:#6e6e73;
  --line:rgba(0,0,0,0.08); --line-strong:rgba(0,0,0,0.14);
  --accent:#ff6a00; --panel:#f5f5f7; --panel-2:#fafafa;
  --card:#fff; --card-border:rgba(0,0,0,0.08);
  --apple-blue:#e6eefc; --apple-blue-fg:#0b1a3a; --apple-blue-dim:#3a4a6b;
  --nav-bg:rgba(255,255,255,0.85);
  --icon-shadow:drop-shadow(0 8px 20px rgba(0,0,0,0.16)) drop-shadow(0 1px 3px rgba(0,0,0,0.10));
  --icon-shadow-sm:drop-shadow(0 2px 5px rgba(0,0,0,0.18));
}
:root[data-theme="dark"]{
  --bg:#000; --fg:#f5f5f7; --fg-dim:#a1a1a6;
  --line:rgba(255,255,255,0.10); --line-strong:rgba(255,255,255,0.18);
  --panel:#0d0d0f; --panel-2:#111;
  --card:#141416; --card-border:rgba(255,255,255,0.10);
  --apple-blue:#0d1a34; --apple-blue-fg:#e6eefc; --apple-blue-dim:#a9b8dc;
  --nav-bg:rgba(0,0,0,0.7);
  --icon-shadow:drop-shadow(0 8px 24px rgba(255,255,255,0.14)) drop-shadow(0 0 2px rgba(255,255,255,0.10));
  --icon-shadow-sm:drop-shadow(0 0 6px rgba(255,255,255,0.18));
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){
    --bg:#000; --fg:#f5f5f7; --fg-dim:#a1a1a6;
    --line:rgba(255,255,255,0.10); --line-strong:rgba(255,255,255,0.18);
    --panel:#0d0d0f; --panel-2:#111;
    --card:#141416; --card-border:rgba(255,255,255,0.10);
    --apple-blue:#0d1a34; --apple-blue-fg:#e6eefc; --apple-blue-dim:#a9b8dc;
    --nav-bg:rgba(0,0,0,0.7);
    --icon-shadow:drop-shadow(0 8px 24px rgba(255,255,255,0.14)) drop-shadow(0 0 2px rgba(255,255,255,0.10));
    --icon-shadow-sm:drop-shadow(0 0 6px rgba(255,255,255,0.18));
  }
}
*,*::before,*::after{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
html{ scroll-behavior:smooth; scroll-padding-top:76px }
body{
  background:var(--bg); color:var(--fg);
  font-family:var(--font); font-size:17px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none }
img{ display:block; max-width:100% }

.skip{ position:fixed; top:-100px; left:50%; transform:translateX(-50%); background:var(--fg); color:#fff; padding:10px 16px; border-radius:0 0 8px 8px; font-size:13px; font-weight:600; z-index:1000; transition:top .2s }
.skip:focus{ top:0; outline:none }

/* NAV */
.nav{
  position:sticky; top:0; z-index:100;
  background:var(--nav-bg);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line);
}
.nav-inner{ max-width:1000px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:12px 22px }
.brand{ display:flex; align-items:center; gap:10px; font-weight:600; font-size:17px; letter-spacing:-.01em }
.brand img{ width:28px; height:28px; filter:var(--icon-shadow-sm) }
.nav-links{ display:flex; gap:26px; font-size:14px; color:var(--fg-dim) }
.nav-links a:hover{ color:var(--fg) }
.nav-cta{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 15px; border-radius:999px;
  background:var(--fg); color:#fff; font-size:13px; font-weight:500; transition:opacity .15s;
}
.nav-cta:hover{ opacity:.85 }
@media (max-width:720px){ .nav-links{ display:none } }

.wrap{ max-width:980px; margin:0 auto; padding:0 22px }

/* HERO */
.hero{ padding:80px 0 40px; text-align:center }
.hero-icon{ width:112px; height:112px; margin:0 auto 28px; display:block; filter:var(--icon-shadow) }
.eyebrow{
  display:inline-block; padding:6px 14px;
  background:rgba(255,106,0,0.10); color:var(--accent);
  border-radius:999px; font-size:12px; font-weight:600;
  letter-spacing:0.06em; text-transform:uppercase; margin-bottom:22px;
}
h1{
  font-size:clamp(40px, 6vw, 72px); font-weight:700;
  letter-spacing:-0.03em; line-height:1.05;
  margin:0 0 22px; color:var(--fg);
}
.hero-lede{
  font-size:clamp(19px, 2vw, 24px); line-height:1.4;
  color:var(--fg-dim); max-width:700px; margin:0 auto 40px; font-weight:400;
}
.cta-row{ display:inline-flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-bottom:60px }
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 28px; border-radius:999px;
  font-size:16px; font-weight:500;
  transition:transform .15s, opacity .15s;
}
.btn:hover{ transform:translateY(-1px) }
.btn-primary{ background:var(--fg); color:var(--bg) }
.btn-secondary{ background:transparent; color:var(--fg); border:1px solid var(--line-strong) }
.nav-cta{ background:var(--fg); color:var(--bg) }
.step-num{ background:var(--fg); color:var(--bg) }

/* SCREENSHOTS — the source images already carry an iPhone frame, so no extra chrome. */
.hero-shot{ max-width:340px; margin:0 auto }
.hero-shot img{ width:100%; height:auto; filter:drop-shadow(0 30px 60px rgba(0,0,0,0.18)) }
.split-shot{ max-width:320px; justify-self:center }
.split-shot img{ width:100%; height:auto; filter:drop-shadow(0 20px 40px rgba(0,0,0,0.15)) }

/* App Store official badge */
.app-store-badge{ display:inline-block; transition:opacity .15s, transform .15s }
.app-store-badge:hover{ opacity:.85; transform:translateY(-1px) }
.app-store-badge img{ display:block; height:52px; width:auto }
:root[data-theme="dark"] .app-store-badge img{ filter:invert(1) hue-rotate(180deg) }
@media (prefers-color-scheme: dark){
  :root:not([data-theme]) .app-store-badge img{ filter:invert(1) hue-rotate(180deg) }
}

/* SECTIONS */
section{ padding:100px 0 }
section.alt{ background:var(--panel) }
.section-eyebrow{
  font-size:13px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--accent); margin-bottom:14px;
}
h2{
  font-size:clamp(32px, 4.4vw, 52px); font-weight:700;
  letter-spacing:-0.02em; line-height:1.1; margin:0 0 20px;
  color:var(--fg); max-width:780px;
}
h2.centered{ margin-left:auto; margin-right:auto; text-align:center }
.section-lede{
  font-size:clamp(17px, 1.6vw, 21px);
  color:var(--fg-dim); line-height:1.5;
  max-width:640px; margin-bottom:56px;
}
.section-lede.centered{ text-align:center; margin-left:auto; margin-right:auto }

/* SPLIT */
.split{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:80px; align-items:center }
.split.flip{ grid-template-columns:0.9fr 1.1fr }
.split.flip .split-copy{ order:2 }
.split.flip .split-shot{ order:1 }
@media (max-width:820px){
  .split, .split.flip{ grid-template-columns:1fr; gap:40px }
  .split.flip .split-copy{ order:1 }
  .split.flip .split-shot{ order:2 }
}
.split-copy h2{ font-size:clamp(28px, 3.6vw, 42px); margin-bottom:16px }
.split-copy p{ color:var(--fg-dim); font-size:17px; line-height:1.55; margin:0 0 18px }
.split-copy ul{ list-style:none; padding:0; margin:24px 0 0 }
.split-copy ul li{
  position:relative; padding:8px 0 8px 24px;
  color:var(--fg); font-size:15px; line-height:1.5;
  border-top:1px solid var(--line);
}
.split-copy ul li::before{
  content:""; position:absolute; left:0; top:16px;
  width:8px; height:8px; border-radius:999px; background:var(--accent);
}

/* APPLE STRIP */
.apple-strip{ background:transparent; padding:100px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
.apple-strip-inner{
  display:grid;
  grid-template-columns:300px 1fr;
  grid-template-areas:
    "badge header"
    "badge links";
  gap:20px 60px; align-items:center;
}
.apple-header{ grid-area:header; align-self:end }
.apple-badge-wrap{ grid-area:badge; display:flex; justify-content:center; align-items:center }
.apple-features{ grid-area:links; align-self:start }
.laurel-art{ width:100%; max-width:300px; height:auto; display:block }
@media (max-width:760px){
  .apple-strip{ padding:56px 0 }
  .apple-strip-inner{
    grid-template-columns:1fr;
    grid-template-areas:"header" "badge" "links";
    gap:0; text-align:center;
  }
  .apple-header{ margin:0 }
  .apple-header .apple-heading{ font-size:26px; margin:0 }
  .apple-header .section-eyebrow{ margin-bottom:8px }
  .apple-badge-wrap{ margin:14px 0 }
  .apple-features{ margin:0 }
  .apple-features a{ padding:12px 0; font-size:14px }
  .laurel-art{ max-width:200px }
}
:root[data-theme="dark"] .laurel-art{ filter:invert(1) }
@media (prefers-color-scheme: dark){
  :root:not([data-theme]) .laurel-art{ filter:invert(1) }
}
.apple-copy .section-eyebrow{ color:var(--accent) }
.apple-heading{ color:var(--fg) }
.apple-features li{ border-top:1px solid var(--line) }
.apple-features li:last-child{ border-bottom:1px solid var(--line) }
.apple-features a{ color:var(--fg) }
.apple-features .arrow{ color:var(--fg-dim) }
.apple-copy .section-eyebrow{ color:var(--apple-blue-dim) }
.apple-heading{
  font-size:clamp(24px, 2.6vw, 32px); font-weight:700;
  letter-spacing:-0.01em; margin:0 0 22px; color:var(--apple-blue-fg);
}
.apple-features{ list-style:none; padding:0; margin:0 }
.apple-features li{ border-top:1px solid rgba(127,127,127,0.20) }
.apple-features li:last-child{ border-bottom:1px solid rgba(127,127,127,0.20) }
.apple-features a{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px 0; color:var(--apple-blue-fg); font-size:15px; font-weight:500;
  transition:opacity .15s;
}
.apple-features a:hover{ opacity:.75 }
.apple-features .arrow{ color:var(--apple-blue-dim); font-size:16px; transition:transform .15s }
.apple-features a:hover .arrow{ transform:translateX(3px) }

/* PRESS STRIP — thin logo row on home */
.press-strip-thin{ padding:60px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
.press-strip-label{
  text-align:center; margin:0 0 28px;
  font-size:12px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--fg-dim);
}
.press-logos-row{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:36px 44px;
}
.press-logo-tile{
  display:inline-flex; align-items:center; justify-content:center;
  height:38px; padding:4px 10px;
  opacity:.6; filter:grayscale(100%);
  transition:opacity .15s, filter .15s, transform .15s;
}
.press-logo-tile:hover{ opacity:1; filter:grayscale(0%); transform:translateY(-1px) }
.press-logo-tile img{ height:100%; width:auto; max-width:150px; object-fit:contain }
.press-strip-more{ margin:32px 0 0; text-align:center; font-size:15px }
.press-strip-more a{ color:var(--accent); font-weight:600; border-bottom:1px solid rgba(255,106,0,0.35); padding-bottom:1px }
.press-strip-more a:hover{ border-bottom-color:var(--accent) }
.press-logo-tile--combo{ display:inline-flex; align-items:center; gap:8px }
.press-logo-tile--combo img{ height:26px; width:auto }
.press-logo-text{ font-size:15px; font-weight:600; letter-spacing:-0.005em; color:#1d1d1f }
:root[data-theme="dark"] .press-logo-tile--combo .press-logo-text,
:root[data-theme="dark"] .press-logo-tile--combo img{ /* keep as-is on light chip */ }
.coverage-logo--combo{ display:inline-flex; align-items:center; gap:10px }
.coverage-logo--combo img{ height:26px; width:auto }
/* coverage-logo container is always white, so text must be dark */
.coverage-logo--combo span{ font-weight:600; font-size:15px; color:#1d1d1f }
/* In dark mode, place logos on a light chip so they stay readable at their natural colors. */
:root[data-theme="dark"] .press-logo-tile{
  background:#f5f5f7; border-radius:8px; padding:6px 12px; height:42px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme]) .press-logo-tile{
    background:#f5f5f7; border-radius:8px; padding:6px 12px; height:42px;
  }
}

/* LANGUAGES */
.lang-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr));
  gap:12px; max-width:900px; margin:0 auto;
}
.lang-chip{
  padding:14px 18px; border:1px solid var(--card-border); background:var(--card);
  border-radius:14px; font-size:15px; font-weight:500;
  text-align:center; transition:border-color .15s;
}
.lang-chip:hover{ border-color:var(--line-strong) }
.lang-count{ text-align:center; font-size:14px; color:var(--fg-dim); margin-top:32px }

/* GRID */
.grid-3{ display:grid; grid-template-columns:repeat(3, 1fr); gap:22px }
@media (max-width:820px){ .grid-3{ grid-template-columns:1fr } }
.card{ background:var(--card); border:1px solid var(--card-border); border-radius:22px; padding:32px 28px }
.lang-chip{ background:var(--card); border-color:var(--card-border) }
.card h3{ font-size:19px; font-weight:600; letter-spacing:-.01em; margin:0 0 10px; color:var(--fg) }
.card p{ color:var(--fg-dim); font-size:15px; line-height:1.5; margin:0 }

/* STEPS */
.steps{ display:grid; grid-template-columns:repeat(3, 1fr); gap:32px; max-width:900px; margin:0 auto }
@media (max-width:820px){ .steps{ grid-template-columns:1fr; gap:22px } }
.step-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:999px;
  background:var(--fg); color:var(--bg); font-size:16px; font-weight:600; margin-bottom:16px;
}
.step h3{ font-size:20px; font-weight:600; margin:0 0 8px; letter-spacing:-.01em }
.step p{ color:var(--fg-dim); font-size:15px; line-height:1.5; margin:0 }

/* TECH */
.tech-list{ max-width:700px; margin:0 auto; list-style:none; padding:0 }
.tech-list li{ padding:22px 0; border-top:1px solid var(--line); color:var(--fg); font-size:16px; line-height:1.55 }
.tech-list li:last-child{ border-bottom:1px solid var(--line) }
.tech-list li strong{ display:block; font-weight:600; margin-bottom:4px }
.tech-list li span{ color:var(--fg-dim); font-size:15px }

/* FINAL CTA */
.final-cta{ text-align:center; padding:120px 0 100px }
.final-cta h2{ max-width:none; margin-left:auto; margin-right:auto; text-align:center }
.final-cta p{ color:var(--fg-dim); font-size:19px; max-width:520px; margin:0 auto 36px }

/* SUB-PAGE (press/support/privacy) */
.page{ padding:80px 0 40px }
.page .wrap{ max-width:820px }
.page h1{ font-size:clamp(36px, 5vw, 60px); font-weight:700; letter-spacing:-0.03em; line-height:1.05; margin:0 0 16px }
.page .lede{ font-size:19px; color:var(--fg-dim); margin:0 0 40px; max-width:640px }
.page h2{ font-size:26px; font-weight:600; letter-spacing:-0.01em; margin:48px 0 12px; max-width:none }
.page h3{ font-size:18px; font-weight:600; margin:32px 0 8px }
.page p{ color:var(--fg); margin:0 0 14px }
.page p.muted{ color:var(--fg-dim) }
.page ul{ padding-left:22px; margin:0 0 18px }
.page ul li{ margin:0 0 6px }
.page a.link{ color:var(--accent); border-bottom:1px solid rgba(255,106,0,0.35) }
.page a.link:hover{ border-bottom-color:var(--accent) }
.page hr{ border:none; border-top:1px solid var(--line); margin:48px 0 }

.card-list{ list-style:none; padding:0; margin:0 }
.card-list li{ padding:22px 0; border-top:1px solid var(--line); color:var(--fg); font-size:16px; line-height:1.55 }
.card-list li:last-child{ border-bottom:1px solid var(--line) }
.card-list li strong{ display:block; font-weight:600; margin-bottom:4px }
.card-list li span{ color:var(--fg-dim); font-size:15px }

/* Apple inline row on press page */
.apple-inline{ display:flex; align-items:center; gap:16px; margin:16px 0 20px }
.apple-inline p{ margin:0 }
.apple-mark-inline{ color:var(--fg); flex-shrink:0 }

/* Press coverage items */
.callout-top{
  background:var(--panel); border:1px solid var(--line);
  border-radius:16px; padding:20px 24px; margin:0 0 32px;
}
.callout-top p{ margin:0 }
.coverage-item{
  padding:26px 0; border-top:1px solid var(--line);
}
.coverage-item:last-of-type{ border-bottom:1px solid var(--line) }
.coverage-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap; margin-bottom:12px;
}
.coverage-logo{
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff; padding:10px 16px; border-radius:10px;
  border:1px solid var(--line);
  min-height:52px;
  transition:transform .15s;
  flex-shrink:0;
}
.coverage-logo:hover{ transform:translateY(-1px) }
.coverage-logo img{
  max-height:28px; max-width:200px;
  width:auto; height:auto;
  object-fit:contain;
  display:block;
}
.coverage-date{
  font-size:11px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--fg-dim);
}
.coverage-title{
  font-size:19px; font-weight:600; line-height:1.35;
  margin:0 0 8px; letter-spacing:-0.005em;
}
.coverage-title a{ color:var(--fg); border-bottom:1px solid rgba(255,106,0,0.35) }
.coverage-title a:hover{ color:var(--accent); border-bottom-color:var(--accent) }

/* THEME TOGGLE (compact, lives in footer row) */
.theme-toggle{
  display:inline-flex; gap:2px; padding:2px;
  border-radius:999px; border:1px solid var(--line-strong);
}
.theme-toggle button{
  appearance:none; -webkit-appearance:none;
  background:transparent; border:none; cursor:pointer;
  padding:4px 12px; border-radius:999px;
  font:500 13px var(--font); color:var(--fg-dim);
  transition:background .15s, color .15s;
}
.theme-toggle button:hover{ color:var(--fg) }
.theme-toggle button[aria-pressed="true"]{ background:var(--fg); color:var(--bg) }

/* Screenshot images render lighter borders in dark mode so device chrome doesn't clash */
:root[data-theme="dark"] .hero-shot img,
:root[data-theme="dark"] .split-shot img{ box-shadow:0 20px 60px -10px rgba(0,0,0,0.6) }

/* FOOTER */
.foot-quote{ padding:56px 0; border-top:1px solid var(--line); text-align:center }
.foot-tagline{
  display:inline-flex; align-items:center;
  padding:5px 14px;
  border:1px solid var(--line-strong);
  border-radius:999px;
  font-size:13px; font-weight:500;
  color:var(--fg);
  letter-spacing:-0.005em;
}
footer{ border-top:1px solid var(--line); padding:32px 0 40px; font-size:14px; color:var(--fg-dim) }
.foot-row{
  display:flex; flex-wrap:wrap; gap:16px 22px;
  justify-content:space-between; align-items:center;
  padding-bottom:18px; border-bottom:1px solid var(--line);
}
.foot-links{ display:flex; gap:22px; flex-wrap:wrap }
.foot-links a:hover{ color:var(--fg) }
.foot-bottom{ padding-top:18px; font-size:13px }