/* power-close.com: the layout around the Arabesque Labs design system's
   components (vendor/arabesque, loaded before this file), set as hunt's home
   page is. These rules are unlayered, so they win over the system's layers;
   every value is a token except the screenshots' own sizes. */

/* The logo's mark (img/mark.svg) in the lockup: one colour, drawn as a mask
   in the text's colour so it holds up in dark, as in the popup. */
.pc-mark {
  display: inline-block;
  background: currentColor;
  -webkit-mask: url("img/mark.svg") center / contain no-repeat;
  mask: url("img/mark.svg") center / contain no-repeat;
}

/* The opening: the claim and the actions at the start, the popup itself at
   the end, over the system's texture (which fades out behind the text). */
.hero { border-block-end: var(--al-border-hairline) solid var(--al-color-line); }
.hero__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(22rem, 40%); /* the popup at its own width; the rest is the text's, so the three stores fit on a row */
  gap: var(--al-space-8);
  align-items: center;
  padding-block: var(--al-space-12) var(--al-space-16);
}
.hero__title { margin: 0; text-wrap: balance; }
.hero__lede { margin: var(--al-space-6) 0 0; }
.hero__actions { margin-block-start: var(--al-space-8); }
/* Three stores on one row: a little less padding than the call to
   action's buttons, so Chrome, Firefox and Safari fit beside each other
   in the text's column. */
.hero__actions .pc-store { --al-button-padding-inline: var(--al-space-4); }
.hero__shot { justify-self: center; inline-size: min(100%, 22rem); }

/* A screenshot: the popup as the browser shows it, on a hairline. */
.shot, .shot-fig picture {
  display: block;
  margin: 0;
  border: var(--al-border-hairline) solid var(--al-color-line-strong);
  border-radius: var(--al-radius-sm);
  background: var(--al-color-bg);
  overflow: hidden;
}
.shot img, .shot-fig img { display: block; inline-size: 100%; block-size: auto; }

/* What it does: a grid of six, ruled like hunt's. */
.features {
  list-style: none;
  margin: var(--al-space-12) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block-start: var(--al-border-hairline) solid var(--al-color-line);
}
.features li { padding: var(--al-space-8) var(--al-space-8) var(--al-space-8) 0; border-block-end: var(--al-border-hairline) solid var(--al-color-line); }
.features li:not(:nth-child(3n + 1)) { padding-inline-start: var(--al-space-8); border-inline-start: var(--al-border-hairline) solid var(--al-color-line); }
.features svg { inline-size: 28px; block-size: 28px; fill: none; stroke: var(--al-color-accent); stroke-width: 1.5; stroke-linejoin: miter; stroke-linecap: square; }
.features h3 { margin: var(--al-space-5) 0 var(--al-space-2); font-size: var(--al-text-lg); font-weight: var(--al-weight-medium); }
.features p { margin: 0; font-family: var(--al-font-serif); font-size: var(--al-text-md); line-height: var(--al-leading-prose); color: var(--al-color-text-muted); }

/* Screenshots: the popup's other states, side by side. */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 20rem));
  justify-content: space-between;
  gap: var(--al-space-12) var(--al-space-8);
  margin-block-start: var(--al-space-12);
}
.shot-fig { margin: 0; }
.shot-fig figcaption { display: flex; flex-direction: column; gap: var(--al-space-1); }
/* The screenshots aren't all the same height, so each figure takes two of
   the gallery's rows (the picture, then the caption) through a subgrid:
   the captions start on one line, under the tallest picture. */
.shot-fig {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  row-gap: var(--al-space-4);
}
.shot-fig picture { align-self: start; }
.shot-fig figcaption strong { font-size: var(--al-text-lg); font-weight: var(--al-weight-medium); }
.shot-fig figcaption span { font-family: var(--al-font-serif); color: var(--al-color-text-muted); }

/* The sections' eyebrows (What it does, Screenshots, Questions): larger and
   heavier than the system's, so they read at a glance. */
.al-section__head .al-eyebrow { font-size: var(--al-text-md); font-weight: var(--al-weight-semibold); }

/* Questions: the head beside the answers, on a wide screen. */
.questions { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--al-space-8); align-items: start; }
.questions .al-disclosure__body p { margin: 0; font-family: var(--al-font-serif); line-height: var(--al-leading-prose); color: var(--al-color-text-muted); }

