/* App Garden — support, legal and checkout pages.
   Master copy. Mirrored to hardcoded-value-detector/site.css, the apex
   site.css, and each add-in repo's site/site.css. Styles the existing markup
   only, so the Paddle checkout on the buy page and the key handover on the
   claim page keep their structure untouched.

   The cinematic direction, carried onto the prose pages. The homepage is the
   full version of it — the grid plane, the glows, the parallax; here the same
   palette, the same ribbon and the same type scale dress a column of text, and
   the atmosphere is left behind. A refund policy does not need a stage.

   Both colour schemes are designed, not derived. Dark is the direction's home
   ground, and it is the softer #0f1412 rather than the homepage's near-black:
   these pages are read rather than looked at, and #030303 under a column of
   body text is a glare, not a stage. Light is not that inverted — the raised
   surfaces become paper on paper, and shadows do the separating that hairlines
   do on dark.

   Green is the brand: the Bloom's one green petal, and the mark's own green.
   Magenta means one thing and one thing only: a defect. It is absent from the
   identity so it can keep meaning that here.

   Webfonts are progressive enhancement. Every family has a system fallback of
   similar proportion, so these pages still render correctly with no network
   fetch — a reviewer's machine, an offline check, or a blocked font CDN all get
   a complete page. */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Schibsted+Grotesk:wght@400;500;600;700;800&display=swap");

:root {
  color-scheme: light dark;

  --paper: #f7f6f3;
  --ink: #101311;
  --muted: #5c625b;
  --faint: #6f756e;

  /* the Bloom's green petal */
  --accent: #1f6b4f;
  --accent-soft: #1a5b43;
  --link: #1a5b43;

  /* the one magenta, and it means a defect */
  --flag: #c41e5c;
  --flag-ink: #ffffff;
  --flag-wash: #fdf2f6;

  /* A button's fill runs light-to-dark down the pill in both schemes, so the two
     stops are named rather than mixed off --accent, which would invert the
     gradient in one of them. */
  --btn-a: #27805e;
  --btn-b: #1f6b4f;
  --btn-ink: #f7f6f3;

  --card: #ffffff;
  --band: #eceae4;
  --rule: rgba(16, 19, 17, 0.13);
  --hair: rgba(16, 19, 17, 0.08);
  --surf: rgba(16, 19, 17, 0.028);
  --surf-2: rgba(16, 19, 17, 0.05);
  --nav-bg: rgba(247, 246, 243, 0.78);

  --pill: 980px;
  --lift: 0 18px 44px -30px rgba(16, 19, 17, 0.28);
  /* A scrim always darkens. Never derive it from --ink, which inverts. */
  --scrim: rgba(16, 19, 17, 0.55);

  --display: "Schibsted Grotesk", "Segoe UI", system-ui, sans-serif;
  --body: "Schibsted Grotesk", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0f1412;
    --ink: #e8ebe6;
    --muted: #a2aaa1;
    --faint: #8e968d;

    --accent: #86d0a6;
    --accent-soft: #b3e4c8;
    --link: #86d0a6;

    --flag: #ff7ba4;
    --flag-ink: #0f1412;
    --flag-wash: #2c1a22;

    --btn-a: #b3e4c8;
    --btn-b: #86d0a6;
    --btn-ink: #08120c;

    --card: #171f1c;
    --band: #141a17;
    --rule: rgba(255, 255, 255, 0.1);
    --hair: rgba(255, 255, 255, 0.06);
    --surf: rgba(255, 255, 255, 0.035);
    --surf-2: rgba(255, 255, 255, 0.06);
    --nav-bg: rgba(15, 20, 18, 0.72);

    /* No usable shadow on a dark ground; raised surfaces carry a border. */
    --lift: none;
    --scrim: rgba(0, 0, 0, 0.7);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main {
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 7vw, 4rem) clamp(1.25rem, 5vw, 2rem) 4rem;
}

/* ---- headings -------------------------------------------------------- */

