/* hivecastapp.com (redesigned 2026-11-10, agreed from tools/mockups/website-redesign/a.html, "Open sky").
   The site is dressed like a page of the app: the sky wash at the top, cream cards in each tab's color with the
   tab icons, the glass tab bar as the menu, and the welcome screen's bee. Colors and type are the app's (styles.css). */
@font-face { font-family: 'Figtree'; src: url(fonts/figtree-latin-7073ac.woff2) format('woff2'); font-weight: 300 900; font-display: swap; }
@font-face { font-family: 'Young Serif'; src: url(fonts/young-serif-latin-e51b6d.woff2) format('woff2'); font-weight: 400; font-display: swap; }
:root { color-scheme: light dark;
  --bg: #f1f4ee; --surface: #fffcf4; --surface-2: #f4eedf; --ink: #1d2a21; --muted: #5d6b60; --line: #d6ddd2; --card-edge: #e8e0cc;
  --honey: #e3a21c; --honey-soft: #f8e7b9; --honey-ink: #7a5205; --sky: #a6cbe8;
  --hive: #d9921a; --hive-ink: #8a5a07; --hive-soft: #f8e7b9;
  --forage: #a47ad8; --forage-ink: #6f48a8; --forage-soft: #ece2f8;
  --colony: #ecb81e; --colony-ink: #826600; --colony-soft: #fbf0c4;
  --journal: #5e8f45; --journal-ink: #3f6c2b; --journal-soft: #e2eed8;
  --card-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(90,60,10,.06), 0 10px 24px -12px rgba(90,60,10,.22);
  --glass: color-mix(in srgb, var(--surface) 58%, transparent); --glass-edge: rgba(255,255,255,.6);
  --display: 'Young Serif', Georgia, serif; --body: 'Figtree', system-ui, -apple-system, sans-serif;
  /* the tab icons' own colors */
  --ti-hb: #d9921a; --ti-hc: #f3bf3c; --ti-hwax: #9a5e06; --ti-lav: #a47ad8; --ti-lav-d: #6f48a8; --ti-fc: #f6c629; --ti-fc-d: #c7870a; --ti-fd: #a8670a; --ti-cv: #5e8f45; --ti-cv-d: #3d6a2a; --ti-sp: #477532; --ti-pg: #f4ead2; --ti-pg-d: #c9b98f; --ti-lb: #e9f0dc; --ti-bee: #f3bf3c; --ti-bee-d: #3b2c17; --ti-bw: #ffffff; --ti-bw-s: #9aa7ad; }
@media (prefers-color-scheme: dark) { :root {
  --bg: #111612; --surface: #1d211a; --surface-2: #272c22; --ink: #e8ede6; --muted: #9daa9f; --line: #2f3a30; --card-edge: #2f3a30;
  --honey: #f0b43a; --honey-soft: #3a2e14; --honey-ink: #f6cd74; --sky: #1c3448;
  --hive: #e09a1f; --hive-ink: #f2be4f; --hive-soft: #3a2e14;
  --forage: #b590e6; --forage-ink: #c7a6f0; --forage-soft: #2c2240;
  --colony: #f4c93c; --colony-ink: #f7d670; --colony-soft: #3a3112;
  --journal: #6fa352; --journal-ink: #93c777; --journal-soft: #1f3020;
  --card-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 10px 24px -14px rgba(0,0,0,.6);
  --glass: color-mix(in srgb, var(--surface) 55%, transparent); --glass-edge: rgba(255,255,255,.12);
  --ti-hb: #e09a1f; --ti-hc: #f7c84a; --ti-hwax: #8a5205; --ti-lav: #b590e6; --ti-lav-d: #7f56bd; --ti-fc: #f8cc35; --ti-fc-d: #c98a0c; --ti-fd: #9a5e08; --ti-cv: #6fa352; --ti-cv-d: #446f30; --ti-sp: #4f7f39; --ti-pg: #efe3c4; --ti-pg-d: #b9a77a; --ti-lb: #e4eed6; --ti-bee: #f7c84a; --ti-bee-d: #2e2212; --ti-bw: #e9eef0; --ti-bw-s: #7f8b90; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; position: relative; background: var(--bg); color: var(--ink); font: 17px/1.6 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
/* the sky over the hive, as a wash at the top of every page, like the app */
body::before { content: ''; position: absolute; inset: 0 0 auto; height: 980px; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, var(--sky) 0, var(--sky) 24%, color-mix(in srgb, var(--sky) 50%, var(--bg)) 62%, var(--bg) 100%); }
body.short::before { height: 620px; }
img, svg { display: block; } img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration-color: var(--honey); text-underline-offset: 3px; }
:focus-visible { outline: 2.5px solid var(--honey); outline-offset: 2px; border-radius: 8px; }
h1, h2 { font-family: var(--display); font-weight: 400; margin: 0; text-wrap: balance; }
p { margin: 0; }
.wrap { width: min(1120px, 100%); margin: 0 auto; padding: 0 20px; }
.defs { position: absolute; width: 0; height: 0; }

/* ---------- the top: the logo, the tab bar as the menu, Support ---------- */
.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 16px; padding-block: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 400 1.4rem/1 var(--display); }
.brand .mark { width: 34px; height: 34px; flex: none; }
.links { display: flex; gap: 8px; }
.pill { display: inline-flex; align-items: center; padding: 8px 15px; border-radius: 99px; font-weight: 700; font-size: .92rem; text-decoration: none; color: var(--ink);
  background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: 0 2px 10px rgba(20,35,20,.06); backdrop-filter: blur(14px) saturate(1.6); -webkit-backdrop-filter: blur(14px) saturate(1.6); }
