/* Wyllo site styles (design handoff: Wyllo Home), for every page. */
:root {
  --home-terracotta: #A4502C;
  --home-terracotta-deep: #7A3418;
  --home-screen: #A4502C;
  --home-cream: #F4E8D6;
  --home-page: #F7F3EE;
  --home-panel: #ECE4DA;
  --home-rule: #E2D8CC;
  --home-card-rule: #EFE7DD;
  --home-ink: #231915;
  --home-body: #6B5B51;
  --home-muted: #796B63;
  --home-dark: #15100D;
  --home-dark-body: #C8B8AA;
  --home-dark-muted: #9C8B7E;
  --home-bezel: #1C1411;
  --home-case: #0C0A09;
  --home-island: #0D0908;
  --home-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --home-text: "Schibsted Grotesk", system-ui, sans-serif;
  --home-gutter: clamp(20px, 5vw, 56px);
  --home-ease: cubic-bezier(.2, .7, .2, 1);
  --home-card-shadow: 0 1px 2px rgba(35, 25, 21, .10), 0 18px 40px rgba(35, 25, 21, .06);
}

body.wyllo { background: var(--home-page); color: var(--home-ink); font-family: var(--home-text); font-size: 18px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
body.wyllo main { width: 100%; max-width: none; padding: 0; overflow-x: clip; }
:where(body.wyllo) a { color: var(--home-terracotta); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
:where(body.wyllo) a:hover { color: var(--home-terracotta-deep); }
body.wyllo ::selection { background: #F4D39A; }
body.wyllo img { border-radius: 0; }
:where(body.wyllo) :where(h1, h2) { font-family: var(--home-display); font-weight: 800; letter-spacing: 0; text-transform: none; text-wrap: balance; margin: 0; }
:where(body.wyllo) p { margin: 0; }

.home-wrap { max-width: 1240px; margin: 0 auto; padding-inline: var(--home-gutter); }
.home-row { display: flex; flex-wrap: wrap-reverse; align-items: center; gap: clamp(36px, 6vw, 96px); }
.home-row > * { flex: 1 1 400px; min-width: 0; }
.home-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--home-muted); margin-bottom: 16px; }
.home-body p { color: var(--home-body); max-width: 500px; text-wrap: pretty; margin: 0 0 18px; }
.home-body p:last-child { margin-bottom: 0; }

/* Hero */
.home-hero { background: var(--home-terracotta); color: var(--home-cream); overflow: hidden; }
.home-hero a, .home-hero a:hover { color: var(--home-cream); }
.home-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 22px; }
.home-logo { display: flex; align-items: flex-end; text-decoration: none; }
.home-logo img { height: 38px; width: auto; position: relative; z-index: 1; margin-bottom: -2px; }
.home-logo span { font-family: var(--home-display); font-weight: 800; font-size: 42px; line-height: .78; transform: skewX(-9deg); margin-left: -9px; display: block; }
.home-nav-links { display: flex; align-items: center; gap: clamp(14px, 3vw, 30px); }
.home-nav-links a { text-decoration: none; font-weight: 500; font-size: 16px; }
body.wyllo .home-nav-links a:hover { color: var(--home-cream); text-decoration: underline; }
body.wyllo .home-nav-pill { display: flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 12px; background: var(--home-cream); color: var(--home-terracotta-deep); font-weight: 700; font-size: 15px; }
body.wyllo .home-nav-pill:hover { background: #FFF7EC; color: var(--home-terracotta-deep); text-decoration: none; }
.home-hero-body { padding-top: clamp(24px, 5vw, 56px); display: flex; flex-wrap: wrap; align-items: flex-end; gap: clamp(40px, 5vw, 72px); }
.home-hero-text { flex: 1 1 520px; min-width: 0; padding-bottom: clamp(0px, 4vw, 64px); }
.home-hero .home-eyebrow { color: var(--home-cream); font-size: 14px; margin-bottom: 22px; }
.home-hero h1 { font-size: clamp(60px, 7.8vw, 116px); line-height: .88; letter-spacing: -.005em; }
.home-lede { font-size: clamp(18px, 1.6vw, 21px); max-width: 520px; margin-top: 30px; text-wrap: pretty; }
.home-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 34px; }
.home-hero-note { font-size: 15px; }
.home-hero-art { flex: 1 1 380px; min-width: 0; position: relative; display: flex; justify-content: center; align-self: flex-end; }
.home-hero-watch { position: absolute; left: max(0px, calc(50% - 290px)); bottom: 56px; width: clamp(128px, 15vw, 172px); }

/* App Store button */
.appstore { display: inline-block; text-decoration: none; border-radius: 7px; }
.appstore svg { display: block; height: 52px; width: auto; transition: opacity .15s; }
.appstore:hover svg { opacity: .85; }
.appstore.is-soon { cursor: default; }
.appstore.is-soon:hover svg { opacity: 1; }

