/* U+ TYPE's site for Fontra Hive (fontrahive.com), served by the deployment
   at /site/site.css after the plug-in's account.css: the landing (what Hive
   adds to Fontra), the legal pages, and the site header and footer written
   into each page by deploy/site-chrome.py. Moved from fontra-hive's
   account.css on 1 October 2026: the open plug-in keeps only its own pages. */

/* What Hive adds to Fontra (sign-in page): an overview of the features,
   then one row per feature (what it does, why it matters), then the
   foundations. Screenshots from fontrahive.com, demo project and people. */
.features {
  --honey: #e9b02a;
  --honey-soft: #e9b02a1f;
  --line: #ffffff17;
  --card: #2a2a2a;
  max-width: 68rem; width: 100%; margin: 1rem 0 5rem; line-height: 1.5;
}
.sprite { display: none; }
.i {
  width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.features-head { text-align: center; margin: 0 auto 2.5rem; max-width: 40rem; }
.eyebrow, .kicker {
  color: var(--honey); text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 0.8rem; margin: 0 0 0.6rem;
}
.features h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: normal; line-height: 1.15; margin: 0 0 0.8rem; }
.features .intro { opacity: 0.78; margin: 0; }

/* At a glance */
.glance {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem; margin: 0 0 5rem;
}
.glance a {
  display: flex; flex-direction: column; gap: 0.25rem; text-decoration: none;
  padding: 1.1rem 1.2rem 1.2rem; border-radius: 0.9rem;
  background: var(--card); border: 1px solid var(--line);
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.glance a:hover { transform: translateY(-2px); border-color: #e9b02a66; background: #2f2c25; color: inherit; }
.glance .i {
  width: 1.3rem; height: 1.3rem; color: var(--honey); padding: 0.45rem;
  background: var(--honey-soft); border-radius: 0.6rem; margin-bottom: 0.5rem;
}
.glance strong { font-weight: normal; font-size: 1.05rem; }
.glance span { font-size: 0.9rem; opacity: 0.65; line-height: 1.4; }
/* A last card alone on its row spans it, icon beside the text. */
.glance a:last-child:nth-child(3n+1) {
  grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr);
  column-gap: 1rem; align-items: center;
}
.glance a:last-child:nth-child(3n+1) .i { grid-row: span 2; margin-bottom: 0; }

/* One block per feature: what it does and why it matters side by side,
   then a large screenshot, so the interface stays readable. */
.feature { padding: 4rem 0; border-top: 1px solid var(--line); scroll-margin-top: 1rem; }
.feature .copy {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1rem 3rem;
  align-items: end; margin-bottom: 2rem;
}
.kicker { display: flex; align-items: center; gap: 0.5em; }
.kicker .i { width: 1.1rem; height: 1.1rem; }
.feature h3 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: normal; line-height: 1.2; margin: 0 0 0.8rem; }
.feature .text p:last-child { margin: 0; opacity: 0.88; }
.feature .why {
  margin: 0 0 1rem; background: var(--honey-soft); border-left: 3px solid var(--honey);
  border-radius: 0 0.6rem 0.6rem 0; padding: 0.75rem 1rem;
}
.feature .why strong { color: var(--honey); font-weight: normal; }
.points { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.points li {
  font-size: 0.85rem; padding: 0.25rem 0.7rem; border-radius: 1rem;
  border: 1px solid var(--line); background: #ffffff08;
}
.points li::before { content: "✓ "; color: var(--honey); }
.feature .more { margin: 0.9rem 0 0; font-size: 0.9rem; }
.feature .more a { color: var(--honey); text-decoration: none; }
.feature .more a:hover { text-decoration: underline; }

/* Screenshots share one frame, at most their size on screen (they are
   taken at 2x): the interface stays sharp and readable. */
.shot {
  margin: 0 auto; width: fit-content; max-width: 100%; border-radius: 0.9rem; overflow: hidden;
  background: #f4f4f4; box-shadow: 0 1.5rem 3rem -1rem #000c, 0 0 0 1px #ffffff14;
}
.shot img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.shot.stack { display: flex; flex-direction: column; gap: 1px; background: #d8d8d8; }
.shot.stack img { width: 100%; }
.shot.duo { display: flex; gap: 1px; background: #d8d8d8; align-items: flex-start; }
.shot.duo img { min-width: 0; flex: 1 1 auto; }

/* Coming next: features being built, shown apart from what exists (dashed). */
.next { border-top: 1px solid var(--line); padding: 3.5rem 0; text-align: center; }
.next h3 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); font-weight: normal; line-height: 1.2; margin: 0 0 1.5rem; }
.next-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 0.9rem;
  max-width: 56rem; margin: 0 auto; text-align: left;
}
.next-grid div {
  display: flex; flex-direction: column; gap: 0.3rem; padding: 1.2rem 1.3rem;
  border-radius: 0.9rem; border: 1px dashed #e9b02a59; background: #e9b02a0a;
}
.next-grid .i { color: var(--honey); margin-bottom: 0.3rem; }
.next-grid strong { font-weight: normal; font-size: 1.05rem; }
.next-grid span { font-size: 0.92rem; opacity: 0.72; line-height: 1.5; }