.pill:hover { background: color-mix(in srgb, var(--surface) 80%, transparent); }
/* a row under the logo on a phone (like the iPad app's bar at the top), inside the top row on wide screens */
.tabs { order: 3; flex: 1 0 100%; display: flex; justify-content: space-around; padding: 5px; border-radius: 99px;
  background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: 0 2px 10px rgba(20,35,20,.06), inset 0 1px 0 rgba(255,255,255,.35); backdrop-filter: blur(22px) saturate(1.8); -webkit-backdrop-filter: blur(22px) saturate(1.8); }
.tabs a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px; border-radius: 99px; font-size: .75rem; font-weight: 600; text-decoration: none; color: var(--muted); transition: background .2s, color .2s; }
.tabs a:hover, .tabs a:focus-visible { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--acc-ink); }
.ti { width: 24px; height: 24px; flex: none; overflow: visible; }
.t-hive { --acc: var(--hive); --acc-ink: var(--hive-ink); --acc-soft: var(--hive-soft); }
.t-forage { --acc: var(--forage); --acc-ink: var(--forage-ink); --acc-soft: var(--forage-soft); }
.t-colony { --acc: var(--colony); --acc-ink: var(--colony-ink); --acc-soft: var(--colony-soft); }
.t-journal { --acc: var(--journal); --acc-ink: var(--journal-ink); --acc-soft: var(--journal-soft); }
/* the tab icons, drawn as in the app (index.html and styles.css there) */
.ti-hb { fill: var(--ti-hb); } .ti-hc { fill: var(--ti-hc); stroke: var(--ti-hwax); stroke-width: .8; stroke-linejoin: round; } .ti-hrim { fill: none; stroke: var(--ti-hwax); stroke-width: 1.5; stroke-linejoin: round; }
.ti-pt ellipse { fill: var(--ti-lav); stroke: var(--ti-lav-d); stroke-width: 1.1; } .ti-fc { fill: var(--ti-fc); stroke: var(--ti-fc-d); stroke-width: 1; } .ti-fd circle { fill: var(--ti-fd); }
.ti-bw { fill: var(--ti-bw); stroke: var(--ti-bw-s); stroke-width: .6; opacity: .95; } .ti-bb { fill: var(--ti-bee); } .ti-bo { fill: none; stroke: var(--ti-bee-d); stroke-width: 1.1; } .ti-bs { fill: none; stroke: var(--ti-bee-d); stroke-width: 1.6; } .ti-bh { fill: var(--ti-bee-d); } .ti-ba { fill: none; stroke: var(--ti-bee-d); stroke-width: 1; stroke-linecap: round; }
.ti-pg { fill: var(--ti-pg); stroke: var(--ti-pg-d); stroke-width: .9; } .ti-cv { fill: var(--ti-cv); stroke: var(--ti-cv-d); stroke-width: 1.1; stroke-linejoin: round; } .ti-cvo { fill: none; stroke: var(--ti-cv-d); stroke-width: 1.1; stroke-linejoin: round; } .ti-sp { fill: var(--ti-sp); } .ti-lb { fill: var(--ti-lb); }
.hex { width: 20px; height: 20px; flex: none; fill: var(--ti-hc); stroke: var(--ti-hwax); stroke-width: 1.6; stroke-linejoin: round; }