h1 {
  margin: 0 0 0.9rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.1rem, 6vw, 3.2rem);
  line-height: 1.01;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

/* Section rules were an earlier direction's device. This one separates with
   space and weight instead, so an h2 is a heading, not a ruled band. */
h2 {
  margin: 2.75rem 0 0.75rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.45rem;
  line-height: 1.2;
  letter-spacing: -0.028em;
}

h3 {
  margin: 0 0 0.6rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.25;
  letter-spacing: -0.022em;
}

/* The standfirst under the page title. */
.lead {
  margin: 0 0 1.25rem;
  color: var(--muted);
  font-size: 1.3rem;
  line-height: 1.5;
  text-wrap: pretty;
}

p {
  margin: 0 0 1.1rem;
  text-wrap: pretty;
}

strong {
  font-weight: 600;
  color: var(--ink);
}

em {
  font-style: italic;
}

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 3px;
  border-radius: 4px;
}

code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--surf);
  border: 1px solid var(--rule);
  border-radius: 5px;
  padding: 0.08em 0.34em;
}

/* ---- lists ------------------------------------------------------------ */

ul {
  margin: 0 0 1.1rem;
  padding-left: 1.3rem;
}

li {
  margin-bottom: 0.6rem;
}

li::marker {
  color: var(--faint);
}

/* ---- buy page: billing cycle switch ----------------------------------- */

.cycle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  margin-bottom: 1.75rem;
  padding: 0.9rem 1.1rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow: var(--lift);
  font-size: 0.92rem;
}

.cycle label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
}

.cycle input {
  accent-color: var(--accent);
}

/* ---- buy page: plans --------------------------------------------------- */

.plans {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  align-items: start;
  margin-bottom: 1.75rem;
}

@media (min-width: 44rem) {
  .plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.plan {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 20px;
  box-shadow: var(--lift);
  padding: 1.75rem;
}

.plan ul {
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--hair);
  font-size: 0.95rem;
}

.plan li {
  margin: 0;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--hair);
  line-height: 1.45;
  color: var(--muted);
}

.price {
  margin: 0 0 1.25rem;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  color: var(--faint);
  font-size: 0.95rem;
}

.price strong {
  font-family: var(--display);
  font-weight: 800;
  font-size: 2.6rem;
  letter-spacing: -0.042em;
  line-height: 1;
}

/* ---- controls ---------------------------------------------------------- */

button {
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  text-transform: none;
  color: var(--btn-ink);
  background: linear-gradient(180deg, var(--btn-a), var(--btn-b));
  border: 0;
  border-radius: var(--pill);
  padding: 0.9rem 1.7rem;
  cursor: pointer;
  box-shadow: 0 10px 34px -14px color-mix(in oklab, var(--accent), transparent 25%),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: box-shadow 320ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

button:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 56px -14px color-mix(in oklab, var(--accent), transparent 8%),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

input[type="number"] {
  font-family: var(--mono);
  font-size: 0.9rem;
  color: inherit;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 0.55rem 0.7rem;
  width: 4.8rem;
}

.plan label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-right: 0.75rem;
  font-size: 0.9rem;
  color: var(--muted);
}

/* ---- notes and errors --------------------------------------------------- */

.status {
  color: var(--faint);
  font-size: 0.9rem;
  line-height: 1.5;
}

.error {
  color: var(--flag);
  background: var(--flag-wash);
  border: 1px solid var(--flag);
  border-radius: 14px;
  padding: 0.9rem 1.1rem;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* The buy page toggles #failed with the hidden attribute; never let a
   display rule above outrank it. */
[hidden] {
  display: none !important;
}

/* ---- claim page --------------------------------------------------------- */

#claim {
  margin-bottom: 1.5rem;
}

/* The key itself, once claim.js writes it in. Unscoped as well as scoped: the
   script sets className="key" on an element it appends to #claim, but the class
   is the contract, not its position.

   user-select: all is load-bearing — one click takes the whole key, which is how
   it gets typed into the pane on a second machine without dropping a
   character. */
