/* Imagecation launch redesign (2026-08, animated design direction).
   Ported from the design draft into classes: the draft used inline styles and
   style-hover attributes that only work inside the design canvas. Reveals are
   gated on html.ic-js so a no-JS visit and every crawler sees the full page
   with nothing hidden; motion is damped, never fully stopped, under
   prefers-reduced-motion. */

:root {
  --ic-sand: #F6F1E9;
  --ic-paper: #FFFDF8;
  --ic-ink: #152228;
  --ic-ink-2: #4E606A;
  --ic-ink-3: #55656D;
  --ic-teal: #08637D;
  --ic-teal-lit: #0E93B4;
  --ic-deep: #075366;
  --ic-amber: #F6AF79;
  --ic-rust: #9C4411;
  --ic-line: rgba(21, 34, 40, .12);
  --ic-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --ic-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, "Segoe UI", Roboto, sans-serif;
  --ic-ease: cubic-bezier(.19, 1, .22, 1);
}

.ic { margin: 0; background: var(--ic-sand); color: var(--ic-ink); font-family: var(--ic-sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
.ic a { color: var(--ic-teal); text-decoration: none; }
.ic a:hover { color: var(--ic-teal-lit); }
/* component links carry their own colour and must win over the rule above */
.ic a.ic-store, .ic a.ic-store:hover { color: var(--ic-paper); }
.ic a.ic-store--light, .ic a.ic-store--light:hover { color: var(--ic-ink); }
.ic a.ic-brand, .ic a.ic-brand:hover { color: var(--ic-ink); }
.ic a.ic-nav-get { color: #FFFFFF; }
.ic a.ic-post, .ic a.ic-post:hover { color: var(--ic-ink); }
.ic-topbar .ic a.ic-brand, .ic-topbar a.ic-brand { color: var(--ic-sand); }
/* height:auto is load bearing: images carry width/height attributes for layout
   stability, and without it the height attribute applies as a presentational
   hint and stretches them. */
.ic img { display: block; max-width: 100%; height: auto; }
.ic picture { display: contents; }
.ic section { scroll-margin-top: 20px; }

@keyframes ic-ping { 0% { transform: scale(.5); opacity: .55; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes ic-tick { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ic-drift { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -7px, 0); } }
@keyframes ic-marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- shared ---------- */

.ic-wrap { max-width: 1400px; margin: 0 auto; }
.ic-kicker { font-family: var(--ic-mono); font-size: 12px; letter-spacing: .2em; color: var(--ic-teal-lit); }
.ic-h2 { margin: 0; font-size: clamp(26px, 3.2vw, 44px); line-height: 1.08; letter-spacing: -.03em; font-weight: 700; }
.ic-lede { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ic-ink-2); text-wrap: pretty; }

html.ic-js .ic-rv { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ic-ease), transform .7s var(--ic-ease); transition-delay: var(--rvd, 0s); }
html.ic-js .ic-rv.is-in { opacity: 1; transform: none; }

/* App Store button, Apple logo plus one line label */
.ic-store { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 14px; background: var(--ic-ink); color: var(--ic-paper); box-shadow: 0 20px 40px -22px rgba(21, 34, 40, .8); transition: transform .35s var(--ic-ease); }
.ic-store:hover { transform: translateY(-2px); color: var(--ic-paper); }
.ic-store svg { width: 15px; height: 18px; flex: none; fill: currentColor; }
.ic-store span { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.ic-store--light { background: var(--ic-paper); color: var(--ic-ink); }
.ic-store--light:hover { color: var(--ic-ink); }
.ic-note { font-family: var(--ic-mono); font-size: 12.5px; color: var(--ic-ink-3); }

/* ---------- header ---------- */

.ic-header { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px clamp(18px, 4vw, 56px); }
.ic-brand { display: flex; align-items: center; gap: 11px; color: var(--ic-ink); }
.ic-brand:hover { color: var(--ic-ink); }
.ic-brand img { width: 34px; height: 34px; border-radius: 9px; box-shadow: 0 6px 16px -8px rgba(7, 83, 102, .6); }
.ic-brand span { font-size: 15px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.ic-nav { display: flex; align-items: center; gap: clamp(12px, 2.2vw, 30px); font-size: 13.5px; font-weight: 500; }
.ic-nav > a { color: var(--ic-ink-2); white-space: nowrap; }
.ic-nav > a:hover { color: var(--ic-teal); }
.ic-nav-get { display: inline-flex; align-items: center; gap: 8px; padding: 9px 17px; border-radius: 11px; background: var(--ic-teal); color: #FFFFFF !important; font-weight: 600; }
.ic-nav-get:hover { background: var(--ic-teal-lit); }
/* the switcher markup is injected by build_i18n.py, styled only here */
/* The switcher shows the two letter code; the full language name stays in
   the markup for people and screen readers (founder 2026-08-19). */
.ic-nav .lang-switch { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.ic-nav .lang-switch a { color: var(--ic-ink-3); }
.ic-nav .lang-switch a:hover { color: var(--ic-teal); }
.ic-nav .lang-switch a[aria-current="true"] { color: var(--ic-teal); font-weight: 700; }
.ic-nav .lang-switch .lang-full { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ic-lang-select { display: none; }

/* ---------- hero ---------- */

.ic-hero { position: relative; overflow: hidden; background: var(--ic-sand); }
.ic-hero-grid { position: absolute; inset: 0; z-index: 0; background-image: linear-gradient(rgba(21, 34, 40, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(21, 34, 40, .055) 1px, transparent 1px); background-size: 56px 56px; }
.ic-hero-wash { position: absolute; inset: 0; z-index: 0; background: radial-gradient(58% 52% at 78% 22%, rgba(246, 175, 121, .4) 0%, rgba(246, 241, 233, 0) 62%), radial-gradient(48% 48% at 8% 88%, rgba(225, 235, 239, .85) 0%, rgba(246, 241, 233, 0) 70%); }
.ic-dots { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

/* the pointer pin with its coordinate readout */
.ic-pin { position: absolute; z-index: 2; top: 0; left: 0; pointer-events: none; opacity: 0; transition: opacity .5s ease; }
.ic-pin-inner { position: relative; width: 0; height: 0; }
.ic-facing { position: absolute; left: 0; top: -1px; width: 190px; height: 2px; transform-origin: 0 50%; background: repeating-linear-gradient(90deg, var(--ic-teal) 0 9px, transparent 9px 17px); }
.ic-pin-dot { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--ic-teal); box-shadow: 0 0 0 4px rgba(255, 253, 248, .9), 0 6px 18px rgba(8, 99, 125, .4); }
.ic-pin-ping { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--ic-teal); animation: ic-ping 2.2s cubic-bezier(.2, .7, .3, 1) infinite; }
.ic-readout { position: absolute; left: 26px; top: 14px; display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-radius: 12px; background: rgba(255, 253, 248, .94); border: 1px solid var(--ic-line); box-shadow: 0 14px 30px -18px rgba(21, 34, 40, .5); font-family: var(--ic-mono); font-size: 11.5px; line-height: 1.45; white-space: nowrap; }
.ic-readout .ic-readout-head { letter-spacing: .16em; color: var(--ic-teal); }
.ic-readout .ic-bearing { color: var(--ic-rust); }

.ic-hero-body { position: relative; z-index: 4; max-width: 1400px; margin: 0 auto; padding: clamp(26px, 6vh, 70px) clamp(18px, 4vw, 56px) clamp(30px, 5vh, 60px); display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(26px, 4vw, 64px); align-items: center; }
.ic-hero-copy { display: flex; flex-direction: column; gap: clamp(18px, 2.6vh, 28px); min-width: 0; }
.ic-badge { display: inline-flex; align-items: center; gap: 9px; align-self: flex-start; padding: 7px 13px; border-radius: 999px; background: rgba(255, 253, 248, .8); border: 1px solid var(--ic-line); font-family: var(--ic-mono); font-size: 11.5px; letter-spacing: .08em; color: var(--ic-ink-2); }
.ic-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--ic-teal-lit); flex: none; }
.ic-h1 { margin: 0; font-size: clamp(40px, 6.6vw, 86px); line-height: 1.02; letter-spacing: -.035em; font-weight: 700; text-wrap: balance; }
.ic-h1 span { display: block; }
html.ic-js .ic-h1 span { animation: ic-tick .9s var(--ic-ease) both; animation-delay: var(--tick, 0s); }
.ic-h1 .ic-h1-b { color: var(--ic-teal); }
.ic-hero-lede { margin: 0; max-width: 52ch; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; color: var(--ic-ink-2); text-wrap: pretty; }
.ic-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
/* The first half second: a camera finder locked on the product. The phone
   shows the real spot map, viewfinder corners frame it, and the focus pin
   hops from spot to spot with the standing position retyping beside it, like
   tapping to focus on places to stand (founder 2026-08-19). */
.ic-finder { position: relative; justify-self: center; padding: 22px; }
.ic-fcorner { position: absolute; width: 30px; height: 30px; border: 2px solid rgba(21, 34, 40, .4); }
.ic-fcorner--a { top: 0; left: 0; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
.ic-fcorner--b { top: 0; right: 0; border-left: 0; border-bottom: 0; border-radius: 0 6px 0 0; }
.ic-fcorner--c { bottom: 0; left: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 6px; }
.ic-fcorner--d { bottom: 0; right: 0; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; }
.ic-finder-phone { position: relative; width: min(300px, 27vw); }
.ic-finder-phone img { width: 100%; height: auto; display: block; }
.ic-finder-phone img.is-ready { filter: drop-shadow(0 40px 60px rgba(21, 34, 40, .35)); }
.ic-finder-city { position: absolute; left: 14px; top: 21%; z-index: 3; padding: 4px 10px; border-radius: 999px; background: rgba(13, 20, 23, .62); font-family: var(--ic-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ic-sand); }
.ic-pin--finder { position: absolute; z-index: 4; left: 28%; top: 32%; opacity: 1; transition: left .7s var(--ic-ease), top .7s var(--ic-ease); }
.ic-hero-kicker { font-family: var(--ic-mono); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ic-teal); }

.ic-stats { position: relative; z-index: 4; display: flex; flex-wrap: wrap; gap: 1px; background: var(--ic-line); border-top: 1px solid var(--ic-line); border-bottom: 1px solid var(--ic-line); }
.ic-stats > div { flex: 1 1 240px; padding: 22px clamp(18px, 4vw, 56px); background: var(--ic-sand); display: flex; flex-direction: column; gap: 4px; }
.ic-stat-num { font-family: var(--ic-mono); font-size: clamp(26px, 2.6vw, 38px); line-height: 1; letter-spacing: -.02em; color: var(--ic-teal); }
.ic-stat-label { font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ic-ink-3); }

/* ---------- ticker ---------- */

.ic-ticker { overflow: hidden; background: var(--ic-ink); color: var(--ic-sand); padding: 11px 0; }
.ic-ticker-row { display: flex; width: max-content; gap: 26px; font-family: var(--ic-mono); font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(246, 241, 233, .72); will-change: transform; }
html.ic-js .ic-ticker-row { animation: ic-marq 46s linear infinite; }
.ic-ticker-row i { color: var(--ic-amber); font-style: normal; }

/* ---------- the angle (scroll driven feature list) ---------- */

.ic-angle { position: relative; background: var(--ic-paper); }
html.ic-js .ic-angle { height: 320vh; }
.ic-angle-stage { display: flex; align-items: center; min-height: 100svh; padding: clamp(40px, 7vh, 90px) clamp(18px, 4vw, 56px); }
html.ic-js .ic-angle-stage { position: sticky; top: 0; }
.ic-angle-grid { width: 100%; max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(26px, 4vw, 70px); align-items: center; }
.ic-angle-copy { display: flex; flex-direction: column; gap: clamp(10px, 1.8vh, 26px); min-width: 0; }
.ic-angle-copy h2 { margin: 0; font-size: clamp(24px, min(3.6vw, 4.6vh), 50px); line-height: 1.06; letter-spacing: -.03em; font-weight: 700; }

.ic-feats { display: flex; flex-direction: column; }
.ic-feat { display: flex; align-items: flex-start; gap: 16px; padding: clamp(9px, 1.5vh, 18px) 8px; border: 0; border-top: 1px solid var(--ic-line); background: transparent; text-align: left; font-family: inherit; cursor: pointer; width: 100%; }
.ic-feat:last-child { border-bottom: 1px solid var(--ic-line); }
.ic-feat-n { font-family: var(--ic-mono); font-size: 12px; letter-spacing: .1em; color: var(--ic-teal-lit); padding-top: 4px; flex: none; }
.ic-feat-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ic-feat-title { font-size: clamp(16px, 2.4vh, 18.5px); font-weight: 600; letter-spacing: -.015em; color: var(--ic-ink); }
.ic-feat-body { font-size: clamp(13px, 1.9vh, 14.5px); line-height: 1.5; color: var(--ic-ink-2); }
html.ic-js .ic-feat:not(.is-on) .ic-feat-body { display: none; }
html.ic-js .ic-feat:not(.is-on) .ic-feat-title { color: var(--ic-ink-2); }

.ic-angle-shot { position: relative; justify-self: center; display: flex; flex-direction: column; align-items: center; height: min(663px, 62svh); }
.ic-angle-shot::before { content: ""; position: absolute; inset: -6% -18%; background: radial-gradient(closest-side, rgba(246, 175, 121, .35), rgba(246, 175, 121, 0) 70%); }
.ic-angle-screens { position: relative; flex: 1; min-height: 0; aspect-ratio: 654 / 1314; width: auto; }
.ic-angle-screens img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .45s ease, transform .6s var(--ic-ease); }
.ic-angle-screens img.is-on { opacity: 1; }
html:not(.ic-js) .ic-angle-screens img:first-child { opacity: 1; }
.ic-dots-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: clamp(10px, 1.6vh, 18px); flex: none; }
.ic-dots-row i { width: 26px; height: 3px; border-radius: 3px; background: rgba(21, 34, 40, .16); transition: background .3s ease; }
.ic-dots-row i.is-on { background: var(--ic-teal); }

/* Apple require the Apple Weather mark and a link to their data sources
   page wherever WeatherKit data is shown. */
.ic-wk { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding: 8px 0; }
.ic-wk-mark { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--ic-ink); }
.ic-wk-mark svg { width: 11px; height: 13px; fill: currentColor; }
.ic-wk-note { font-size: 12px; color: var(--ic-ink-3); }
.ic-wk:hover .ic-wk-note { color: var(--ic-teal); text-decoration: underline; }

.ic-wk-inline { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; color: var(--ic-ink); white-space: nowrap; }
.ic-wk-inline svg { width: 9px; height: 11px; fill: currentColor; }

/* ---------- the light ---------- */

.ic-light { background: var(--ic-deep); color: var(--ic-sand); padding: clamp(56px, 9vh, 110px) clamp(18px, 4vw, 56px); transition: background .6s ease; }
/* Scrolling carries the day: the section holds one screen while the scroll
   drives the slider from sunrise to sunset (founder 2026-08-19). The slider
   still responds to a drag between scroll steps. */
html.ic-js .ic-light[data-sun] { height: 250vh; padding: 0; }
html.ic-js .ic-light[data-sun] .ic-light-inner { position: sticky; top: 0; height: 100svh; max-height: 100vh; justify-content: center; padding: clamp(30px, 5vh, 64px) clamp(18px, 4vw, 56px); box-sizing: border-box; }
.ic-light-inner { max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(24px, 4vh, 42px); }
.ic-light-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 22px; }
.ic-light-head > div { display: flex; flex-direction: column; gap: 14px; max-width: 44ch; }
.ic-light-head .ic-kicker { color: var(--ic-amber); }
.ic-light-head h2 { margin: 0; font-size: clamp(28px, 3.6vw, 50px); line-height: 1.06; letter-spacing: -.03em; font-weight: 700; color: var(--ic-paper); }
.ic-light-head p { margin: 0; max-width: 38ch; font-size: 15px; line-height: 1.6; color: rgba(246, 241, 233, .76); }
/* overflow hidden so the arc and the sun disc clip at the rounded edge
   instead of drawing past it (founder 2026-08-19) */