/* ---------- the welcome: the app icon, the bee leaving it, the headline ---------- */
.hero { display: grid; gap: 28px; padding-block: 18px 56px; }
.wel-top { position: relative; height: 84px; }
.wel-top .tile { position: absolute; left: 0; top: 4px; width: 72px; height: 72px; border-radius: 17px; overflow: hidden; box-shadow: 0 6px 16px -6px rgba(20,40,25,.5); }
.wel-top .tile svg { width: 100%; height: 100%; }
.fly { position: absolute; left: 62px; top: -4px; width: min(calc(100% - 62px), 300px); height: 90px; overflow: visible; }
.fly.still { display: none; }
.trail { fill: none; stroke: var(--honey); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 2 6; opacity: .85; }
/* each dash of the trail shows once the bee's tail is past it, as in the app's welcome (drawn once per dash, so the loop doesn't show early where the path crosses itself) */
.dashes { stroke: var(--honey); stroke-width: 1.8; stroke-linecap: round; opacity: .8; }
.hero h1 { font-size: clamp(2.5rem, 6.4vw, 4.1rem); line-height: 1.06; margin-top: 14px; }
.hero h1 em { font-style: normal; color: var(--honey-ink); }
.rule { width: 46px; height: 5px; border-radius: 99px; background: var(--acc, var(--hive)); margin-top: 16px; }
.hero .lede { margin-top: 16px; font-size: 1.18rem; line-height: 1.5; color: color-mix(in srgb, var(--ink) 78%, var(--sky)); max-width: 30em; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 18px 0 0; padding: 0; list-style: none; }
.chips li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px 7px 10px; border-radius: 99px; background: var(--honey-soft); color: var(--honey-ink); font-weight: 600; font-size: .9rem; }
.chips svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.soon { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; padding: 8px 15px; border-radius: 99px; background: var(--surface); border: 1px solid var(--card-edge); box-shadow: var(--card-shadow); color: var(--honey-ink); font-weight: 700; font-size: .92rem; }
.soon::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--honey); }
.hero-art { display: grid; justify-items: center; }
/* the phone: a plain dark bezel around a real screenshot */
.phone { width: 270px; padding: 8px; border-radius: 40px; background: #121713; box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 28px 50px -24px rgba(20,35,24,.6); flex: none; }
.phone img { width: 100%; border-radius: 32px; aspect-ratio: 750 / 1624; object-fit: cover; object-position: top; }
.hero-art .phone { width: min(290px, 76vw); }

/* ---------- cards, as in the app: cream, a warm edge in the tab's color, a small label over a serif title ---------- */
.card { background: var(--surface); border: 1px solid color-mix(in srgb, var(--acc, var(--hive)) 28%, var(--card-edge)); border-radius: 22px; box-shadow: var(--card-shadow); padding: 24px 22px; }
.card h2 { font-size: clamp(1.6rem, 3.6vw, 2.1rem); line-height: 1.14; }
.card p { margin-top: 10px; color: var(--muted); }
.kick { display: flex; align-items: center; gap: 8px; color: var(--acc-ink, var(--hive-ink)); margin-bottom: 10px; }
.kick .ti { width: 26px; height: 26px; }
.eyebrow { font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.wrap + .wrap { margin-top: 18px; }
.who h2 { max-width: 16em; } .who p { max-width: 40em; font-size: 1.08rem; }

.feats { display: grid; gap: 18px; }
.feat { display: grid; overflow: hidden; padding-bottom: 0; scroll-margin-top: 16px; }
.peek { margin: 22px -22px 0; padding: 26px 0 0; height: 330px; overflow: hidden; display: grid; justify-items: center; background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--acc-soft) 80%, transparent) 60%); }
.peek .phone { width: 236px; box-shadow: 0 20px 40px -20px rgba(20,35,24,.5); }

