/* Lift Your Eyes site. Tokens are the app's (docs/design/direction-b-spec.md 1.1 and
   LiftCore/Sources/ThemeCore/ThemePalette.swift): Light by default, Dark and Sepia chosen
   in the footer switch, which sets data-theme on <html>. */
:root{--sky:#E7EEF2;--ink:#13232C;--ink2:#4A5C66;--h1:#C5D3CC;--h2:#93AC9F;--h3:#4E6E62;--on-h3:#FFFFFF;--btn:#FFFFFF;--btn-ink:#13232C;--gold:#E2B44E;--land-ink2:#3F4F57;--dawn-hi:#EEEAE4;--dawn-lo:#F6DCC0;--p-rose:#DE8878;--p-apri:#EDA865;--p-cream:#FFF6E6;--p-core:#B8743A;--stem:#3D5C50;color-scheme:light}
:root[data-theme=dark]{--sky:#0E1820;--ink:#E4ECEF;--ink2:#9DB0B9;--h1:#1A2A2C;--h2:#213634;--h3:#2C4A43;--on-h3:#F0F5F2;--btn:#E4ECEF;--btn-ink:#0E1820;--gold:#D9AE52;--land-ink2:#9DB0B9;--dawn-hi:#151D26;--dawn-lo:#35292A;--p-rose:#C67F71;--p-apri:#D49961;--p-cream:#E8E0CF;--p-core:#8F6136;--stem:#3E6457;color-scheme:dark}
:root[data-theme=sepia]{--sky:#F2E7D2;--ink:#33281A;--ink2:#6A5940;--h1:#DCCAA6;--h2:#BFA57A;--h3:#6F5A3A;--on-h3:#FFF8EC;--btn:#FFF8EC;--btn-ink:#33281A;--gold:#D7A447;--land-ink2:#55462F;--dawn-hi:#F4E2C6;--dawn-lo:#F5D8B0;--p-rose:#D0826B;--p-apri:#E09E5E;--p-cream:#FFF8EC;--p-core:#9C6232;--stem:#5E5A34;color-scheme:light}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--sky);color:var(--ink);font:400 17px/1.5 -apple-system,BlinkMacSystemFont,system-ui,"Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-underline-offset:3px}
a:focus-visible,summary:focus-visible{outline:3px solid currentColor;outline-offset:3px;border-radius:4px}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
svg{display:block}
body{min-height:100vh;display:flex;flex-direction:column}
main{flex:1 0 auto;display:flex;flex-direction:column}
main>.body,main>.land{flex:1 0 auto}

.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
@media (max-width:600px){.wrap{padding:0 16px}}

.skip{position:absolute;left:16px;top:-60px;z-index:10;padding:10px 14px;border-radius:10px;background:var(--ink);color:var(--sky);font-weight:600;text-decoration:none}
.skip:focus{top:12px}
.skip:focus-visible,.links a:focus-visible{outline-color:var(--ink)}

/* Top bar */
.top{width:100%;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding-top:12px;padding-bottom:12px}
.brand{white-space:nowrap;display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:700;font-size:17px;text-decoration:none}
.brand svg{width:32px;height:32px;border-radius:8px;box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 14%,transparent)}
.top nav{display:flex;gap:2px;flex-wrap:wrap;justify-content:flex-end;margin-left:auto}
.top nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;color:var(--ink2);text-decoration:none;font-size:16px}
.top nav a:hover{color:var(--ink);text-decoration:underline}
@media (max-width:600px){.top nav .wide{display:none}.top{column-gap:0;padding-left:12px;padding-right:12px}.brand{gap:8px}.brand svg{width:30px;height:30px}.top nav a{padding:0 7px;font-size:15px}}
/* Narrower than about 370 px, the switch drops to its own row, still on the right. */
@media (max-width:369px){.top>.theme{margin-left:auto}}

/* Before launch: plain text in place of the App Store badge */
.soon{display:inline-flex;align-items:center;min-height:52px;padding:0 18px;border-radius:11px;box-shadow:inset 0 0 0 1.5px currentColor;font-weight:600;font-size:17px}
.fine{font-size:15px;line-height:1.45;color:var(--ink2)}
.verse{font-family:ui-serif,"New York",Georgia,serif}

/* Home: sky */
.hero{position:relative;overflow:hidden;background:linear-gradient(to bottom,var(--sky) 0%,color-mix(in srgb,var(--dawn-hi) 60%,var(--sky)) 55%,color-mix(in srgb,var(--dawn-lo) 70%,var(--sky)) 100%)}
.hero-in{position:relative;z-index:2;padding-top:40px;padding-bottom:20px;max-width:760px}
.hero h1{font-size:clamp(36px,5.4vw,56px);line-height:1.04;font-weight:800;letter-spacing:-.03em}
.lede{font-size:clamp(18px,1.9vw,21px);line-height:1.45;color:var(--ink2);margin-top:18px;max-width:600px}
.cta{display:flex;align-items:center;gap:12px 18px;flex-wrap:wrap;margin-top:28px}
.epi{margin:34px 0 0;max-width:460px}
.epi blockquote{margin:0;font-size:19px;line-height:1.45}
.epi figcaption{font-size:14px;color:var(--ink2);margin-top:6px}
.horizon{position:relative;height:120px;margin-top:-10px}
.sun{position:absolute;left:66%;bottom:34px;width:84px;height:84px;margin-left:-42px;border-radius:50%;background:var(--gold)}
.halo{position:absolute;left:66%;bottom:-70px;width:300px;height:300px;margin-left:-150px;border-radius:50%;background:radial-gradient(circle closest-side,color-mix(in srgb,var(--gold) 34%,transparent) 30%,color-mix(in srgb,var(--gold) 10%,transparent) 62%,transparent)}
.horizon svg{position:absolute;left:0;bottom:0;width:100%;height:100%;z-index:1}
@media (max-width:600px){.hero-in{padding-top:20px}.horizon{height:84px}.sun{width:60px;height:60px;margin-left:-30px;bottom:26px;left:72%}.halo{left:72%}}

/* Home: land */
.land{background:var(--h1);padding:8px 0 64px}
.land h2{font-size:clamp(28px,3.4vw,36px);line-height:1.1;font-weight:800;letter-spacing:-.025em}
.steps{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:860px){.steps{grid-template-columns:1fr}}
.card{background:var(--sky);border-radius:20px;padding:22px 22px 24px;display:flex;flex-direction:column;gap:10px}
.num{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--sky);font-weight:700;font-size:17px}
.card h3{font-size:22px;line-height:1.2;font-weight:700;letter-spacing:-.01em}
.card p{color:var(--ink2);font-size:16px;line-height:1.5}
/* "How it works" images: light-theme screenshots in every theme, in a rounded frame
   with a thin ink ring so they sit on the dark and sepia cards too */