.ic-sun { position: relative; padding: clamp(18px, 2.4vw, 32px); border-radius: 24px; background: rgba(246, 241, 233, .07); border: 1px solid rgba(246, 241, 233, .16); overflow: hidden; }
.ic-sun svg { display: block; width: 100%; max-width: 900px; margin: 0 auto; height: auto; overflow: visible; }
.ic-sun-controls { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(16px, 2.4vw, 40px); margin-top: 22px; }
.ic-sun-controls label { flex: 1 1 260px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ic-sun-controls label span { font-family: var(--ic-mono); font-size: 11.5px; letter-spacing: .14em; color: rgba(246, 241, 233, .6); }
.ic-range { -webkit-appearance: none; appearance: none; background: transparent; width: 100%; height: 20px; }
.ic-range::-webkit-slider-runnable-track { height: 3px; background: rgba(246, 241, 233, .3); border-radius: 3px; }
.ic-range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -9px; border-radius: 50%; background: var(--ic-amber); border: 3px solid var(--ic-paper); box-shadow: 0 4px 12px rgba(8, 99, 125, .35); cursor: grab; }
.ic-range::-moz-range-track { height: 3px; background: rgba(246, 241, 233, .3); border-radius: 3px; }
.ic-range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--ic-amber); border: 3px solid var(--ic-paper); }
.ic-sun-readout { flex: 1 1 320px; display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 1px; background: rgba(246, 241, 233, .16); border-radius: 14px; overflow: hidden; }
.ic-sun-readout > div { padding: 14px 20px; background: var(--ic-deep); display: flex; flex-direction: column; gap: 3px; min-width: 120px; }
.ic-sun-big { font-family: var(--ic-mono); font-size: 24px; line-height: 1; color: var(--ic-paper); }
.ic-sun-phase { font-size: 16px; font-weight: 600; color: var(--ic-amber); }
.ic-sun-cap { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(246, 241, 233, .6); }