.guides ul { display: grid; gap: 9px; margin: 18px 0 0; padding: 0; list-style: none; }
.guides li { display: flex; align-items: center; gap: 11px; padding: 12px 15px; border-radius: 14px; background: var(--surface-2); font-weight: 600; }
.duo { display: grid; gap: 18px; }
.promise { --acc: var(--journal); --acc-ink: var(--journal-ink); }
.nos { display: grid; gap: 8px; margin: 16px 0 4px; padding: 0; list-style: none; }
.nos li { display: flex; align-items: center; gap: 10px; font: 400 1.25rem/1.2 var(--display); }
.nos svg { width: 26px; height: 26px; flex: none; }
.nos .n-hex { fill: var(--journal); stroke: var(--ti-cv-d); stroke-width: 1.4; stroke-linejoin: round; } .nos .n-tick { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.big { font: 400 3.1rem/1 var(--display); color: var(--honey-ink); margin-top: 6px; }
.big small { font: 600 1rem var(--body); color: var(--muted); margin-left: 8px; }

/* ---------- the bottom: the app's empty-screen drawing, a frame of comb with a bee drifting by ---------- */
.foot { margin-top: 56px; padding: 0 0 48px; color: var(--muted); font-size: .93rem; text-align: center; }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 20px; justify-content: center; margin-top: 8px; }
.empty-art { width: 150px; height: 96px; margin: 0 auto 14px; overflow: visible; }
.ea-fr { fill: #c9a15f; stroke: #8a6a35; stroke-width: 1.5; } .ea-c { fill: #f3bf3c; stroke: #9a5e06; stroke-width: .8; } .ea-e { fill: #f7ecd0; stroke: #9a5e06; stroke-width: .8; }
.ea-b { fill: #e7a91d; stroke: #3a2a10; stroke-width: 1; } .ea-s { fill: none; stroke: #3a2a10; stroke-width: 1.6; } .ea-w { fill: rgba(255,255,255,.75); stroke: #8aa; stroke-width: .6; }

/* ---------- Privacy, Terms, Support and Page not found: one long card under the sky ---------- */
.doc { width: min(760px, calc(100% - 32px)); margin: 10px auto 0; padding: 28px 22px 34px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--hive) 28%, var(--card-edge)); border-radius: 22px; box-shadow: var(--card-shadow); }
.doc h1 { font-size: clamp(2.1rem, 6vw, 2.9rem); line-height: 1.1; }
.doc h1::after { content: ''; display: block; width: 46px; height: 5px; border-radius: 99px; background: var(--hive); margin-top: 14px; }
.doc .when { color: var(--muted); margin-top: 12px; font-size: .95rem; }
.doc h2 { font: 700 1.15rem/1.3 var(--body); margin: 34px 0 6px; }
.doc ul { padding-left: 22px; margin: 8px 0; } .doc li { margin: 5px 0; }
.doc p + p { margin-top: 10px; }
.doc a { color: var(--honey-ink); }
/* the app's main button: honey with a darker lower edge */
.doc .mail { display: inline-block; margin-top: 14px; padding: 12px 20px; border-radius: 14px; background: #e3a21c; border: 1px solid #c2810f; box-shadow: inset 0 -3px 0 #b5740c, 0 2px 6px -2px rgba(150,95,10,.45); color: #2b1d00; font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.sum { margin-top: 22px; padding: 16px 20px; border-radius: 16px; background: var(--honey-soft); border: 1px solid color-mix(in srgb, var(--honey) 45%, transparent); }
.sum ul { margin: 0; }
.doc.lost { text-align: center; } .doc.lost h1::after { margin-inline: auto; } .doc.lost .empty-art { margin-bottom: 18px; }

/* ---------- little moments, as in the app; Reduce Motion turns them off ---------- */
@media (prefers-reduced-motion: no-preference) {
  .brand .mark polygon { transform-box: fill-box; transform-origin: center; animation: cell-in .34s calc(var(--i) * 85ms + 150ms) both; }
  .ea-bee { animation: hover 2.4s ease-in-out infinite; }
}
@keyframes cell-in { from { opacity: .25; transform: scale(.78); } 70% { opacity: 1; transform: scale(1.08); } to { transform: scale(1); } }
@keyframes hover { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-3px, -4px); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .fly.moving { display: none; } .fly.still { display: block; } }

@media (min-width: 760px) {
  .wrap { padding: 0 32px; }
  .tabs { order: 0; flex: none; }
  .tabs a { flex-direction: row; gap: 7px; padding: 7px 14px; font-size: .9rem; }
  .tabs .ti { width: 22px; height: 22px; }
  .hero { grid-template-columns: 1.2fr .8fr; align-items: center; gap: 40px; padding-block: 44px 84px; }
  .hero-art .phone { width: 310px; }
  .card { padding: 32px; border-radius: 26px; }
  .feat { grid-template-columns: 1fr 228px; gap: 28px; padding-bottom: 0; }
  .feat .txt { padding-bottom: 32px; align-self: center; }
  .peek { margin: -32px -32px 0 0; padding: 40px 0 0; height: 420px; justify-items: start; background: linear-gradient(to right, transparent, color-mix(in srgb, var(--acc-soft) 80%, transparent) 55%); }
  .peek .phone { width: 220px; margin-left: 8px; }
  .guides ul { grid-template-columns: repeat(3, 1fr); }
  .duo { grid-template-columns: 1fr 1fr; }
  .foot { padding-bottom: 56px; }
  .doc { padding: 44px 48px 52px; border-radius: 26px; margin-top: 20px; }
}
@media (min-width: 1100px) {
  .feats { grid-template-columns: 1fr 1fr; }
  .feat { grid-template-columns: 1fr 210px; gap: 22px; }
  .feat .txt { align-self: start; }
  .peek { height: 440px; } .peek .phone { width: 228px; margin-left: 4px; }
}