.key,
#claim code,
#claim .key {
  display: block;
  font-family: var(--mono);
  font-size: 1.05rem;
  margin: 0 0 1.1rem;
  padding: 1rem 1.1rem;
  word-break: break-all;
  user-select: all;
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent);
  border-radius: 14px;
}

/* ---- footer -------------------------------------------------------------- */

footer {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  color: var(--faint);
  font-size: 0.9rem;
}

footer p {
  margin: 0;
}

footer a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}

footer a:hover {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

/* ---- masthead and index drawer ------------------------------------------ */

/* Every page wears the same top row. The homepage keeps its own inline copy:
   it is deliberately self-contained and loads no stylesheet, so a change here
   has to be made there too. */

/* These two values are the homepage's `.wrap`, not this file's own measure.
   The homepage carries an inline copy of the ribbon inside a 74rem `.wrap`
   with a 5rem gutter; matching it here is what stops the mark jumping
   sideways when you leave the homepage for any other page. `main` above is
   still 46rem — the ribbon has always been wider than the prose it sits
   over, and stays so. */
.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  min-height: 66px;
  max-width: 74rem;
  margin: 0 auto;
  padding: 0.6rem clamp(1.25rem, 5vw, 5rem);
  background: var(--nav-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule);
}

.masthead-left {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

/* The Bloom is inline in each page rather than an <img> pointing at /logos.
   Only the apex serves that path, so on a per-add-in preview host the sourced
   file 404s and the ribbon loses its mark; inline, every project's copy of the
   ribbon is complete on its own. */
.brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.018em;
  font-size: 1.02rem;
  text-decoration: none;
}

.brand:hover {
  color: var(--ink);
}

.brand svg {
  display: block;
  width: 24px;
  height: 24px;
}

.petal {
  fill: var(--ink);
}

.petal-accent {
  fill: var(--accent);
}

/* Windows High Contrast forces `color` and `background-color` to the system
   pair but Chrome leaves SVG `fill` alone, so the Bloom kept its dark ink on a
   forced-black ribbon and disappeared. Repaint it in system colours. */
@media (forced-colors: active) {
  .petal {
    fill: CanvasText;
  }

  .petal-accent {
    fill: Highlight;
  }
}

.masthead-note {
  margin: 0;
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

@media (max-width: 47.9rem) {
  .masthead-note {
    display: none;
  }
}

/* On an add-in's own pages the ribbon note names that add-in rather than carrying
   the house line, because the h1 below is a benefit sentence and nothing else on
   the page says which of the seven you are looking at. It therefore survives the
   narrow-screen rule above -- the house line is decoration and can go, a product
   name is the page's own label and cannot. */
.masthead-note.is-product {
  display: block;
  color: var(--muted);
}

/* Without JS the drawer is a plain list in the flow, so the toggle would
   control nothing. Only reveal it once we know scripting is on. */
.nav-toggle {
  display: none;
}

.js .nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-width: 44px;
  min-height: 44px;
  background: var(--surf);
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: none;
  color: inherit;
  font-family: var(--display);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  padding: 0.5rem 0.8rem;
  cursor: pointer;
}

.js .nav-toggle:hover {
  transform: none;
  border-color: var(--ink);
  box-shadow: none;
}

/* Three stacked worksheet rows, not a hamburger. */
.rows {
  display: grid;
  gap: 2px;
  width: 0.95rem;
}

.rows span {
  height: 2px;
  background: currentColor;
}

.rows span:nth-child(2) {
  background: var(--accent);
}

/* ---- the Add-ins menu in the top row ------------------------------------ */

/* Seven add-ins is too many for a flat row of links. On wide screens the top
   row carries an Add-ins button that opens a panel; below that width the row
   hides it and the drawer does the same job. Both are plain markup: with no
   JS the button is hidden and the drawer's list is still there. */

.site-nav {
  display: none;
}

.js .site-nav {
  display: none;
}