/* ---------- how it reads ---------- */

.ic-reads { background: var(--ic-sand); padding: clamp(56px, 9vh, 110px) clamp(18px, 4vw, 56px); }
.ic-reads-grid { width: 100%; max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: clamp(24px, 3vw, 50px); }
.ic-reads-grid > div { display: flex; flex-direction: column; gap: 14px; }
.ic-reads-list { gap: 1px !important; background: rgba(21, 34, 40, .12); border-radius: 18px; overflow: hidden; border: 1px solid var(--ic-line); }
.ic-reads-list > div { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; background: var(--ic-paper); }
.ic-reads-list .ic-n { font-family: var(--ic-mono); font-size: 12px; color: var(--ic-teal-lit); padding-top: 3px; flex: none; }
.ic-reads-list p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ic-ink); }

.ic-proof { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; max-width: 46ch; }
.ic-proof li { position: relative; padding-left: 22px; font-size: 14.5px; line-height: 1.55; color: rgba(246, 241, 233, .8); }
.ic-proof li::before { content: ""; position: absolute; left: 0; top: .58em; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--ic-amber); }

/* ---------- countries ---------- */

.ic-countries { position: relative; background: var(--ic-paper); padding: clamp(56px, 9vh, 110px) clamp(18px, 4vw, 56px); }
.ic-countries-inner { max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(22px, 3.4vh, 36px); }
.ic-countries-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; }
.ic-countries-head > div { display: flex; flex-direction: column; gap: 13px; max-width: 46ch; }
.ic-find { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 12px; background: var(--ic-sand); border: 1px solid var(--ic-line); min-width: 230px; }
.ic-find span { font-family: var(--ic-mono); font-size: 11.5px; letter-spacing: .12em; color: var(--ic-ink-3); }
.ic-find input { flex: 1; min-width: 0; border: 0; background: transparent; font-family: inherit; font-size: 14.5px; color: var(--ic-ink); outline: none; }

