:root {
    color-scheme: dark;
    --background: #15120f;
    --background-soft: #1b1712;
    --surface: #211b16;
    --surface-raised: #2a221b;
    --text: #f7eee5;
    --muted: #b8aa9d;
    --muted-strong: #d7cbbf;
    --amber: #ffb868;
    --amber-strong: #ffc886;
    --amber-ink: #452b00;
    --sage: #a9d6a0;
    --sage-ink: #173d1d;
    --border: rgb(255 237 219 / 12%);
    --border-strong: rgb(255 237 219 / 20%);
    --shadow: 0 2rem 6rem rgb(0 0 0 / 30%);
    --radius-sm: 1rem;
    --radius-md: 1.5rem;
    --radius-lg: 2.25rem;
    --page-width: 75rem;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 78% -8%, rgb(139 83 9 / 17%), transparent 28rem),
        radial-gradient(circle at 5% 35%, rgb(71 111 67 / 10%), transparent 24rem),
        var(--background);
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
}

a:focus-visible {
    outline: 3px solid var(--sage);
    outline-offset: 4px;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

img {
    display: block;
    max-width: 100%;
}

.skip-link {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 100;
    transform: translateY(-200%);
    border-radius: 0.75rem;
    background: var(--amber);
    color: var(--amber-ink);
    padding: 0.75rem 1rem;
    font-weight: 800;
    text-decoration: none;
}

.skip-link:focus {
    transform: translateY(0);
}

.site-header {
    position: relative;
    z-index: 10;
    width: min(calc(100% - 2rem), var(--page-width));
    margin: 0 auto;
    padding: 1.25rem 0;
}

.nav-shell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    min-height: 4.5rem;
    padding: 0.65rem 0.8rem 0.65rem 1rem;
    border: 1px solid var(--border);
    border-radius: 1.4rem;
    background: rgb(27 23 18 / 78%);
    box-shadow: 0 1rem 3rem rgb(0 0 0 / 12%);
    backdrop-filter: blur(18px);
}

.brand {
    flex: 0 0 auto;
    border-radius: 0.8rem;
}

.brand img {
    width: 8.75rem;
    height: auto;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 1.65rem;
}

.site-nav a,
.footer-links a,
.back-link {
    color: var(--muted-strong);
    font-size: 0.9rem;
    font-weight: 650;
    text-decoration: none;
}

.site-nav a:not(.nav-cta):hover,
.footer-links a:hover,
.back-link:hover {
    color: var(--amber);
}

.nav-cta,
.button {
    display: inline-flex;
    min-height: 2.9rem;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    border-radius: 999px;
    padding: 0.76rem 1.2rem;
    background: var(--amber);
    color: var(--amber-ink) !important;
    font-size: 0.94rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    box-shadow: inset 0 -1px rgb(69 43 0 / 20%);
    transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.nav-cta:hover,
.button:hover {
    transform: translateY(-2px);
    background: var(--amber-strong);
    box-shadow: 0 0.85rem 2.2rem rgb(255 184 104 / 16%);
}

.button-secondary {
    border: 1px solid var(--border-strong);
    background: transparent;
    color: var(--text) !important;
    box-shadow: none;
}

.button-secondary:hover {
    border-color: rgb(255 184 104 / 45%);
    background: rgb(255 184 104 / 7%);
    box-shadow: none;
}

.hero,
.section,
.site-footer {
    width: min(calc(100% - 2rem), var(--page-width));
    margin-inline: auto;
}

.hero {
    display: grid;
    min-height: min(47rem, calc(100vh - 8rem));
    grid-template-columns: minmax(0, 0.95fr) minmax(28rem, 1.05fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 6rem);
    padding: clamp(3.5rem, 8vw, 7.5rem) 0 5.5rem;
}

.eyebrow,
.section-kicker,
.device-label,
.mini-label,
.policy-kicker {
    margin: 0;
    color: var(--amber);
    font-size: 0.76rem;
    font-weight: 850;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    border: 1px solid rgb(255 184 104 / 20%);
    border-radius: 999px;
    padding: 0.45rem 0.75rem 0.45rem 0.55rem;
    background: rgb(255 184 104 / 7%);
}

.eyebrow::before {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--sage);
    box-shadow: 0 0 0 0.25rem rgb(169 214 160 / 9%);
    content: "";
}