.shot{display:block;margin-top:auto;padding-top:8px}
.shot img{display:block;width:100%;max-width:340px;height:auto;margin:0 auto;border-radius:14px;background:#E7EEF2;box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 14%,transparent)}

/* Base hill: footer of every page */
.base{position:relative;background:var(--h3);color:var(--on-h3)}
.base>.edge{position:absolute;left:0;top:-31px;width:100%;height:32px}
.base .wrap{padding-top:28px;padding-bottom:40px}
.promise{display:flex;justify-content:space-between;align-items:center;gap:20px 40px;flex-wrap:wrap;padding-bottom:26px;border-bottom:1px solid color-mix(in srgb,var(--on-h3) 30%,transparent);margin-bottom:12px}
.promise p{font-size:20px;line-height:1.4;font-weight:600;max-width:620px}
.promise p a{font-weight:400;font-size:17px;display:inline-block;margin-top:4px}
.foot{display:flex;flex-wrap:wrap;gap:0 4px;margin:0 -10px}
.foot a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;font-size:16px}
.copy{font-size:14px;line-height:1.45;opacity:.92;margin-top:10px}
/* Theme switch in the top bar, the app's segmented control (spec 3.5, .iseg) on the sky:
   ink2 border and dividers, ink icons, the selected segment ink with a sky icon.
   Hidden until the inline script in <head> has set data-theme, so it never shows without JS. */