.ic-ctable { border: 1px solid var(--ic-line); border-radius: 16px; overflow: hidden; }
.ic-ctable table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.ic-ctable thead th { text-align: left; padding: 13px 18px; background: var(--ic-sand); font-family: var(--ic-mono); font-size: 11px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--ic-ink-3); }
.ic-ctable thead th.num, .ic-ctable td.num { text-align: right; font-family: var(--ic-mono); font-variant-numeric: tabular-nums; }
.ic-ctable td { padding: 13px 18px; background: var(--ic-paper); border-top: 1px solid rgba(21, 34, 40, .08); }
.ic-ctable tr.is-hidden { display: none; }
/* the long tail of the table is folded away until asked for */
html.ic-js .ic-ctable tr.ic-crow-more { display: none; }
html.ic-js .ic-ctable.is-open tr.ic-crow-more { display: table-row; }
/* a filtered out row stays hidden even when the tail is unfolded */
html.ic-js .ic-ctable tr.is-hidden, html.ic-js .ic-ctable.is-open tr.is-hidden { display: none; }
.ic-ctable-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.ic-more { padding: 11px 20px; border-radius: 12px; border: 1px solid rgba(8, 99, 125, .35); background: var(--ic-sand); color: var(--ic-teal); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .2s ease, border-color .2s ease; }
.ic-more:hover { background: #E8EFF1; border-color: var(--ic-teal); }
html:not(.ic-js) .ic-more { display: none; }
.ic-ctable-note { margin: 0; font-family: var(--ic-mono); font-size: 11.5px; letter-spacing: .1em; color: var(--ic-ink-3); text-transform: uppercase; }
.ic-cempty { padding: 20px 18px; background: var(--ic-paper); font-size: 14.5px; color: var(--ic-ink-2); }

/* ---------- blog ---------- */

.ic-blog { background: var(--ic-sand); padding: clamp(56px, 9vh, 110px) clamp(18px, 4vw, 56px); }
.ic-blog-inner { max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(22px, 3.4vh, 36px); }
.ic-blog-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px; }
.ic-posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.ic-post { display: flex; flex-direction: column; gap: 10px; padding: clamp(20px, 2.2vw, 28px); border-radius: 18px; background: var(--ic-paper); border: 1px solid var(--ic-line); color: var(--ic-ink) !important; transition: border-color .3s ease, transform .3s var(--ic-ease); }
.ic-post:hover { border-color: rgba(8, 99, 125, .45); transform: translateY(-2px); }
.ic-post-tag { align-self: flex-start; font-family: var(--ic-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ic-teal-lit); }
.ic-post-title { font-size: clamp(17px, 1.6vw, 20px); font-weight: 600; letter-spacing: -.015em; line-height: 1.25; }
.ic-post-sub { font-size: 14px; line-height: 1.55; color: var(--ic-ink-2); }

/* ---------- get ---------- */

.ic-get { position: relative; background: var(--ic-ink); color: var(--ic-sand); padding: clamp(56px, 9vh, 110px) clamp(18px, 4vw, 56px); overflow: hidden; }
.ic-get::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 70% at 80% 10%, rgba(246, 175, 121, .22), rgba(21, 34, 40, 0) 65%); }
.ic-get-inner { position: relative; max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(26px, 4vw, 70px); align-items: center; }
.ic-get-copy { display: flex; flex-direction: column; gap: 18px; }
.ic-get-copy .ic-kicker { color: var(--ic-amber); }
.ic-get-copy h2 { margin: 0; font-size: clamp(28px, 3.8vw, 54px); line-height: 1.04; letter-spacing: -.03em; font-weight: 700; color: var(--ic-paper); text-wrap: balance; }
.ic-get-copy p { margin: 0; max-width: 46ch; font-size: 15.5px; line-height: 1.6; color: rgba(246, 241, 233, .76); }
.ic-get .ic-note { color: rgba(246, 241, 233, .6); }
.ic-get-shot { justify-self: center; width: min(300px, 74vw); }
.ic-get-shot img { width: 100%; }
.ic-get-shot img.is-ready { filter: drop-shadow(0 40px 60px rgba(0, 0, 0, .5)); }