@media (min-width: 60rem) {
  .js .site-nav {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    font-size: 0.92rem;
  }

  .js .site-nav a {
    color: var(--muted);
    text-decoration: none;
  }

  .js .site-nav a:hover {
    color: var(--ink);
  }
}

/* Static, deliberately: the menu below is centred on its containing block, and
   the toggle is the wrong thing to centre 44rem of menu on -- it sits right of
   centre in the ribbon, so half the panel fell off the right of the viewport.
   Leaving this static makes the sticky .masthead the containing block instead,
   which spans the page, so the menu centres on the page and cannot overhang. */
.addins {
  position: static;
}

.addins-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.4rem 0.2rem;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--ink);
  font-family: var(--display);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}

.addins-toggle:hover {
  transform: none;
  background: none;
  box-shadow: none;
  color: var(--accent-soft);
}

.addins-toggle svg {
  transition: transform 0.18s ease;
}

.addins-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.addins-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  width: min(44rem, calc(100vw - 2rem));
  max-width: calc(100vw - 2rem);
  padding: 1rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 18px;
  box-shadow: 0 28px 60px -30px rgba(0, 0, 0, 0.5);
}

.addins-menu[hidden] {
  display: none !important;
}

.addins-menu ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.addins-menu li {
  margin: 0;
}

.addins-menu a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.2rem 0.9rem;
  padding: 0.75rem 0.85rem;
  border-radius: 12px;
  text-decoration: none;
  color: var(--ink);
}

.addins-menu a:hover,
.addins-menu a:focus-visible {
  background: var(--surf-2);
  color: var(--ink);
}

.addins-name {
  font-size: 0.95rem;
  font-weight: 600;
}

.addins-what {
  font-size: 0.85rem;
  color: var(--muted);
}

.addins-price {
  grid-row: span 2;
  align-self: center;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--faint);
  white-space: nowrap;
}

/* ---- drawer -------------------------------------------------------------- */

.drawer {
  background: var(--paper);
}

.js .drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 70;
  width: min(21rem, 86vw);
  overflow-y: auto;
  border-right: 1px solid var(--rule);
  transform: translateX(-100%);
  transition: transform 0.28s ease;
}

.js .drawer[data-open="true"] {
  transform: none;
}

.drawer-inner {
  padding: 1.5rem 1.5rem 3rem;
}

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
}

/* The drawer's own heading is a label, not a section heading. */
.drawer-title {
  margin: 0;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}

.drawer-close {
  display: none;
  background: none;
  border: 0;
  border-radius: 12px;
  box-shadow: none;
  color: inherit;
  font-size: 1.35rem;
  line-height: 1;
  min-width: 44px;
  min-height: 44px;
  padding: 0.35rem 0.5rem;
  cursor: pointer;
}

.js .drawer-close {
  display: block;
}

.drawer-close:hover {
  transform: none;
  background: none;
  box-shadow: none;
  color: var(--accent-soft);
}

.drawer-group {
  margin-top: 1.6rem;
}

.drawer-group h3 {
  margin: 0 0 0.5rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.014em;
  text-transform: none;
}

.drawer-group ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.drawer-group li {
  margin: 0;
}

.drawer-group a {
  display: block;
  padding: 0.5rem 0 0.5rem 0.8rem;
  border-left: 2px solid var(--rule);
  color: var(--muted);
  font-size: 0.92rem;
  text-decoration: none;
}

.drawer-group a:hover,
.drawer-group a:focus-visible {
  border-left-color: var(--accent);
  color: var(--ink);
}

.drawer-group a[aria-current="page"] {
  border-left-color: var(--accent);
  color: var(--ink);
  font-weight: 600;
}

.drawer-backdrop {
  display: none;
}

.js .drawer-backdrop {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 65;
  background: var(--scrim);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s;
}

.js .drawer-backdrop[data-open="true"] {
  opacity: 1;
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  .js .drawer,
  .js .drawer-backdrop,
  .addins-toggle svg,
  button {
    transition: none;
  }
}