/* Shared by index.html and press/index.html. Extracted so the press page
* cannot drift away from the site it represents. */
:root {
--teal: #29b393;
--gold: #c19a2e;
--ink: #14232e;
--paper: #f6f8f8;
--card: #ffffff;
--muted: #5a6b74;
--line: rgba(20,35,46,.08);
}
@media (prefers-color-scheme: dark) {
:root {
--ink: #eef4f3;
--paper: #0d1418;
--card: #16212a;
--muted: #9db0b8;
--line: rgba(238,244,243,.08);
--gold: #e3b545;
}
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
color: var(--ink);
background: var(--paper);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 24px; }
/* Hero */
header {
background: linear-gradient(135deg, #0d2144 0%, #147a68 70%, #29cca8 100%);
color: #fff;
text-align: center;
padding: 88px 24px 96px;
}
header img.appicon {
width: 128px; height: 128px;
border-radius: 28.8px;
box-shadow: 0 18px 44px rgba(0,0,0,.35);
}
header h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin-top: 28px; letter-spacing: -.02em; }
header p.tag { font-size: clamp(1.15rem, 2.6vw, 1.5rem); opacity: .95; margin-top: 12px; font-weight: 600; }
header p.sub { max-width: 640px; margin: 18px auto 0; opacity: .85; font-size: 1.02rem; }
.store-badge {
display: inline-block; margin-top: 34px;
background: #000; color: #fff; border: 1px solid rgba(255,255,255,.35);
border-radius: 12px; padding: 12px 26px; font-size: 1.02rem; font-weight: 600;
}
.store-badge small { display: block; font-size: .7rem; font-weight: 400; opacity: .8; text-align: left; }
.store-badge:hover { text-decoration: none; opacity: .9; }
header p.pricenote { margin-top: 14px; font-size: .85rem; opacity: .75; }
section { padding: 72px 0; }
section.alt { background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); letter-spacing: -.015em; margin-bottom: 10px; }
p.lead { color: var(--muted); max-width: 660px; margin-bottom: 36px; }
/* Use cases */
.cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.case { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 24px; }
section.alt .case { background: var(--paper); }
.case h3 { font-size: 1.06rem; margin-bottom: 6px; }
.case p { color: var(--muted); font-size: .95rem; }
.case .emoji { font-size: 1.6rem; display: block; margin-bottom: 10px; }
/* Screenshots */
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 26px; align-items: start; }
.shot img {
width: 100%; border-radius: 22px; border: 1px solid var(--line);
box-shadow: 0 14px 34px rgba(10,25,35,.14);
}
.shot figcaption { text-align: center; color: var(--muted); font-size: .9rem; margin-top: 12px; }
/* Features */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px 30px; }
.feature { display: flex; gap: 14px; align-items: flex-start; padding: 10px 0; }
.feature .dot {
flex: none; width: 38px; height: 38px; border-radius: 11px;
background: color-mix(in srgb, var(--teal) 16%, transparent);
color: var(--teal); display: grid; place-items: center; font-size: 1.15rem;
}
.feature h3 { font-size: 1rem; }
.feature p { color: var(--muted); font-size: .93rem; }
/* Pricing */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; align-items: stretch; max-width: 760px; }
.plan { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 28px; }
section.alt .plan { background: var(--paper); }
.plan.pro { border: 2px solid var(--gold); position: relative; }
.plan h3 { font-size: 1.2rem; margin-bottom: 4px; }
.plan .price { font-size: 1.05rem; font-weight: 700; margin: 6px 0 2px; }
.plan .trial { color: var(--muted); font-size: .85rem; margin-bottom: 14px; }
.plan ul { list-style: none; }
.plan li { padding: 5px 0 5px 26px; position: relative; color: var(--muted); font-size: .93rem; }
.plan li::before { content: "✓"; position: absolute; left: 0; color: var(--teal); font-weight: 700; }
.plan.pro li::before { color: var(--gold); }
.crown { color: var(--gold); }
/* Watch strip */
.watchfaces { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 28px; margin-top: 26px; }
.watchfaces figure { margin: 0; text-align: center; }
.watchfaces img { width: 100%; max-width: 240px; border-radius: 40px; border: 1px solid var(--line); box-shadow: 0 14px 34px rgba(10,25,35,.18); }
.watchfaces figcaption { margin-top: 10px; color: var(--muted); font-size: .9rem; }
/* Privacy & support */
.legal h3 { margin: 26px 0 6px; font-size: 1.05rem; }
.legal p, .legal li { color: var(--muted); font-size: .95rem; }
.legal ul { padding-left: 22px; }
.pill { display: inline-block; background: color-mix(in srgb, var(--teal) 14%, transparent); color: var(--teal); border-radius: 999px; padding: 3px 12px; font-size: .8rem; font-weight: 600; margin-bottom: 10px; }
footer { padding: 44px 24px 60px; text-align: center; color: var(--muted); font-size: .85rem; border-top: 1px solid var(--line); }
footer nav { margin-bottom: 12px; }
footer nav a { margin: 0 10px; }
/* Hero sub-line under the beta call to action. */
header p.pricenote .soon { display: inline-block; margin-top: 6px; opacity: .8; }
/* Press kit */
.presskit { max-width: 780px; margin: 0 auto; padding: 0 24px; }
.presskit h2 { margin-top: 38px; }
.presskit .copyblock {
background: var(--card); border: 1px solid var(--line); border-radius: 14px;
padding: 16px 18px; margin: 12px 0; white-space: pre-wrap;
font-size: .95rem; line-height: 1.55;
}
.presskit dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 0; }
.presskit dt { color: var(--muted); font-size: .9rem; }
.presskit dd { margin: 0; font-size: .95rem; }
.assets { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 14px; margin-top: 14px; }
.assets a { display: block; }
.assets img { width: 100%; border-radius: 10px; border: 1px solid var(--line); }