/* ---------- footer ---------- */

.ic-foot { background: var(--ic-ink); color: rgba(246, 241, 233, .7); padding: clamp(28px, 5vh, 48px) clamp(18px, 4vw, 56px); border-top: 1px solid rgba(246, 241, 233, .12); }
.ic-foot-inner { max-width: 1400px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 30px; }
.ic-foot-brand { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ic-sand); }
.ic-foot-brand img { width: 26px; height: 26px; border-radius: 7px; }
.ic-foot-links { display: flex; flex-wrap: wrap; gap: 20px; font-size: 13.5px; }
.ic-foot-links a { color: rgba(246, 241, 233, .7); }
.ic-foot-links a:hover { color: var(--ic-amber); }
.ic-foot-copy { font-size: 12.5px; color: rgba(246, 241, 233, .45); }

/* ---------- content pages (blog index, articles, legal) ---------- */

.ic-topbar { background: var(--ic-ink); }
.ic-topbar .ic-header { --on: var(--ic-sand); }
.ic-topbar .ic-brand, .ic-topbar .ic-brand:hover { color: var(--ic-sand); }
.ic-topbar .ic-nav > a { color: rgba(246, 241, 233, .72); }
.ic-topbar .ic-nav > a:hover { color: var(--ic-amber); }
.ic-topbar .ic-nav .lang-switch a { color: rgba(246, 241, 233, .5); }
.ic-topbar .ic-nav .lang-switch a:hover, .ic-topbar .ic-nav .lang-switch a[aria-current="true"] { color: var(--ic-amber); }
.ic-topbar .ic-nav-get { background: var(--ic-paper); color: var(--ic-ink) !important; }
.ic-topbar .ic-nav-get:hover { background: var(--ic-amber); }
.ic-topbar .ic-lang-select { color: var(--ic-sand); }

.ic-pagehead { position: relative; background: var(--ic-ink); color: var(--ic-sand); padding: clamp(18px, 3vh, 32px) clamp(18px, 4vw, 56px) clamp(44px, 7vh, 76px); overflow: hidden; }
.ic-pagehead::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 70% at 15% 0%, rgba(8, 99, 125, .55), rgba(21, 34, 40, 0) 68%); }
.ic-pagehead-inner { position: relative; max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.ic-pagehead .ic-kicker { color: var(--ic-amber); }
.ic-pagehead h1 { margin: 0; font-size: clamp(34px, 5.4vw, 68px); line-height: 1.03; letter-spacing: -.035em; font-weight: 700; color: var(--ic-paper); text-wrap: balance; max-width: 24ch; }
.ic-pagehead p { margin: 0; max-width: 56ch; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.6; color: rgba(246, 241, 233, .74); }
.ic-back { align-self: flex-start; font-size: 13.5px; font-weight: 600; color: rgba(246, 241, 233, .6); }
.ic-back:hover { color: var(--ic-amber); }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  /* Phones read this section top down: the phone pins near the top, the
     heading scrolls away behind it, and each feature fades in underneath as
     you keep going (founder 2026-08-19). The section is long so there is time
     to read each one. */
  html.ic-js .ic-angle { height: 480vh; }
  .ic-angle-grid { grid-template-columns: 1fr; gap: 0; }
  .ic-angle-copy { display: contents; }

  /* The heading keeps its place while the features change under it, the same
     way the feed section behaves and the reference the founder chose. */
  .ic-angle-copy .ic-kicker, .ic-angle-copy h2 { order: 1; }
  .ic-angle-copy h2 { font-size: clamp(23px, 6.4vw, 32px); margin-bottom: 12px; }

  .ic-angle-shot { order: 2; height: min(400px, 46svh); margin: 0 auto; }
  .ic-feats { order: 3; margin-top: clamp(14px, 2.5vh, 24px); }

  /* one feature at a time, the rest out of the way */
  html.ic-js .ic-feats { position: relative; min-height: 132px; overflow: clip; }
  html.ic-js .ic-feat { position: absolute; inset: 0; border: 0; opacity: 0; transform: translateY(38px); transition: opacity .45s ease, transform .6s var(--ic-ease); pointer-events: none; }
  html.ic-js .ic-feat.is-on { opacity: 1; transform: none; pointer-events: auto; }
  html.ic-js .ic-feat.is-past { opacity: 0; transform: translateY(-38px); }
  html.ic-js .ic-feat:last-child { border-bottom: 0; }
  html.ic-js .ic-feat .ic-feat-body { display: block; }
  html.ic-js .ic-feat:not(.is-on) .ic-feat-title { color: var(--ic-ink); }
  .ic-dots-row { margin-top: clamp(8px, 1.4vh, 14px); }
}