.theme{display:none}
:root[data-theme] .theme{display:flex}
.seg{flex:none;border-radius:12px;box-shadow:inset 0 0 0 1.5px var(--ink2)}
.seg button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:44px;min-height:44px;margin:0;padding:0 11px;border:0;background:transparent;color:var(--ink);font:inherit;font-size:15px;font-weight:600;line-height:1.2;cursor:pointer}
.seg button+button{box-shadow:inset 1.5px 0 0 var(--ink2)}
.seg button:first-child{border-radius:12px 0 0 12px}
.seg button:last-child{border-radius:0 12px 12px 0}
.seg button[aria-pressed=true]{background:var(--ink);color:var(--sky);box-shadow:none}
.seg button:focus-visible{position:relative;z-index:1;outline:3px solid var(--ink);outline-offset:2px;border-radius:12px}
.seg svg{flex:none}
.seg span{display:none}
@media (min-width:861px){.seg span{display:inline}}
@media (max-width:600px){.seg button{padding:0 10px}}

/* Privacy, Terms, Support, 404 */
.head-in{padding-top:28px;padding-bottom:34px}
.head h1{font-size:clamp(34px,4.6vw,48px);line-height:1.06;font-weight:800;letter-spacing:-.03em}
.head p{color:var(--ink2);margin-top:10px}
.head-hills{width:100%;height:56px}
.head .draft{display:inline-block;margin-top:14px;padding:5px 12px;border-radius:999px;background:var(--gold);color:var(--btn-ink);font-weight:600;font-size:15px}
.body{background:var(--h1);padding:8px 0 60px}
.grid{display:grid;grid-template-columns:230px minmax(0,1fr);gap:48px;align-items:start}
@media (max-width:860px){.grid{grid-template-columns:1fr;gap:0}}
.toc{position:sticky;top:20px;font-size:15px}
.toc b{display:block;font-size:14px;color:var(--land-ink2);margin:0 0 6px}
.toc ol,.toc-m ol{list-style:none;margin:0;padding:0}
.toc a{display:block;padding:8px 0;text-decoration:none;border-bottom:1px solid var(--h2);line-height:1.3}
.toc a:hover,.toc-m a:hover{text-decoration:underline}
.toc-m{display:none}
@media (max-width:860px){.toc{display:none}.toc-m{display:block;background:var(--sky);border-radius:14px;margin:6px 0 20px}}
.toc-m summary{min-height:48px;display:flex;align-items:center;padding:0 16px;font-weight:600;cursor:pointer}
.toc-m ol{padding:0 16px 10px}
.toc-m a{display:block;padding:9px 0;border-top:1px solid var(--h2);text-decoration:none}
.doc{background:var(--sky);border-radius:20px;padding:30px 36px 36px;max-width:720px}
@media (max-width:600px){.doc{padding:22px 18px 26px;border-radius:16px}}
.doc h2{font-size:24px;line-height:1.2;font-weight:700;letter-spacing:-.01em;margin:34px 0 10px;scroll-margin-top:16px}
.doc h2:first-of-type{margin-top:24px}
.doc p,.doc li{font-size:17px;line-height:1.6}
.doc p{margin:0 0 12px}
.doc ul,.doc ol{margin:0 0 14px;padding-left:1.3em}
.doc li{margin:0 0 8px}
.doc strong{font-weight:650}
.doc a{text-decoration-thickness:1px;overflow-wrap:anywhere}
mark{background:color-mix(in srgb,var(--gold) 45%,transparent);color:inherit;border-radius:3px;padding:0 2px}
.links{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.links a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:12px;background:var(--ink);color:var(--sky);font-weight:600;text-decoration:none}
.links a+a{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}