/* Device frames */
.phone { background: var(--home-bezel); padding: 10px 10px 0; border-radius: 48px 48px 0 0; }
.phone-screen { border-radius: 39px 39px 0 0; overflow: hidden; background: var(--home-screen); }
.phone-status { height: 40px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px 0 28px; color: var(--home-cream); font-weight: 600; font-size: 13px; position: relative; }
.phone-island { position: absolute; left: 50%; top: 9px; transform: translateX(-50%); width: 88px; height: 26px; border-radius: 16px; background: var(--home-island); }
.phone-glyphs { display: flex; gap: 5px; align-items: center; }
.phone-signal { width: 17px; height: 10px; border-radius: 2px; background: var(--home-cream); opacity: .9; }
.phone-battery { width: 22px; height: 10px; border-radius: 3px; border: 1.5px solid var(--home-cream); }
.phone img { display: block; width: 100%; height: auto; }
.phone-panel { width: min(300px, 74vw); }
.phone-panel .phone-signal { display: none; }
.phone-hero { width: min(350px, 80vw); padding: 11px 11px 0; border-radius: 56px 56px 0 0; box-shadow: 0 30px 60px rgba(35, 25, 21, .28); }
.phone-hero .phone-screen { border-radius: 46px 46px 0 0; }
.phone-hero .phone-status { height: 46px; padding: 0 28px 0 32px; font-size: 15px; }
.phone-hero .phone-island { top: 10px; width: 104px; height: 30px; border-radius: 20px; }
.phone-hero .phone-battery { width: 24px; height: 11px; }
.phone-cta { width: min(320px, 76vw); border-radius: 52px 52px 0 0; box-shadow: 0 30px 60px rgba(35, 25, 21, .28); }
.phone-cta .phone-screen { border-radius: 42px 42px 0 0; height: clamp(380px, 40vw, 500px); }
.phone-cta .phone-status { height: 42px; padding: 0 26px 0 30px; font-size: 14px; }
.phone-cta .phone-island { width: 96px; height: 28px; border-radius: 18px; }
.phone-cta .phone-signal { display: none; }