.hero h1,
.section-heading h2,
.handoff-copy h2,
.privacy-callout h2,
.policy-hero h1 {
    margin: 0;
    font-weight: 680;
    letter-spacing: -0.055em;
    line-height: 0.98;
    text-wrap: balance;
}

.hero h1 {
    max-width: 11ch;
    margin-top: 0;
    font-size: clamp(3.75rem, 7.2vw, 7rem);
}

.hero h1 span,
.section-heading h2 span,
.handoff-copy h2 span,
.privacy-callout h2 span {
    color: var(--amber);
}

.hero-intro {
    max-width: 36rem;
    margin: 1.6rem 0 0;
    color: var(--muted-strong);
    font-size: clamp(1.05rem, 1.8vw, 1.25rem);
    line-height: 1.65;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 2rem;
}

.hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.6rem;
    margin: 1.45rem 0 0;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 650;
}

.hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.hero-meta span::before {
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 50%;
    background: var(--sage);
    content: "";
}

.hero-visual {
    position: relative;
    display: grid;
    min-height: 39rem;
    place-items: center;
    isolation: isolate;
}

.hero-screens {
    width: 100%;
    max-width: 38rem;
    min-height: 43rem;
    margin-inline: auto;
}

.hero-screens::before {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    width: 34rem;
    max-width: 95%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border: 1px solid rgb(255 184 104 / 10%);
    border-radius: 50%;
    background: radial-gradient(circle, rgb(255 184 104 / 12%), transparent 65%);
    box-shadow: inset 0 0 7rem rgb(255 184 104 / 3%);
    content: "";
}

.app-screen {
    position: absolute;
    z-index: 1;
    width: 18rem;
    overflow: hidden;
    margin: 0;
    border: 1px solid rgb(255 237 219 / 17%);
    border-radius: 2.25rem;
    background: #0c0b0a;
    box-shadow: 0 2.5rem 6rem rgb(0 0 0 / 48%);
}

.app-screen img {
    width: 100%;
    height: auto;
}

.app-screen-library {
    top: 4.25rem;
    left: 2%;
    width: 16.5rem;
    opacity: 0.82;
    transform: rotate(-5deg);
}

.app-screen-player {
    top: 0;
    right: 1%;
    width: 18.75rem;
    transform: rotate(4.5deg);
}

.hero-orbit {
    position: absolute;
    width: min(100%, 36rem);
    aspect-ratio: 1;
    border: 1px solid rgb(255 184 104 / 11%);
    border-radius: 50%;
    background:
        radial-gradient(circle, rgb(255 184 104 / 8%) 0 18%, transparent 18.2% 36%, rgb(255 255 255 / 2%) 36.2% 36.5%, transparent 36.7%);
    box-shadow: inset 0 0 7rem rgb(255 184 104 / 4%);
}

.phone {
    position: relative;
    z-index: 2;
    width: min(19.4rem, 56vw);
    aspect-ratio: 0.49;
    border: 0.38rem solid #090806;
    border-radius: 3.25rem;
    background: #1b1712;
    box-shadow: 0 3rem 7rem rgb(0 0 0 / 44%), 0 0 0 1px rgb(255 255 255 / 10%);
    transform: rotate(5deg);
}

.phone::before {
    position: absolute;
    top: 0.7rem;
    left: 50%;
    z-index: 4;
    width: 32%;
    height: 1.4rem;
    transform: translateX(-50%);
    border-radius: 99px;
    background: #090806;
    content: "";
}

.phone-screen {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 2.82rem;
    background:
        radial-gradient(circle at 50% 15%, rgb(255 184 104 / 13%), transparent 12rem),
        #1b1712;
    padding: 3.1rem 1.05rem 1rem;
}

.phone-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.phone-title {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 730;
    letter-spacing: -0.055em;
}

.avatar {
    display: grid;
    width: 2.1rem;
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface-raised);
    color: var(--sage);
    font-size: 0.75rem;
    font-weight: 800;
}