@media (max-width: 64rem) {
  .hero__body, .questions { grid-template-columns: minmax(0, 1fr); }
  .hero__body { padding-block: var(--al-space-8) var(--al-space-12); }
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .features li, .features li:not(:nth-child(3n + 1)) { padding: var(--al-space-8) 0; border-inline-start: 0; }
  .features li:nth-child(2n) { padding-inline-start: var(--al-space-8); border-inline-start: var(--al-border-hairline) solid var(--al-color-line); }
  .features li:nth-child(2n + 1) { padding-inline-end: var(--al-space-8); }
  .gallery { grid-template-columns: repeat(auto-fit, minmax(14rem, 20rem)); justify-content: center; }
}
@media (max-width: 40rem) {
  .features { grid-template-columns: minmax(0, 1fr); margin-block-start: var(--al-space-8); }
  .features li, .features li:nth-child(n) { padding: var(--al-space-6) 0; border-inline-start: 0; }
  /* The install buttons, on a phone: one under the other, the same width,
     taller, and centred. */
  .hero__actions, .al-cta__actions { flex-direction: column; align-items: stretch; inline-size: min(100%, 20rem); margin-inline: auto; }
  .hero__actions .pc-store, .al-cta__actions .pc-store { --al-button-height: 3.75rem; justify-content: center; font-size: var(--al-text-lg); }
}


/* The install buttons: larger than the system's, each in its browser's own
   colours (Google's blue; Firefox's orange, with Firefox's ink, as white on
   it would be under 3:1), with the browser's logo. The one place the site steps outside the tokens:
   these are the browsers' colours, not ours. Every pair is at least 4.5:1,
   hovered too, in both themes. */
.pc-store {
  --al-button-height: 3.25rem;
  --al-button-padding-inline: var(--al-space-6);
  gap: var(--al-space-3);
  font-size: var(--al-text-md);
}
.pc-store:hover { border-color: var(--_hover-bg); }
/* Each browser's logo in its own colours, on a white disc so it stands
   clear of the button (Firefox's flame would melt into its orange). */