.watch { position: relative; background: #0A0807; border-radius: 46px; padding: 13px; box-shadow: inset 0 0 0 1.5px #3A302A, 0 30px 60px rgba(0, 0, 0, .5); }
.watch img { display: block; width: 100%; height: auto; border-radius: 34px; }
.watch-crown { position: absolute; right: -7px; top: 26%; width: 8px; height: 40px; border-radius: 3px; background: #2A221E; }
.watch-button { position: absolute; right: -5px; top: 56%; width: 6px; height: 26px; border-radius: 2px; background: #2A221E; }
.watch-hero { background: var(--home-case); border-radius: 38px; padding: 11px; box-shadow: 0 24px 48px rgba(20, 12, 8, .4), inset 0 0 0 1.5px #3A302A; }
.watch-hero img { border-radius: 28px; }
.watch-hero .watch-crown { right: -6px; width: 7px; height: 34px; }
.watch-hero .watch-button { right: -4px; width: 5px; height: 22px; }

/* Statement */
.home-statement { padding-block: clamp(72px, 10vw, 140px) clamp(40px, 6vw, 80px); }
.home-statement p { font-family: var(--home-display); font-weight: 700; font-size: clamp(34px, 4.2vw, 58px); line-height: 1.04; max-width: 1040px; text-wrap: pretty; }
.home-statement span { color: var(--home-terracotta); }

/* Features */
.home-feature { padding-block: clamp(32px, 5vw, 64px); }
.home-feature.image-left .home-row { flex-direction: row-reverse; }
.home-feature h2, .home-watch-band h2, .home-demo h2 { font-size: clamp(48px, 5.4vw, 76px); line-height: .9; margin-bottom: 24px; }
.home-feature-text { flex-basis: 400px; }
.home-panel { flex-basis: 420px; background: var(--home-panel); border-radius: 28px; padding: clamp(36px, 5vw, 64px) 24px 0; display: flex; justify-content: center; overflow: hidden; }
.home-legend { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; font-weight: 500; color: var(--home-body); }
.home-legend li { display: flex; align-items: center; gap: 7px; }
.home-legend span { width: 10px; height: 10px; border-radius: 3px; }

/* Demo */
.home-demo { padding-block: clamp(48px, 7vw, 96px); }
.home-demo-inner { border-top: 1px solid var(--home-rule); padding-top: clamp(40px, 6vw, 72px); flex-wrap: wrap; align-items: flex-start; }
.home-demo-intro { color: var(--home-body); max-width: 480px; margin-bottom: 28px; }
.home-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.home-chip { font-family: inherit; font-size: 15px; font-weight: 500; padding: 11px 16px; border-radius: 12px; border: 0; cursor: pointer; background: #FFFFFF; color: var(--home-ink); box-shadow: 0 1px 2px rgba(35, 25, 21, .10); transition: background .15s, color .15s, transform .12s; }
.home-chip[aria-pressed="true"] { background: var(--home-terracotta); color: #FFFFFF; font-weight: 600; }
.home-chip:active { transform: scale(.97); }
.home-chip:focus-visible { outline: 2px solid var(--home-terracotta-deep); outline-offset: 2px; }
.home-demo-plan { flex-basis: 420px; max-width: 520px; }
.home-plan-card { background: #FFFFFF; border-radius: 20px; box-shadow: var(--home-card-shadow); overflow: hidden; }
.home-plan-head { background: var(--home-terracotta); color: var(--home-cream); padding: 22px 24px; }
.home-plan-head .home-eyebrow { color: var(--home-cream); margin-bottom: 10px; }
.home-plan-title { font-family: var(--home-display); font-weight: 800; font-size: clamp(54px, 6vw, 72px); line-height: .9; }
.home-plan-why { padding: 22px 24px 8px; }
.home-plan-headline { font-family: var(--home-display); font-weight: 700; font-size: 28px; line-height: 1; }
.home-plan-why p:last-child { margin-top: 8px; font-size: 16px; color: var(--home-body); line-height: 1.45; }
.home-plan-items { list-style: none; margin: 0; padding: 8px 24px 20px; }
.home-plan-items li { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid var(--home-card-rule); }
.home-plan-items span { width: 10px; height: 10px; border-radius: 3px; margin-top: 7px; flex: none; }
.home-plan-items strong { font-weight: 600; font-size: 16px; }
.home-plan-items p { font-size: 15px; color: var(--home-body); line-height: 1.45; }
.home-demo-caption { font-size: 13px; color: var(--home-muted); margin-top: 12px; }

/* Watch band */
.home-watch-band { background: var(--home-dark); color: var(--home-cream); overflow: hidden; }
.home-watch-band .home-row { padding-block: clamp(72px, 9vw, 128px); gap: clamp(48px, 6vw, 96px); }
.home-watch-band .home-eyebrow { color: var(--home-dark-muted); }
.home-watch-band .home-body p { color: var(--home-dark-body); }
.home-watch-pair { flex-basis: 420px; display: flex; justify-content: center; align-items: center; gap: clamp(16px, 3vw, 32px); }
.home-watch-pair .watch { width: clamp(140px, 18vw, 220px); }
.home-watch-pair .watch:last-child { margin-top: clamp(40px, 6vw, 96px); }

/* Change anything / Private by design */
.home-pair { padding-block: clamp(72px, 9vw, 128px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(56px, 7vw, 112px); }
.home-pair h2 { font-size: clamp(44px, 4.6vw, 64px); line-height: .9; margin-bottom: 22px; }
.home-pair .home-body { margin-bottom: 26px; }
.home-tags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.home-tags li { font-size: 14px; font-weight: 500; padding: 7px 12px; border-radius: 10px; background: var(--home-panel); color: var(--home-body); }
.home-points { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--home-rule); }
.home-points li { padding: 16px 12px 0; font-family: var(--home-display); font-weight: 700; font-size: 26px; line-height: 1; }
.home-points li:first-child { padding-left: 0; }
.home-points li + li { border-left: 1px solid var(--home-rule); }

/* Closing CTA */
.home-cta { padding: 0 clamp(12px, 2vw, 24px) clamp(12px, 2vw, 24px); }
.home-cta-card { background: var(--home-terracotta); color: var(--home-cream); border-radius: 32px; overflow: hidden; max-width: 1400px; margin: 0 auto; }
.home-cta-inner { max-width: 1240px; margin: 0 auto; padding: clamp(56px, 7vw, 96px) clamp(20px, 5vw, 44px) 0; display: flex; flex-wrap: wrap; align-items: flex-end; gap: clamp(40px, 6vw, 96px); }
.home-cta-text { flex: 1 1 460px; min-width: 0; padding-bottom: clamp(8px, 6vw, 96px); }
.home-cta h2 { font-size: clamp(64px, 8vw, 120px); line-height: .88; margin-bottom: 24px; }
.home-cta-body { font-size: clamp(18px, 1.6vw, 21px); max-width: 460px; margin-bottom: 32px; }
body.wyllo .home-cta-body a { color: var(--home-cream); }
.home-cta-art { flex: 1 1 340px; min-width: 0; display: flex; justify-content: center; }

/* Footer */
body.wyllo .site-footer { width: 100%; max-width: 1240px; margin: 0 auto; padding: 36px var(--home-gutter) 48px; border: 0; background: none; font-size: 14px; color: var(--home-body); display: block; }
body.wyllo .site-footer .footer-inner { display: flex; flex-wrap: wrap; flex-direction: row-reverse; justify-content: space-between; align-items: flex-start; gap: 20px 40px; padding: 0; max-width: none; }
body.wyllo .site-footer .footer-credit { max-width: 520px; }
body.wyllo .site-footer .footer-credit p { margin: 0; }
body.wyllo .site-footer nav { gap: 12px 24px; }
body.wyllo .site-footer nav a { color: var(--home-ink); text-decoration: none; }
body.wyllo .site-footer nav a:hover { color: var(--home-terracotta); }

/* Motion */
@media (prefers-reduced-motion: no-preference) {
  .home-hero-phone { animation: home-rise 900ms var(--home-ease) both; }
  .home-hero-watch { animation: home-watch-rise 900ms var(--home-ease) 260ms both; }
  [data-reveal].is-pending { opacity: 0; transform: translateY(28px); }
  [data-reveal].is-revealed { transition: opacity .8s var(--home-ease), transform .8s var(--home-ease); }
}
@keyframes home-rise { from { transform: translateY(90px); opacity: 0; } }
@keyframes home-watch-rise { from { transform: translateY(60px) rotate(-4deg); opacity: 0; } }

/* Privacy and price */
.home-privacy { padding-block: clamp(48px, 7vw, 96px); }
.home-privacy-card { background: var(--home-panel); border-radius: 28px; padding: clamp(36px, 6vw, 80px); display: grid; gap: clamp(36px, 5vw, 64px); }
.home-privacy-main { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: clamp(32px, 5vw, 72px); }
.home-privacy-main > div:first-child { flex: 1 1 460px; min-width: 0; }
.home-privacy h2 { font-size: clamp(48px, 5.4vw, 76px); line-height: .9; margin-bottom: 24px; }
.home-privacy .home-body p { max-width: 560px; }
.home-price { flex: 0 1 auto; }
.home-price-amount { font-family: var(--home-display); font-weight: 800; font-size: clamp(88px, 11vw, 160px); line-height: .82; color: var(--home-terracotta); }
.home-price-note { margin-top: 10px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--home-muted); }
.home-privacy-points { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); border-top-color: #D6CABC; }
.home-privacy-points li { font-size: clamp(26px, 2.6vw, 34px); padding: 18px 16px 0; }
.home-privacy-points li + li { border-left-color: #D6CABC; }

/* Interior pages: terracotta header with the page title, then a reading column */
.page-hero-body { padding-block: clamp(32px, 6vw, 80px) clamp(40px, 6vw, 72px); }
.page-hero h1 { font-size: clamp(56px, 7vw, 104px); line-height: .88; color: var(--home-cream); }
body.wyllo .home-nav-links a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px; }
body.wyllo main.page-main { width: 100%; max-width: 800px; margin: 0 auto; padding: clamp(40px, 6vw, 80px) var(--home-gutter) clamp(56px, 8vw, 112px); }
.page-main .block-text { color: var(--home-body); font-size: 18px; line-height: 1.6; }
.page-main .block-text h2 { font-size: clamp(32px, 3.4vw, 44px); line-height: .95; color: var(--home-ink); margin: clamp(40px, 5vw, 56px) 0 14px; }
.page-main .block-text p { margin: 0 0 16px; max-width: 65ch; }
.page-main .block-text strong { color: var(--home-ink); }
.page-main .block-text ul { padding-left: 1.2em; margin: 0 0 16px; display: grid; gap: 6px; }
.page-main .block-text em:first-child { font-style: normal; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--home-muted); }
.page-main .block-faq { border-top: 1px solid var(--home-rule); }
.page-main .block-faq details { background: none; border-radius: 0; padding: 0; margin: 0; border-bottom: 1px solid var(--home-rule); }
.page-main .block-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; font-family: var(--home-display); font-weight: 700; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.05; color: var(--home-ink); }
.page-main .block-faq summary::-webkit-details-marker { display: none; }
.page-main .block-faq summary::after { content: "+"; font-family: var(--home-text); font-weight: 500; font-size: 26px; line-height: 1; color: var(--home-terracotta); flex: none; }
.page-main .block-faq details[open] summary::after { content: "–"; }
.page-main .block-faq summary:hover { color: var(--home-terracotta); }
.page-main .block-faq summary:focus-visible { outline: 2px solid var(--home-terracotta); outline-offset: 4px; border-radius: 4px; }
.page-main .block-faq details > div { color: var(--home-body); font-size: 18px; line-height: 1.6; padding: 0 0 24px; max-width: 65ch; }
.page-main .block-faq details > div p { margin: 0 0 12px; }
.page-main .block-faq details > div p:last-child { margin-bottom: 0; }