.continue-card {
    border: 1px solid rgb(255 184 104 / 14%);
    border-radius: 1.6rem;
    background: linear-gradient(150deg, #332313, #241d16 65%);
    padding: 0.85rem;
}

.continue-content {
    display: grid;
    grid-template-columns: 4rem 1fr;
    gap: 0.8rem;
    align-items: center;
}

.cover,
.mini-cover {
    position: relative;
    overflow: hidden;
    border-radius: 0.65rem;
    background:
        linear-gradient(145deg, transparent 42%, rgb(255 255 255 / 10%) 42.5% 44%, transparent 44.5%),
        linear-gradient(135deg, #754d24, #23170e);
    box-shadow: 0 0.6rem 1.2rem rgb(0 0 0 / 23%);
}

.cover {
    aspect-ratio: 0.72;
}

.cover::after,
.mini-cover::after {
    position: absolute;
    inset: auto 18% 18%;
    height: 3px;
    border-radius: 99px;
    background: var(--amber);
    box-shadow: 0 -0.45rem 0 rgb(255 184 104 / 50%), 0 -0.9rem 0 rgb(255 184 104 / 22%);
    content: "";
}

.continue-info small {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--amber);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.continue-info strong {
    display: block;
    overflow: hidden;
    color: var(--text);
    font-size: 0.9rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.continue-info span {
    color: var(--muted);
    font-size: 0.7rem;
}

.progress {
    width: 100%;
    height: 0.26rem;
    margin-top: 0.55rem;
    overflow: hidden;
    border-radius: 99px;
    background: rgb(255 255 255 / 9%);
}

.progress::before {
    display: block;
    width: 64%;
    height: 100%;
    border-radius: inherit;
    background: var(--amber);
    content: "";
}

.library-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 1.1rem 0 0.6rem;
}

.library-heading strong {
    font-size: 0.86rem;
}

.library-heading span {
    color: var(--amber);
    font-size: 0.63rem;
    font-weight: 750;
}

.book-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.7rem;
}

.book-card {
    min-width: 0;
}

.book-card .mini-cover {
    aspect-ratio: 0.83;
}

.book-card:nth-child(2) .mini-cover {
    background:
        radial-gradient(circle at 68% 28%, #a9d6a0 0 8%, transparent 8.5%),
        linear-gradient(155deg, #20342b, #101c18);
}

.book-card:nth-child(2) .mini-cover::after {
    background: var(--sage);
    box-shadow: 0 -0.45rem 0 rgb(169 214 160 / 50%), 0 -0.9rem 0 rgb(169 214 160 / 22%);
}

.book-card strong {
    display: block;
    overflow: hidden;
    margin-top: 0.4rem;
    font-size: 0.66rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.book-card span {
    display: block;
    color: var(--muted);
    font-size: 0.58rem;
}

.watch-card {
    position: absolute;
    right: -1rem;
    bottom: 5.5rem;
    z-index: 3;
    display: grid;
    width: 10.75rem;
    aspect-ratio: 1;
    place-items: center;
    border: 0.45rem solid #0b0907;
    border-radius: 50%;
    background: #1b1712;
    box-shadow: 0 2rem 4rem rgb(0 0 0 / 48%), 0 0 0 1px rgb(255 255 255 / 10%);
    transform: rotate(-7deg);
}

.watch-screen {
    width: 100%;
    padding: 1rem 1.3rem;
    text-align: center;
}

.watch-cover {
    width: 3.3rem;
    aspect-ratio: 1;
    margin: 0 auto 0.5rem;
    border-radius: 0.85rem;
    background: linear-gradient(145deg, #754d24, #23170e);
    box-shadow: 0 0.7rem 1.5rem rgb(0 0 0 / 30%);
}

.watch-screen strong {
    display: block;
    overflow: hidden;
    font-size: 0.66rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.watch-screen span {
    display: block;
    margin: 0.2rem 0 0.55rem;
    color: var(--muted);
    font-size: 0.52rem;
}

.watch-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--amber);
    font-size: 0.6rem;
}

.watch-play {
    display: grid;
    width: 1.7rem;
    aspect-ratio: 1;
    place-items: center;
    border-radius: 50%;
    background: var(--amber);
    color: var(--amber-ink);
    font-size: 0.55rem;
}

.local-chip {
    position: absolute;
    top: 5rem;
    left: -1.25rem;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: rgb(42 34 27 / 91%);
    padding: 0.7rem 0.85rem;
    box-shadow: 0 1.2rem 2.8rem rgb(0 0 0 / 30%);
    backdrop-filter: blur(12px);
}

.local-chip-icon {
    display: grid;
    width: 2.3rem;
    aspect-ratio: 1;
    place-items: center;
    border-radius: 0.72rem;
    background: var(--sage);
    color: var(--sage-ink);
    font-weight: 900;
}

.local-chip strong,
.local-chip span {
    display: block;
    line-height: 1.25;
}

.local-chip strong {
    font-size: 0.72rem;
}

.local-chip span {
    color: var(--muted);
    font-size: 0.6rem;
}

.trust-bar {
    display: grid;
    width: min(calc(100% - 2rem), var(--page-width));
    grid-template-columns: repeat(4, 1fr);
    margin: 0 auto;
    border-block: 1px solid var(--border);
}

.trust-item {
    display: flex;
    min-height: 6.5rem;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    color: var(--muted-strong);
    font-size: 0.88rem;
    font-weight: 700;
    text-align: center;
}

.trust-item + .trust-item {
    border-left: 1px solid var(--border);
}

.trust-dot {
    width: 0.55rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--amber);
    box-shadow: 0 0 0 0.3rem rgb(255 184 104 / 8%);
}

.trust-item:nth-child(2) .trust-dot,
.trust-item:nth-child(4) .trust-dot {
    background: var(--sage);
    box-shadow: 0 0 0 0.3rem rgb(169 214 160 / 8%);
}

.section {
    padding: clamp(6rem, 10vw, 9rem) 0 0;
}

.section-heading {
    display: grid;
    grid-template-columns: 1fr minmax(18rem, 27rem);
    align-items: end;
    gap: 3rem;
    margin-bottom: 3rem;
}

.section-heading h2,
.handoff-copy h2,
.privacy-callout h2 {
    max-width: 12ch;
    margin-top: 0.8rem;
    font-size: clamp(2.6rem, 5vw, 4.9rem);
}

.section-heading > p,
.handoff-copy > p,
.privacy-callout > p {
    margin: 0;
    color: var(--muted);
    font-size: 1.03rem;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
}

.feature-card {
    position: relative;
    min-height: 23rem;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    padding: clamp(1.5rem, 3vw, 2.4rem);
}

.feature-card::after {
    position: absolute;
    inset: auto -20% -60% 30%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgb(255 184 104 / 6%);
    content: "";
}

.feature-large {
    grid-column: span 7;
}

.feature-small {
    grid-column: span 5;
}

.feature-card h3 {
    max-width: 14ch;
    margin: 0.75rem 0 0.8rem;
    font-size: clamp(1.55rem, 2.5vw, 2.25rem);
    letter-spacing: -0.035em;
    line-height: 1.08;
}

.feature-card > p {
    position: relative;
    z-index: 1;
    max-width: 31rem;
    margin: 0;
    color: var(--muted);
}

.feature-visual {
    position: absolute;
    right: clamp(1rem, 3vw, 2.5rem);
    bottom: 0;
    left: clamp(1rem, 3vw, 2.5rem);
    z-index: 2;
}

.folder-stack {
    height: 10rem;
}

.folder {
    position: absolute;
    bottom: -1.7rem;
    width: 72%;
    height: 10rem;
    border: 1px solid rgb(255 184 104 / 20%);
    border-radius: 1.25rem 1.25rem 0 0;
    background: linear-gradient(145deg, #3a2918, #241d16);
    box-shadow: 0 1.5rem 3rem rgb(0 0 0 / 28%);
}

.folder::before {
    position: absolute;
    top: -1rem;
    left: 1rem;
    width: 36%;
    height: 1.2rem;
    border-radius: 0.65rem 0.65rem 0 0;
    background: #3a2918;
    content: "";
}

.folder:nth-child(1) {
    left: 5%;
    opacity: 0.5;
    transform: translateY(-1.4rem) rotate(-3deg);
}

.folder:nth-child(2) {
    right: 5%;
    background: linear-gradient(145deg, #32402e, #20291f);
    transform: translateY(-0.3rem) rotate(2deg);
}

.folder:nth-child(2)::before {
    background: #32402e;
}

.folder-row {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin: 1.4rem;
}

.folder-art {
    width: 2.8rem;
    aspect-ratio: 0.8;
    border-radius: 0.4rem;
    background: linear-gradient(145deg, #7b542c, #271b10);
}

.folder-lines {
    flex: 1;
}

.folder-lines::before,
.folder-lines::after {
    display: block;
    height: 0.35rem;
    border-radius: 99px;
    background: rgb(255 238 229 / 36%);
    content: "";
}

.folder-lines::after {
    width: 60%;
    margin-top: 0.55rem;
    background: rgb(255 238 229 / 16%);
}

.control-cluster {
    display: grid;
    height: 10.5rem;
    grid-template-columns: repeat(3, 1fr);
    align-items: end;
    gap: 0.6rem;
}

.control-pill {
    display: grid;
    min-height: 6rem;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 1.4rem 1.4rem 0 0;
    background: var(--surface-raised);
    color: var(--muted-strong);
    font-size: 0.72rem;
    font-weight: 800;
    text-align: center;
}

.control-pill:nth-child(2) {
    min-height: 9rem;
    background: var(--amber);
    color: var(--amber-ink);
}

.cast-wave {
    display: grid;
    height: 10.5rem;
    place-items: end center;
}

.cast-screen {
    position: relative;
    width: 75%;
    aspect-ratio: 1.7;
    border: 0.32rem solid #090806;
    border-radius: 0.65rem;
    background: linear-gradient(145deg, #3b2816, #18110c);
    box-shadow: 0 1.5rem 3rem rgb(0 0 0 / 30%);
}

.cast-screen::after {
    position: absolute;
    right: 0.65rem;
    bottom: 0.65rem;
    width: 0.45rem;
    aspect-ratio: 1;
    border: 2px solid var(--amber);
    border-top-color: transparent;
    border-left-color: transparent;
    border-radius: 0 0 0.2rem 0;
    content: "";
}

.cast-line {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 34%;
    height: 0.35rem;
    transform: translate(-50%, -50%);
    border-radius: 99px;
    background: var(--amber);
    box-shadow: 0 -0.8rem 0 rgb(255 184 104 / 45%), 0 0.8rem 0 rgb(255 184 104 / 22%);
}

.watch-transfer {
    display: flex;
    height: 10.5rem;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
}

.chapter-stack {
    display: grid;
    gap: 0.45rem;
}

.chapter-stack span {
    width: 5.5rem;
    height: 1.25rem;
    border-radius: 0.45rem;
    background: var(--surface-raised);
}

.chapter-stack span:nth-child(2) {
    background: rgb(255 184 104 / 25%);
}

.transfer-arrow {
    color: var(--amber);
    font-size: 1.6rem;
}

.watch-mini {
    display: grid;
    width: 6rem;
    aspect-ratio: 1;
    place-items: center;
    border: 0.28rem solid #090806;
    border-radius: 50%;
    background: var(--surface-raised);
    color: var(--sage);
    font-size: 0.68rem;
    font-weight: 850;
    text-align: center;
}

.feature-screenshot {
    height: 10.5rem;
    overflow: hidden;
    margin: 0;
    border: 1px solid var(--border);
    border-bottom: 0;
    border-radius: 1.4rem 1.4rem 0 0;
    background: #0c0b0a;
    box-shadow: 0 1rem 2.5rem rgb(0 0 0 / 22%);
}

.feature-screenshot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.feature-screenshot-playback img {
    object-position: 50% 63%;
}

.cast-audiobook {
    display: grid;
    height: 10.5rem;
    grid-template-columns: 5.25rem minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    overflow: hidden;
    border: 1px solid var(--border);
    border-bottom: 0;
    border-radius: 1.4rem 1.4rem 0 0;
    background:
        radial-gradient(circle at 8% 20%, rgb(87 183 173 / 16%), transparent 8rem),
        linear-gradient(145deg, #22231d, #181410);
    padding: 1.1rem;
    box-shadow: 0 1rem 2.5rem rgb(0 0 0 / 22%);
}

.cast-book-art {
    display: grid;
    width: 5.25rem;
    aspect-ratio: 0.82;
    place-items: center;
    border-radius: 0.75rem;
    background:
        radial-gradient(circle at 68% 24%, rgb(72 212 199 / 70%), transparent 27%),
        linear-gradient(145deg, #0f585d, #071b27 65%, #152c1f);
    box-shadow: 0 0.75rem 1.5rem rgb(0 0 0 / 35%);
    color: #f5f2ec;
    font-size: 0.58rem;
    font-weight: 750;
    letter-spacing: 0.12em;
    line-height: 1.35;
    text-align: center;
    text-transform: uppercase;
}

.cast-book-copy {
    min-width: 0;
}

.cast-book-copy small,
.cast-book-copy strong,
.cast-book-copy > span {
    display: block;
}

.cast-book-copy small {
    margin-bottom: 0.35rem;
    color: var(--sage);
    font-size: 0.58rem;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.cast-book-copy strong {
    overflow: hidden;
    color: var(--text);
    font-size: 0.9rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cast-book-copy > span {
    color: var(--muted);
    font-size: 0.7rem;
}

.cast-progress {
    height: 0.3rem;
    margin-top: 0.75rem;
    overflow: hidden;
    border-radius: 99px;
    background: rgb(255 255 255 / 9%);
}

.cast-progress i {
    display: block;
    width: 42%;
    height: 100%;
    border-radius: inherit;
    background: var(--amber);
}

#watch {
    min-height: 27rem;
}

.watch-screens {
    height: 13rem;
}

.watch-screen-shot {
    position: absolute;
    bottom: -1.25rem;
    width: 13.5rem;
    overflow: hidden;
    margin: 0;
    border: 0.32rem solid #0b0907;
    border-radius: 50%;
    background: #000;
    box-shadow: 0 1.5rem 3rem rgb(0 0 0 / 42%);
}

.watch-screen-shot img {
    width: 100%;
    height: auto;
}

.watch-screen-library {
    left: 10%;
    opacity: 0.74;
    transform: rotate(-6deg);
}

.watch-screen-player {
    right: 12%;
    bottom: -0.25rem;
    transform: rotate(5deg);
}

.handoff {
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(28rem, 1.14fr);
    align-items: center;
    gap: clamp(3rem, 7vw, 7rem);
    padding-top: clamp(6rem, 11vw, 10rem);
}

.handoff-copy > p {
    max-width: 35rem;
    margin-top: 1.4rem;
}

.handoff-list {
    display: grid;
    gap: 0.85rem;
    margin-top: 2rem;
}

.handoff-list div {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    color: var(--muted-strong);
}

.handoff-list span {
    display: grid;
    flex: 0 0 auto;
    width: 1.45rem;
    aspect-ratio: 1;
    place-items: center;
    border-radius: 50%;
    background: rgb(169 214 160 / 13%);
    color: var(--sage);
    font-size: 0.7rem;
    font-weight: 900;
}

.ecosystem {
    position: relative;
    min-height: 32rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at center, rgb(255 184 104 / 10%), transparent 38%),
        var(--surface);
    box-shadow: var(--shadow);
}

.ecosystem-line {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    height: 50%;
    transform: translate(-50%, -50%);
    border: 1px dashed rgb(255 184 104 / 23%);
    border-radius: 50%;
}

.device-node {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    border: 1px solid var(--border-strong);
    background: var(--surface-raised);
    box-shadow: 0 1.25rem 3rem rgb(0 0 0 / 30%);
    text-align: center;
}

.device-node strong,
.device-node span {
    display: block;
}

.device-node strong {
    font-size: 0.84rem;
}

.device-node span {
    color: var(--muted);
    font-size: 0.65rem;
}

.device-phone {
    top: 50%;
    left: 50%;
    width: 8.5rem;
    height: 15rem;
    transform: translate(-50%, -50%);
    border: 0.32rem solid #090806;
    border-radius: 2rem;
}

.device-watch {
    top: 12%;
    right: 9%;
    width: 7.8rem;
    aspect-ratio: 1;
    border: 0.32rem solid #090806;
    border-radius: 50%;
}

.device-cast {
    right: 8%;
    bottom: 10%;
    width: 10rem;
    aspect-ratio: 1.55;
    border: 0.32rem solid #090806;
    border-radius: 1rem;
}

.device-library {
    top: 18%;
    left: 7%;
    width: 10rem;
    height: 6rem;
    border-radius: 1rem;
}

.device-library::before {
    position: absolute;
    top: -0.75rem;
    left: 1rem;
    width: 4rem;
    height: 0.85rem;
    border-radius: 0.5rem 0.5rem 0 0;
    background: var(--surface-raised);
    content: "";
}

.privacy-callout {
    position: relative;
    overflow: hidden;
    margin-top: clamp(6rem, 11vw, 10rem);
    border: 1px solid rgb(169 214 160 / 18%);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, #1c2b1d, #202019 55%, #2f2418);
    padding: clamp(2rem, 6vw, 5.5rem);
}

.privacy-callout::before {
    position: absolute;
    top: -5rem;
    right: -2rem;
    width: 22rem;
    aspect-ratio: 1;
    border: 1px solid rgb(169 214 160 / 10%);
    border-radius: 50%;
    box-shadow: inset 0 0 0 3.8rem rgb(169 214 160 / 2%), inset 0 0 0 7.6rem rgb(169 214 160 / 2%);
    content: "";
}

.privacy-callout > p {
    position: relative;
    max-width: 38rem;
    margin-top: 1.35rem;
}

.privacy-callout .button {
    position: relative;
    margin-top: 2rem;
    background: var(--sage);
    color: var(--sage-ink) !important;
}

.site-footer {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 3rem;
    margin-top: 4.5rem;
    padding: 2.2rem 0 3rem;
    border-top: 1px solid var(--border);
}

.footer-brand img {
    width: 7.75rem;
}

.footer-brand p {
    margin: 0.7rem 0 0;
    color: var(--muted);
    font-size: 0.8rem;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.8rem 1.5rem;
}

/* Privacy policy */
.policy-page {
    background:
        radial-gradient(circle at 85% 0%, rgb(139 83 9 / 14%), transparent 28rem),
        var(--background);
}

.policy-header .nav-shell {
    min-height: 4.1rem;
}

.policy-wrap {
    width: min(calc(100% - 2rem), 56rem);
    margin: 0 auto;
    padding: clamp(3.5rem, 8vw, 7rem) 0 6rem;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 2.5rem;
}

.back-link span {
    color: var(--amber);
    font-size: 1.1rem;
}

.policy-hero {
    padding-bottom: 2.8rem;
    border-bottom: 1px solid var(--border);
}

.policy-hero h1 {
    margin-top: 0.85rem;
    font-size: clamp(3rem, 8vw, 6.2rem);
}

.policy-lede {
    max-width: 42rem;
    margin: 1.3rem 0 0;
    color: var(--muted-strong);
    font-size: 1.08rem;
}

.effective-date {
    margin: 1.5rem 0 0;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 650;
}

.policy-content {
    padding-top: 1rem;
}

.policy-section {
    display: grid;
    grid-template-columns: minmax(11rem, 0.34fr) minmax(0, 0.66fr);
    gap: 2.5rem;
    padding: 2.2rem 0;
    border-bottom: 1px solid var(--border);
}

.policy-section h2 {
    margin: 0;
    font-size: 1.08rem;
    letter-spacing: -0.02em;
    line-height: 1.35;
}

.policy-copy p {
    margin: 0 0 1rem;
    color: var(--muted-strong);
}

.policy-copy p:last-child {
    margin-bottom: 0;
}

.policy-content a,
.policy-contact a {
    color: var(--amber);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

.policy-content a:hover,
.policy-contact a:hover {
    color: var(--amber-strong);
}

.policy-contact {
    margin-top: 2.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    padding: 1.5rem;
    color: var(--muted);
}

.policy-contact strong {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--text);
}

@media (max-width: 900px) {
    .site-nav a:not(.nav-cta) {
        display: none;
    }

    .hero {
        grid-template-columns: 1fr;
        padding-top: 4rem;
    }

    .hero-copy {
        text-align: center;
    }

    .hero h1,
    .hero-intro {
        margin-inline: auto;
    }

    .eyebrow {
        margin-inline: auto;
    }

    .hero-actions,
    .hero-meta {
        justify-content: center;
    }

    .hero-visual {
        min-height: 37rem;
    }

    .hero-screens {
        min-height: 43rem;
    }

    .feature-large,
    .feature-small {
        grid-column: span 6;
    }

    .handoff {
        grid-template-columns: 1fr;
    }

    .handoff-copy {
        text-align: center;
    }

    .handoff-copy h2,
    .handoff-copy > p {
        margin-inline: auto;
    }

    .handoff-list {
        width: fit-content;
        margin-inline: auto;
        text-align: left;
    }
}

@media (max-width: 680px) {
    .site-header,
    .hero,
    .section,
    .site-footer,
    .trust-bar {
        width: min(calc(100% - 1.25rem), var(--page-width));
    }

    .site-header {
        padding-top: 0.65rem;
    }

    .nav-shell {
        min-height: 3.8rem;
        border-radius: 1.1rem;
        padding: 0.5rem 0.55rem 0.5rem 0.7rem;
    }

    .brand img {
        width: 7rem;
    }

    .nav-cta {
        min-height: 2.55rem;
        padding: 0.68rem 0.9rem;
        font-size: 0.78rem;
    }

    .hero {
        gap: 1rem;
        padding: 3.5rem 0 3rem;
    }

    .hero h1 {
        font-size: clamp(3.3rem, 17vw, 5.1rem);
    }

    .hero-visual {
        min-height: 32rem;
    }

    .hero-screens {
        min-height: 34rem;
    }

    .app-screen {
        border-radius: 1.7rem;
    }

    .app-screen-library {
        top: 3.5rem;
        left: 0;
        width: 13.25rem;
    }

    .app-screen-player {
        right: 0;
        width: 15rem;
    }

    .phone {
        width: 15.25rem;
    }

    .watch-card {
        right: 0;
        bottom: 2.5rem;
        width: 8.5rem;
    }

    .local-chip {
        top: 4rem;
        left: 0;
    }

    .trust-bar {
        grid-template-columns: repeat(2, 1fr);
    }

    .trust-item {
        min-height: 5rem;
        padding: 0.75rem;
        font-size: 0.75rem;
    }

    .trust-item:nth-child(3) {
        border-left: 0;
    }

    .trust-item:nth-child(n + 3) {
        border-top: 1px solid var(--border);
    }

    .section-heading {
        grid-template-columns: 1fr;
        gap: 1.1rem;
    }

    .feature-large,
    .feature-small {
        grid-column: 1 / -1;
    }

    .feature-card {
        min-height: 24rem;
    }

    #watch {
        min-height: 26rem;
    }

    .watch-screen-shot {
        width: 10.5rem;
    }

    .watch-screen-library {
        left: 2%;
    }

    .watch-screen-player {
        right: 3%;
    }

    .ecosystem {
        min-height: 31rem;
    }

    .device-library {
        top: 13%;
        left: 4%;
        width: 8.3rem;
    }

    .device-watch {
        top: 10%;
        right: 3%;
        width: 6.8rem;
    }

    .device-cast {
        right: 3%;
        bottom: 7%;
        width: 8.3rem;
    }

    .site-footer {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .footer-links {
        justify-content: flex-start;
    }

    .policy-wrap {
        width: min(calc(100% - 1.5rem), 56rem);
    }

    .policy-section {
        grid-template-columns: 1fr;
        gap: 0.9rem;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .hero-copy {
        animation: rise-in 700ms ease both;
    }

    .hero-visual {
        animation: rise-in 800ms 100ms ease both;
    }

    .watch-card {
        animation: float 5s ease-in-out infinite;
    }

    @keyframes rise-in {
        from {
            opacity: 0;
            transform: translateY(1.25rem);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes float {
        0%, 100% { translate: 0 0; }
        50% { translate: 0 -0.5rem; }
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}