.pc-store__logo {
  inline-size: 1.75rem;
  block-size: 1.75rem;
  padding: 0.125rem;
  border-radius: 50%;
  background: #fff;
}
.pc-store--chrome { --_bg: #1a73e8; --_fg: #fff; --_border: #1a73e8; --_hover-bg: #1765cc; }
.pc-store--firefox { --_bg: #ff7139; --_fg: #20123a; --_border: #ff7139; --_hover-bg: #e25920; }
/* Safari, not out yet: no store to go to, so not a link, and not a
   filled button. An outline in the site's own colours, with a "Coming
   soon" badge, at full strength rather than the system's faded disabled
   look, so it stays readable. */
.pc-store--soon,
.pc-store--soon:hover {
  --_bg: transparent; --_fg: var(--al-color-text); --_border: var(--al-color-line-strong); --_hover-bg: transparent;
  opacity: 1; cursor: default; background: var(--_bg); border-color: var(--_border); color: var(--_fg);
}
.pc-store--soon:active { transform: none; }
.pc-store--soon .al-badge { margin-inline-start: var(--al-space-1); }
.pc-icon-link--soon { color: var(--al-color-text-muted); }

/* Links with a brand's glyph before them: GitHub and Buy Me a Coffee, in
   the header and the closing call to action, and the stores' logos (in
   their own colours) in the footer. The glyphs are solid, so filled in
   the link's colour, with no stroke. */
.pc-icon-link { display: inline-flex; align-items: center; gap: var(--al-space-2); }
.pc-brand-icon { inline-size: 1.125rem; block-size: 1.125rem; flex: none; fill: currentColor; stroke: none; }

/* Buy me a coffee, under the call to action: in Buy Me a Coffee's own
   yellow and black (over 14:1), sized like the system's buttons. */
.pc-support {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--al-space-3);
  margin: var(--al-space-4) 0 0;
  font-family: var(--al-font-serif);
  color: var(--al-color-text-muted);
}
.pc-coffee {
  display: inline-flex;
  align-items: center;
  gap: var(--al-space-2);
  min-block-size: var(--al-button-height);
  padding-inline: var(--al-space-4);
  border-radius: var(--al-button-radius);
  background: #ffdd00;
  color: #000;
  font-family: var(--al-font-sans);
  font-weight: var(--al-weight-medium);
  text-decoration: none;
  transition: background-color var(--al-duration-fast) var(--al-ease-standard);
}
.pc-coffee:hover { background: #f5d000; }
.pc-coffee .pc-brand-icon { inline-size: 1.25rem; block-size: 1.25rem; }
/* The header's links: in the text's colour, not the muted one, and a step
   larger, so they read over the hero's pattern. */
.al-site-header__nav a,
.al-site-header .pc-icon-link { color: var(--al-color-text); font-size: var(--al-text-md); font-weight: var(--al-weight-medium); }
.al-site-header__nav a:hover,
.al-site-header .pc-icon-link:hover { color: var(--al-color-accent); }
.al-site-header__menu li a { font-weight: var(--al-weight-medium); }

/* In the header, GitHub reads as one of the nav's links: no underline
   until hovered, as theirs. */
.al-site-header .pc-icon-link { text-decoration: none; }
.al-site-header .pc-icon-link:hover { text-decoration: underline; }

/* The footer, as hunt's and the design system's site: the lockup and a line
   on what Power Close is, beside three columns of links; the legal lines
   under them, over a hairline, with the "A product of Arabesque Labs" badge
   (dark ink in the light theme, light ink in the dark one) at their end. */
.pc-foot__about { max-inline-size: 22rem; }
.pc-foot__brand { color: var(--al-color-text); text-decoration: none; }
.pc-foot__blurb { margin: var(--al-space-4) 0 0; font-size: var(--al-text-sm); line-height: 1.6; color: var(--al-color-text-muted); }
.pc-foot__attribution { display: inline-block; flex: none; line-height: 0; border-radius: var(--al-radius-full); }
.pc-foot__attribution img { max-inline-size: 100%; block-size: auto; }
.pc-foot__cols { display: grid; grid-template-columns: repeat(3, minmax(9rem, auto)); gap: var(--al-space-8) var(--al-space-16); }
.pc-foot__cols h2 { margin: 0 0 var(--al-space-4); font-size: var(--al-text-sm); font-weight: var(--al-weight-medium); color: var(--al-color-text); }
.pc-foot__cols .al-footer__links { flex-direction: column; gap: var(--al-space-3); }
/* The stores' logos overhang their line, and their links sit at its top
   rather than on the baseline, so the rows with them keep the other
   columns' rhythm. */
.pc-foot__cols .pc-icon-link { vertical-align: top; }
.pc-foot__cols .pc-brand-icon { margin-block: -0.25rem; }
.pc-foot .al-footer__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--al-space-4) var(--al-space-8); margin-block-start: var(--al-space-4); padding-block-start: var(--al-space-6); border-block-start: var(--al-border-hairline) solid var(--al-color-line); }
.pc-foot .al-footer__legal p { margin: 0; line-height: 1.6; }
@media (max-width: 52rem) {
  /* One column, not wrapping: the legal lines' flex-basis (100%, for a row)
     would otherwise wrap them into a second column, off a phone's screen. */
  .pc-foot { flex-direction: column; flex-wrap: nowrap; }
  .pc-foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--al-space-8); }
}

/* The closing call to action: the quiet pattern falls to a trace behind
   the heading, buttons and support line in the middle, and comes back in
   full towards the edges, as the hero's does behind its text. */
.al-cta.al-pattern--quiet .al-pattern__art,
.al-cta.al-pattern--quiet .al-pattern__art:dir(rtl) {
  -webkit-mask-image: radial-gradient(ellipse 55% 80% at center, rgb(0 0 0 / 0.2) 0 55%, black 100%);
  mask-image: radial-gradient(ellipse 55% 80% at center, rgb(0 0 0 / 0.2) 0 55%, black 100%);
}

/* The privacy notice and the terms: a title, its date, and the text, at a
   reading measure, below the plain header. */
.pc-doc { padding-block: var(--al-space-16) var(--al-space-section); }
.pc-doc .al-display { margin: 0; }
.pc-doc .al-muted { margin-block-start: var(--al-space-4); }
.pc-doc .al-prose { margin-block-start: var(--al-space-12); }
.pc-doc .al-prose h2 { margin-block-start: var(--al-space-12); }

/* The theme button, beside GitHub, as hunt's: the choice in use (auto, the
   system's, unless one is set). */
.theme-cycle .al-icon { display: none; }
:root:not([data-theme]) .theme-cycle__auto,
:root[data-theme="light"] .theme-cycle__light,
:root[data-theme="dark"] .theme-cycle__dark { display: block; }