/* Foundations */
.foundation {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.9rem;
  border-top: 1px solid var(--line); padding-top: 3rem;
}
.foundation div { display: flex; flex-direction: column; gap: 0.3rem; padding: 1.1rem 1.2rem; border-radius: 0.9rem; background: var(--card); border: 1px solid var(--line); }
.foundation .i { color: var(--honey); margin-bottom: 0.3rem; }
.foundation strong { font-weight: normal; font-size: 1.05rem; }
.foundation span { font-size: 0.9rem; opacity: 0.68; line-height: 1.45; }
.foundation a { text-decoration: underline; }

.features .coming {
  margin: 3rem auto 0; max-width: 36rem; text-align: center;
  background: linear-gradient(180deg, #e9b02a14, transparent); border: 1px solid #e9b02a33;
  border-radius: 1rem; padding: 1.6rem 1.8rem;
}
.features .coming strong { color: var(--honey); font-weight: normal; font-size: 1.25rem; display: block; margin-bottom: 0.3rem; }
.features .coming a { text-decoration: underline; }

@media (max-width: 820px) {
  .feature { padding: 2.5rem 0; }
  .feature .copy { grid-template-columns: minmax(0, 1fr); margin-bottom: 1.5rem; }
  .glance { margin-bottom: 3rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .glance a:last-child:nth-child(3n+1) { grid-column: auto; display: flex; align-items: stretch; }
  .glance a:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .glance a:last-child:nth-child(3n+1) .i { margin-bottom: 0.5rem; }
}
@media (max-width: 700px) {
  .shot.duo { flex-direction: column; }
  .shot.duo img { width: 100%; }
}
@media (max-width: 560px) {
  .glance { grid-template-columns: minmax(0, 1fr); }
  .glance a:last-child:nth-child(odd) { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) { .glance a { transition: none; } }

/* Legal pages (/legal, /terms: served by the deployment, not by this plug-in),
   English first, then French (which prevails). */
/* These pages are always dark (account.css: #222, white text), whatever the
   theme of the system; Fontra's variables follow the system and would give
   black text to cards, forms and fields in a light one (seen on /billing in
   Safari, 14 Oct. 2026). The dark values of core.css, set here. */
body[data-page="legal"] {
  color-scheme: dark;
  --foreground-color: white;
  --background-color: #333;
  --ui-element-foreground-color: white;
  --ui-element-background-color: #484848;
  --text-input-foreground-color: white;
  --text-input-background-color: #333;
}
body[data-page="legal"] .logo.small { width: 72px; height: 72px; margin: 2em 0 0.5em; }
.lang { display: flex; gap: 1.5em; font-size: 0.9em; margin-bottom: 1em; }
.legal { max-width: 44rem; width: 100%; line-height: 1.55; margin: 1rem 0 2rem; scroll-margin-top: 1rem; }
.legal + .legal { border-top: 1px solid #ffffff22; padding-top: 2rem; }
body:not([data-page="home"]) .legal h1 { font-size: 2rem; margin: 0 0 0.2em; }
.legal h2 { font-size: 1.2rem; font-weight: normal; color: #e9b02a; margin: 2em 0 0.5em; }
.legal .updated { opacity: 0.65; font-size: 0.9em; margin-top: 0; }
.legal p, .legal li { opacity: 0.9; }
.legal ul { padding-left: 1.2em; }
/* Terms of sale: the consumer code's articles in a box (L.215-4), and the
   model withdrawal form of the annex. */
.legal .legal-box { border: 1px solid #e9b02a88; border-radius: 0.6rem; padding: 0.6rem 1rem; margin: 1em 0; background: #e9b02a12; }
.legal .withdrawal-form { border: 1px dashed #ffffff55; border-radius: 0.6rem; padding: 0.6rem 1rem; margin: 1em 0; }
.legal .withdrawal-form p { margin: 0.4em 0; }
.legal table { width: 100%; border-collapse: collapse; font-size: 0.85em; display: block; overflow-x: auto; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 0.5em 0.6em; border-bottom: 1px solid #ffffff22; }
.legal th { font-weight: normal; color: #e9b02a; }
.legal code { font-size: 0.9em; background: #ffffff14; padding: 0.1em 0.35em; border-radius: 0.3em; }
.legal a { text-decoration: underline; }

/* Site header and footer of the public pages: the landing (sign-in page)
   and U+ TYPE's pages served by the deployment (/pricing, /charter, /legal,
   /terms). The markup is written into each page by
   hive-api/deploy/site-chrome.py; the home page keeps its own bar. */
.site-header, .site-foot {
  --honey: #e9b02a;
  --line: #ffffff17;
  align-self: stretch;
  box-sizing: border-box;
  margin-left: -1.25em;
  margin-right: -1.25em;
}
.site-header {
  position: sticky; top: 0; z-index: 20;
  margin-top: -1.25em;
  display: flex; align-items: center; gap: 1rem 2rem;
  /* The same height as the bar of Hive's home page (fontra-hive, home.css). */
  box-sizing: border-box; min-height: 3.75rem; line-height: 1.5;
  padding: 0 clamp(1rem, 4vw, 2.5rem);
  background: #222222e6;
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header a, .site-foot a { color: inherit; text-decoration: none; }
.brand { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 1.1rem; white-space: nowrap; }
.brand img { width: 30px; height: 30px; }
.site-nav { display: flex; gap: 1.6rem; font-size: 0.95rem; }
.site-nav a { opacity: 0.78; white-space: nowrap; padding: 0.3rem 0; border-bottom: 2px solid transparent; }
.site-nav a[aria-current="page"] { opacity: 1; border-bottom-color: var(--honey); }
.site-header .site-nav a:hover, .site-foot nav a:hover, .site-foot p a:hover { opacity: 1; color: var(--honey); }
.site-actions { margin-left: auto; display: flex; align-items: center; gap: 1.2rem; font-size: 0.95rem; }
.site-actions .signin { opacity: 0.85; white-space: nowrap; }
.site-actions .signin:hover { color: var(--honey); opacity: 1; }
.site-actions .cta {
  background: var(--honey); color: #04232d; border-radius: 2rem;
  padding: 0.45rem 1.05rem; white-space: nowrap;
}
.site-header .site-actions .cta:hover { color: #04232d; filter: brightness(1.1); }
@media (max-width: 860px) {
  .site-header { flex-wrap: wrap; padding-top: 0.6rem; padding-bottom: 0; }
  .site-nav {
    order: 3; width: 100%; overflow-x: auto; scrollbar-width: none;
    gap: 1.3rem; padding-bottom: 0.35rem;
  }
  .site-nav::-webkit-scrollbar { display: none; }
}
@media (max-width: 440px) {
  .site-actions .signin { display: none; }
  .brand span { font-size: 1rem; }
}

.site-foot {
  margin-top: auto; margin-bottom: -1.25em;
  padding: 3.5rem clamp(1rem, 4vw, 2.5rem) 2rem;
  background: #1b1b1b; border-top: 1px solid var(--line);
  line-height: 1.5;
}
.foot-grid {
  max-width: 64rem; margin: 0 auto;
  display: grid; grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)); gap: 2rem 2.5rem;
}
.foot-brand p { opacity: 0.7; margin: 0.8rem 0 0; max-width: 22rem; font-size: 0.92rem; }
.foot-brand p a { text-decoration: underline; }
.foot-title {
  color: var(--honey); text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 0.72rem; margin: 0.35rem 0 0.9rem;
}
.site-foot nav a { display: block; opacity: 0.75; margin: 0 0 0.55rem; font-size: 0.92rem; }
.foot-base {
  max-width: 64rem; margin: 2.8rem auto 0; padding-top: 1.2rem; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem;
  font-size: 0.82rem; opacity: 0.6;
}
@media (max-width: 760px) {
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .foot-grid { grid-template-columns: minmax(0, 1fr); }
}
/* With the header, the legal pages start closer to the top. */
body[data-page="legal"] .lang { margin-top: 2rem; }
html:has(.site-header) { scroll-padding-top: 5.5rem; }

/* The landing's logo, animated (/site/hive-logo.js): a canvas over the icon, in the
   box the account styles give .logo; it fades in after its first frame. */
.hive-logo { position: relative; display: block; flex: none; }
.hive-logo img, .hive-logo canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hive-logo canvas { opacity: 0; transition: opacity 0.6s; touch-action: pan-y; }
.hive-logo.hive-logo-live canvas { opacity: 1; }
.hive-logo.hive-logo-live img { opacity: 0; transition: opacity 0.6s; }

/* Someone signed in (/site/session.js): "My projects" and their menu in the
   header, in place of "Sign in / Join the waiting list". */
.account-menu { position: relative; }
.account-menu summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.5rem;
  /* Where the home page's chip is (hive-views.js: .hive-right, margin-right 0.6em). */
  padding: 0; margin-right: 0.6rem; border-radius: 2rem; opacity: 0.9;
}
.account-menu summary::-webkit-details-marker { display: none; }
.account-menu summary:hover, .account-menu[open] summary { opacity: 1; color: var(--honey); }
.account-menu summary:focus-visible { outline: 2px solid var(--honey); outline-offset: 2px; }
.account-menu .face {
  width: 26px; height: 26px; border-radius: 50%; flex: none; object-fit: cover;
  display: inline-grid; place-items: center; font-size: 11px; font-weight: 600; color: white;
}
.account-menu summary:hover .face, .account-menu[open] .face { box-shadow: 0 0 0 2px var(--honey); }
.account-menu .who { max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-items {
  position: absolute; right: 0; top: calc(100% + 0.5rem); min-width: 12rem; z-index: 30;
  display: flex; flex-direction: column; padding: 0.4rem; border-radius: 0.8rem;
  background: #2a2a2a; border: 1px solid var(--line); box-shadow: 0 1rem 2rem -0.5rem #000a;
}
.site-header .account-items a { padding: 0.5rem 0.75rem; border-radius: 0.5rem; white-space: nowrap; }
.site-header .account-items a:hover, .site-header .account-items a:focus-visible { background: #ffffff10; color: var(--honey); }
/* The face alone, as on Hive's home page (its chip): the name is in the menu's label. */
.account-menu .who { display: none; }
/* Links for visitors or for members (/site/session.js toggles `hidden`):
   hidden even where a rule gives links a display (the pricing buttons). */
[data-visitor][hidden], [data-member][hidden] { display: none !important; }

/* /features: the landing for everyone (Caddy serves landing.html there), without
   the sign-in block; the site's "Features" links lead here, since / is the
   home page of whoever is signed in. */
body[data-page="features"] > :is(.logo, h1, .tagline, .lead, #login, .links, .try, #waitlist) { display: none; }
body[data-page="features"] .features { margin-top: 3rem; }

/* A page of the application served here (/billing): the bar of Hive's home
   page, and its one-line footer (account.css .site-footer). */
.site-header.app-bar .site-nav a[aria-current="page"] { opacity: 1; border-bottom-color: var(--honey); }
body[data-page="legal"] > .site-footer { margin: 3rem auto 2em; }

/* Passages of the terms the lawyer has to confirm (branch "ouverture"):
   visible until confirmed; deploy/check.sh refuses them in production. */
mark.confirm { background: #e9b02a33; color: inherit; border-bottom: 1px dashed #e9b02a; padding: 0 0.1em; }

/* The landing's sign-up form: the terms' box on one line with its label. */
.waitlist label.check { flex-direction: row; font-size: 0.85em; line-height: 1.4; }
.waitlist label.check input { margin: 0 0.4em 0 0; vertical-align: -0.1em; }
.waitlist label.check a { text-decoration: underline; }

/* /verify-email: the link of a free sign-up, where the password is chosen. */
.verify { text-align: center; }
.verify form { margin: 1.5rem auto 0; text-align: left; }

/* Cookie notice: its styles come with /site/cookie-notice.js, so that it
   looks the same on the pages that do not load this file (Hive's account
   pages, 27 Oct. 2026). */