@media (max-width: 860px) {
  .ic-nav > a:not(.ic-nav-get) { display: none; }
  .ic-nav > a[href$="blog.html"] { display: inline-block; }
  .ic-nav .lang-switch { display: none; }
  .ic-nav { flex: 1; gap: 12px; min-width: 0; }
  .ic-brand { flex: none; }
  .ic-brand span { font-size: 13px; letter-spacing: .16em; }
  .ic-header { padding-left: 18px; padding-right: 18px; gap: 10px; }
  .ic-nav-get { font-size: 12.5px; padding: 8px 13px; }
  /* the two letter picker, plain text with a chevron, centred in the header */
  .ic-lang-select { display: block; order: -1; margin: 0 auto; appearance: none; -webkit-appearance: none; border: 0; border-radius: 0; color: var(--ic-ink-2); font: 400 13px var(--ic-sans); letter-spacing: .06em; padding: 8px 15px 8px 4px; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%234E606A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right center / 10px 6px; }
  .ic-topbar .ic-lang-select { color: rgba(246, 241, 233, .8); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23F6F1E9' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

  /* the four hero numbers sit two by two so the hero fits one phone screen */
  .ic-stats { display: grid; grid-template-columns: 1fr 1fr; }
  .ic-stats > div { padding: 16px clamp(16px, 5vw, 26px); }
  .ic-stat-num { font-size: 26px; }
  .ic-stat-label { font-size: 11px; }
  /* The hero has to land on one phone screen (founder 2026-08-19): type comes
     down a notch and the shot sits in a short window, anchored to its top so
     the map still reads, fading out at the bottom edge. */
  .ic-hero-body { padding-top: 14px; padding-bottom: 16px; gap: 14px; }
  .ic-hero-copy { gap: 12px; }
  .ic-h1 { font-size: clamp(31px, 8.6vw, 40px); line-height: 1.04; }
  .ic-hero-lede { font-size: 14.5px; line-height: 1.5; max-width: 40ch; }
  .ic-badge { font-size: 10.5px; padding: 6px 11px; }
  .ic-store { padding: 12px 18px; }
  .ic-store span { font-size: 14.5px; }
  /* the finder crops to the upper map so the hero still lands on one screen */
  .ic-finder { padding: 14px; margin: 0 auto; }
  .ic-finder-phone { width: min(216px, 56vw); height: min(240px, 28svh); overflow: hidden; -webkit-mask-image: linear-gradient(#000 72%, transparent 100%); mask-image: linear-gradient(#000 72%, transparent 100%); }
  .ic-finder-phone img { height: auto; }
  .ic-finder-city { top: 26%; left: 10px; font-size: 8.5px; }
  .ic-fcorner { width: 22px; height: 22px; }
  .ic-pin--finder .ic-readout { font-size: 10px; padding: 7px 9px; left: 18px; top: 8px; }
  .ic-pin--finder .ic-facing { width: 100px; }
  .ic-hero-kicker { font-size: 10px; letter-spacing: .14em; }
  .ic-stats > div { padding: 12px clamp(14px, 4vw, 22px); gap: 2px; }
  .ic-stat-num { font-size: 23px; }
  .ic-stat-label { font-size: 10px; letter-spacing: .1em; }

  .ic-ctable { overflow-x: auto; }
  .ic-ctable table { min-width: 520px; }
}

@media (max-width: 520px) {
  .ic-nav-get { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html.ic-js .ic-ticker-row { animation: none; }
}


/* ---------- for your feed (the social section) ----------------------------
   Three phones alternate sides down the section, each showing a different
   screen: the grid, one post, and framing the shot. */

/* No overflow hidden here: it silently disables position sticky on the stage
   inside, which is what stopped the section holding. The glow is inset so it
   never spills anyway. */
.ic-social { position: relative; background: var(--ic-ink); color: var(--ic-sand); padding: clamp(56px, 9vh, 110px) clamp(18px, 4vw, 56px); }
.ic-social::before { content: ""; position: absolute; inset: 0; background: radial-gradient(58% 60% at 82% 4%, rgba(246, 175, 121, .2), rgba(21, 34, 40, 0) 62%), radial-gradient(50% 50% at 6% 92%, rgba(14, 147, 180, .18), rgba(21, 34, 40, 0) 66%); }
.ic-social-inner { position: relative; max-width: 1040px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(38px, 7vh, 80px); }

/* The feed section follows the pattern the founder pointed at (getfluently,
   2026-08-19): a stage exactly one screen tall pinned at the top, the heading
   fixed in place beside the phone, and only the beat copy and the screen
   changing, each sliding through a clipped window. A rail on the right edge
   marks how far through the beats you are. */
.ic-social { padding: 0; }
html.ic-js .ic-social[data-feedscroll] { height: 340vh; }
.ic-social-stage { padding: clamp(30px, 5vh, 64px) clamp(18px, 4vw, 56px); }
/* max-height guards the pin: a sticky box taller than the viewport cannot
   hold at the top. */
html.ic-js .ic-social-stage { position: sticky; top: 0; height: 100svh; max-height: 100vh; display: flex; align-items: center; }
.ic-social-inner { position: relative; max-width: 1100px; margin: 0 auto; width: 100%; }

.ic-feedgrid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(30px, 6vw, 90px); align-items: center; padding-right: 34px; }
.ic-feedcol { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ic-feedhead { margin: 0; font-size: clamp(27px, min(3.4vw, 4.6vh), 46px); line-height: 1.05; letter-spacing: -.03em; font-weight: 700; color: var(--ic-paper); }

/* the beat copy runs through a clipped window so lines arrive and leave */
.ic-beatwin { position: relative; margin-top: clamp(10px, 2vh, 22px); height: clamp(190px, 27vh, 250px); overflow: clip; }
.ic-beat { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 8px; }
html.ic-js .ic-beat { opacity: 0; transform: translateY(42px); transition: opacity .45s ease, transform .6s var(--ic-ease); }
html.ic-js .ic-beat.is-on { opacity: 1; transform: none; }
html.ic-js .ic-beat.is-past { opacity: 0; transform: translateY(-42px); }
.ic-feed-n { font-family: var(--ic-mono); font-size: 11.5px; letter-spacing: .18em; color: var(--ic-amber); }
.ic-beat h3 { margin: 0; font-size: clamp(19px, 2.1vw, 27px); line-height: 1.15; letter-spacing: -.02em; font-weight: 700; color: var(--ic-paper); }
.ic-beat p { margin: 0; max-width: 42ch; font-size: 15.5px; line-height: 1.6; color: rgba(246, 241, 233, .72); }

.ic-fpcol { position: relative; justify-self: center; display: flex; align-items: center; justify-content: center; }
.ic-fpcol::before { content: ""; position: absolute; inset: -18% -34%; background: radial-gradient(closest-side, rgba(14, 147, 180, .16), rgba(14, 147, 180, 0) 72%); pointer-events: none; }
.ic-fp { position: relative; z-index: 2; }

/* the beat rail, upright on the right edge as in the reference */
.ic-rail { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 9px; }
.ic-rail i { width: 3px; height: 22px; border-radius: 3px; background: rgba(246, 241, 233, .2); transition: background .4s ease, height .4s var(--ic-ease); }
.ic-rail i.is-on { background: var(--ic-amber); height: 34px; }

/* Each slide fills the phone screen exactly and clips its content; without
   this base rule the screens render as full height blocks stacked below each
   other, which is the overflow the founder screenshotted (2026-08-19). */
.ic-fp-slide { position: absolute; inset: calc(var(--fpw) * .032); border-radius: calc(var(--fpw) * .108); overflow: hidden; background: #0D1417; }
.ic-fp-slide img { width: 100%; height: 100%; object-fit: cover; }
html.ic-js .ic-fp-slide { opacity: 0; transform: translateY(26px) scale(.985); transition: opacity .5s ease, transform .6s var(--ic-ease); }
html.ic-js .ic-fp-slide.is-on { opacity: 1; transform: none; }
html.ic-js .ic-fp-slide.is-past { opacity: 0; transform: translateY(-26px) scale(.985); }

/* ---- the three designed screens inside the small phone --------------------
   Illustrations in the site's own language, not another app's: a feed of the
   catalog's covers, one saved spot as a post, and the viewfinder. Everything
   is sized off the phone width so the screens stay right at every size
   (founder 2026-08-19). */
.ic-scr { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; background: #0D1417; font-size: calc(var(--fpw) * .058); color: rgba(246, 241, 233, .92); }
.ic-scr-bar { display: flex; align-items: baseline; justify-content: space-between; padding: calc(var(--fpw) * .075) calc(var(--fpw) * .06) calc(var(--fpw) * .045); flex: none; }
.ic-scr-bar span { font-weight: 700; letter-spacing: -.01em; }
.ic-scr-bar b { font-family: var(--ic-mono); font-weight: 400; font-size: calc(var(--fpw) * .046); color: var(--ic-teal-lit); }
.ic-scr-gridwrap { flex: 1; min-height: 0; overflow: hidden; }
.ic-scr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.ic-scr-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
html.ic-js .ic-scr-grid { animation: ic-scrroll 36s linear infinite; }
/* the growth strip: likes and followers tick upward while the grid rolls */
.ic-scr-stats { display: grid; grid-template-columns: 1fr 1fr; padding: 0 calc(var(--fpw) * .06) calc(var(--fpw) * .05); flex: none; }
.ic-scr-stats > div { display: flex; align-items: baseline; gap: calc(var(--fpw) * .022); min-width: 0; }
.ic-scr-stats span { font-size: calc(var(--fpw) * .04); color: rgba(246, 241, 233, .55); }
.ic-scr-stats b { font-family: var(--ic-mono); font-weight: 400; font-size: calc(var(--fpw) * .05); color: rgba(246, 241, 233, .95); }
.ic-scr-stats i { width: 0; height: 0; border-left: calc(var(--fpw) * .018) solid transparent; border-right: calc(var(--fpw) * .018) solid transparent; border-bottom: calc(var(--fpw) * .03) solid var(--ic-amber); transform: translateY(calc(var(--fpw) * -.006)); }
@keyframes ic-scrroll { from { transform: translateY(0); } to { transform: translateY(-33.3333%); } }

.ic-scr--post { justify-content: flex-start; }
.ic-scr-loc { display: flex; align-items: center; gap: calc(var(--fpw) * .04); padding: calc(var(--fpw) * .065) calc(var(--fpw) * .06); flex: none; }
.ic-scr-loc i { width: calc(var(--fpw) * .035); height: calc(var(--fpw) * .035); border-radius: 50%; background: var(--ic-teal-lit); flex: none; }
.ic-scr-loc b { display: block; font-size: calc(var(--fpw) * .055); font-weight: 650; }
.ic-scr-loc span { display: block; font-size: calc(var(--fpw) * .044); color: rgba(246, 241, 233, .55); }
.ic-scr-shot { position: relative; flex: none; aspect-ratio: 4 / 4.4; }
.ic-scr-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ic-scr-badge { position: absolute; left: calc(var(--fpw) * .05); bottom: calc(var(--fpw) * .05); padding: calc(var(--fpw) * .022) calc(var(--fpw) * .05); border-radius: 999px; background: rgba(13, 20, 23, .72); font-family: var(--ic-mono); font-size: calc(var(--fpw) * .042); letter-spacing: .06em; color: var(--ic-amber); }
.ic-scr-cap { margin: 0; padding: calc(var(--fpw) * .055) calc(var(--fpw) * .06) 0; font-size: calc(var(--fpw) * .05); line-height: 1.45; color: rgba(246, 241, 233, .72); }
.ic-scr-cmts { display: flex; flex-direction: column; gap: calc(var(--fpw) * .026); padding: calc(var(--fpw) * .05) calc(var(--fpw) * .06) 0; }
.ic-scr-cmts p { margin: 0; font-size: calc(var(--fpw) * .045); line-height: 1.4; color: rgba(246, 241, 233, .62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ic-scr-cmts b { font-weight: 650; color: rgba(246, 241, 233, .9); margin-right: .4em; }
.ic-scr-row { display: flex; gap: calc(var(--fpw) * .035); padding: calc(var(--fpw) * .055) calc(var(--fpw) * .06); margin-top: auto; }
.ic-scr-row span { padding: calc(var(--fpw) * .032) calc(var(--fpw) * .055); border-radius: 999px; border: 1px solid rgba(246, 241, 233, .22); font-family: var(--ic-mono); font-size: calc(var(--fpw) * .04); letter-spacing: .08em; color: rgba(246, 241, 233, .75); }
.ic-scr-row span:first-child { background: var(--ic-teal); border-color: var(--ic-teal); color: #fff; }

.ic-scr--cam { display: block; }
.ic-scr-view { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ic-scr--cam::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,20,23,.5) 0%, rgba(13,20,23,0) 26%, rgba(13,20,23,0) 58%, rgba(13,20,23,.78) 100%); }
.ic-scr-chip { position: absolute; z-index: 2; top: calc(var(--fpw) * .07); left: 50%; transform: translateX(-50%); padding: calc(var(--fpw) * .025) calc(var(--fpw) * .05); border-radius: 999px; background: rgba(13, 20, 23, .72); font-family: var(--ic-mono); font-size: calc(var(--fpw) * .04); letter-spacing: .1em; color: var(--ic-amber); white-space: nowrap; }
.ic-scr-fa, .ic-scr-fb, .ic-scr-fc, .ic-scr-fd { position: absolute; z-index: 2; width: calc(var(--fpw) * .12); height: calc(var(--fpw) * .12); border: 2px solid rgba(246, 241, 233, .92); }
.ic-scr-fa { top: 26%; left: 13%; border-right: 0; border-bottom: 0; border-radius: 4px 0 0 0; }
.ic-scr-fb { top: 26%; right: 13%; border-left: 0; border-bottom: 0; border-radius: 0 4px 0 0; }
.ic-scr-fc { bottom: 30%; left: 13%; border-right: 0; border-top: 0; border-radius: 0 0 0 4px; }
.ic-scr-fd { bottom: 30%; right: 13%; border-left: 0; border-top: 0; border-radius: 0 0 4px 0; }
.ic-scr-cambar { position: absolute; z-index: 2; left: 0; right: 0; bottom: calc(var(--fpw) * .06); display: flex; flex-direction: column; align-items: center; gap: calc(var(--fpw) * .035); }
.ic-scr-cambar span { font-family: var(--ic-mono); font-size: calc(var(--fpw) * .04); letter-spacing: .08em; color: rgba(246, 241, 233, .85); }
.ic-scr-shutter { width: calc(var(--fpw) * .17); height: calc(var(--fpw) * .17); border-radius: 50%; background: rgba(246, 241, 233, .96); box-shadow: 0 0 0 3px rgba(246, 241, 233, .32); }
html:not(.ic-js) .ic-fp-slide { position: relative; inset: auto; opacity: 1; margin-bottom: 12px; }

.ic-feedcopy { grid-row: 1; grid-column: 2; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
html.ic-js .ic-feedcopy { opacity: 0; transform: translateX(48px); transition: opacity .6s ease, transform .7s var(--ic-ease); pointer-events: none; }
html.ic-js .ic-feedcopy.is-on { opacity: 1; transform: none; pointer-events: auto; }
/* The step numeral is a large ghost figure so the column carries the space
   instead of leaving it empty (founder 2026-08-19). */
.ic-feed-n { font-family: var(--ic-mono); font-size: clamp(46px, 6vw, 84px); line-height: .78; letter-spacing: -.02em; color: rgba(246, 241, 233, .1); }
.ic-feedcopy h3 { margin: 0; font-size: clamp(23px, 2.7vw, 36px); line-height: 1.1; letter-spacing: -.025em; font-weight: 700; color: var(--ic-paper); }
.ic-feedcopy p { margin: 0; max-width: 42ch; font-size: 16px; line-height: 1.6; color: rgba(246, 241, 233, .74); }

/* the phone shell */
/* One variable drives the phone, so the bezel and both radii stay the same
   proportion of its width at every size, down to a 12 mini. */
.ic-fp { --fpw: min(228px, 24.5svh); width: var(--fpw); height: calc(var(--fpw) * 2.144); padding: calc(var(--fpw) * .032); border-radius: calc(var(--fpw) * .14); background: linear-gradient(160deg, #3d454a, #10171a 46%, #262e33); box-shadow: 0 50px 80px -42px rgba(0, 0, 0, .85), 0 0 0 1px rgba(246, 241, 233, .09); }

/* Inside the phone this is the Imagecation app, not a social app: mono
   figures, teal and amber accents, hairline rules that stay 1px at every
   phone size down to a 12 mini. */



/* the spot page */

/* the viewfinder */


@media (max-width: 820px) {
  /* The store button steps down on small phones so a 12 mini keeps margin
     around it and the label never wraps. */
  .ic-store { padding: 11px 18px; gap: 9px; }
  .ic-store span { font-size: 14px; }
  .ic-store svg { width: 13px; height: 16px; }

  /* Same pattern on a phone: the heading holds its place at the top of the
     stage while the screen and the copy change under it. */
  html.ic-js .ic-social[data-feedscroll] { height: 320vh; }
  /* the stage budget on a phone: everything, heading to rail, inside one
     screen, with the beat window sized so no sentence is ever cut */
  .ic-social-stage { padding: 20px 18px; }
  .ic-feedgrid { grid-template-columns: 1fr; grid-template-rows: auto auto; gap: 14px; padding-right: 0; justify-items: center; text-align: center; }
  .ic-feedcol { order: 1; align-items: center; justify-self: stretch; }
  .ic-fpcol { order: 2; }
  .ic-fp { --fpw: min(140px, 16svh); }
  /* stretch, or the centered column collapses the window to zero width and
     the copy wraps letter by letter behind the clip */
  .ic-beatwin { align-self: stretch; height: clamp(170px, 23svh, 200px); margin-top: 4px; }
  .ic-beat { align-items: center; }
  .ic-beat p { max-width: 38ch; font-size: 14.5px; }
  .ic-feedhead { font-size: clamp(23px, 6.4vw, 30px); }
  .ic-rail { position: static; transform: none; flex-direction: row; justify-content: center; order: 3; margin-top: 4px; }
  .ic-rail i { width: 22px; height: 3px; }
  .ic-rail i.is-on { width: 34px; height: 3px; }

}