/* PhoneForge marketing site.
 *
 * Deliberately plain: hand-written CSS, no framework, no build step and no
 * runtime JavaScript beyond the analytics tag. The apex is the first thing
 * anyone loads, often on a slow connection on a phone, and the whole page is
 * a few kilobytes this way.
 *
 * Colours, the top bar and the footer come from brand.css, which is a copy of
 * frontend/public/shared/brand.css so that the marketing site and the four
 * apps cannot drift apart. scripts/check_brand_parity.py fails if they do.
 */

/* ---- Hero --------------------------------------------------------------- */

main {
  margin: 0 auto;
  max-width: var(--pf-shell);
  padding: 0 24px;
}

p {
  margin: 0 0 14px;
}

html {
  scroll-behavior: smooth;
}

.hero {
  max-width: 820px;
  padding: 72px 0 48px;
}

.eyebrow {
  color: var(--pf-green-700);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
  text-transform: uppercase;
}

.hero h1 {
  font-size: clamp(34px, 6vw, 54px);
  letter-spacing: -0.02em;
}

.lede {
  color: var(--pf-muted);
  font-size: 18px;
  max-width: 62ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 26px 0 14px;
}

.cta {
  background: var(--pf-primary);
  border-radius: var(--pf-radius);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  font-weight: 650;
  min-height: 48px;
  padding: 0 26px;
  text-decoration: none;
}

.cta:hover {
  background: var(--pf-primary-hover);
}

.cta-ghost {
  align-items: center;
  border: 1px solid var(--pf-line);
  border-radius: var(--pf-radius);
  color: var(--pf-ink);
  display: inline-flex;
  font-weight: 650;
  min-height: 48px;
  padding: 0 26px;
  text-decoration: none;
}

.cta-ghost:hover {
  background: var(--pf-surface);
  border-color: var(--pf-green-600);
}

.hero-note {
  color: var(--pf-muted);
  font-size: 14px;
}

.cta-small {
  background: var(--pf-green-400);
  border-radius: 999px;
  color: var(--pf-green-950) !important;
  font-weight: 650;
  padding: 0 18px;
}

.cta-small:hover {
  background: var(--pf-green-300);
}

/* ---- The four tools ----------------------------------------------------- */

.tools {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  padding-bottom: 56px;
  scroll-margin-top: 20px;
}

.tool {
  background: var(--pf-surface);
  border: 1px solid var(--pf-line);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  padding: 28px;
  scroll-margin-top: 20px;
}

.tool-icon {
  align-items: center;
  background: #ffffff;
  border: 1px solid var(--pf-line);
  border-radius: 12px;
  color: var(--pf-green-700);
  display: inline-flex;
  height: 44px;
  justify-content: center;
  margin-bottom: 14px;
  width: 44px;
}

.tool-icon svg {
  height: 23px;
  width: 23px;
}

.tool h2 {
  font-size: 23px;
}

.tool-what {
  color: var(--pf-muted);
  font-size: 15.5px;
}

.feature-list {
  list-style: none;
  margin: 16px 0;
  padding: 0;
}

.feature-list li {
  color: var(--pf-muted);
  font-size: 15px;
  padding: 6px 0 6px 26px;
  position: relative;
}

.feature-list li::before {
  color: var(--pf-green-600);
  content: "\2713";
  font-weight: 700;
  left: 0;
  position: absolute;
}

.feature-list strong {
  color: var(--pf-ink);
}

.tool-flow {
  border-top: 1px solid var(--pf-line);
  color: var(--pf-muted);
  font-size: 14px;
  margin-top: auto;
  padding-top: 16px;
}

.tool-cta {
  align-items: center;
  align-self: flex-start;
  background: #ffffff;
  border: 1px solid var(--pf-primary);
  border-radius: var(--pf-radius);
  color: var(--pf-primary);
  display: inline-flex;
  font-weight: 650;
  gap: 8px;
  min-height: 46px;
  padding: 0 22px;
  text-decoration: none;
}

.tool-cta:hover {
  background: var(--pf-primary);
  color: #ffffff;
}

/* ---- Why ---------------------------------------------------------------- */

.why {
  border-top: 1px solid var(--pf-line);
  padding: 52px 0;
}

.why h2 {
  font-size: 28px;
  margin-bottom: 26px;
}

.why-grid {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.why-grid h3 {
  font-size: 17px;
}

.why-grid p {
  color: var(--pf-muted);
  font-size: 15px;
  margin: 0;
}

/* ---- Closing ------------------------------------------------------------ */

.closing {
  background: var(--pf-ink);
  border-radius: 18px;
  color: #ffffff;
  margin-bottom: 8px;
  padding: 48px 32px;
  text-align: center;
}

.closing h2 {
  font-size: 28px;
}

.closing p {
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 22px;
}

.closing .cta {
  background: var(--pf-green-400);
  color: var(--pf-green-950);
}

.closing .cta:hover {
  background: var(--pf-green-300);
}

/* ---- Legal pages -------------------------------------------------------- */

.legal {
  max-width: 760px;
  padding: 56px 0 24px;
}

.legal h1 {
  font-size: clamp(30px, 5vw, 40px);
  letter-spacing: -0.02em;
}

.legal-updated {
  color: var(--pf-muted);
  font-size: 14px;
  margin-bottom: 32px;
}

.legal h2 {
  font-size: 21px;
  margin-top: 38px;
  scroll-margin-top: 20px;
}

.legal h3 {
  font-size: 16.5px;
  margin-top: 24px;
}

.legal p,
.legal li {
  color: var(--pf-green-900);
  font-size: 16px;
}

.legal ul {
  margin: 0 0 14px;
  padding-left: 22px;
}

.legal li {
  margin-bottom: 7px;
}

.legal table {
  border-collapse: collapse;
  font-size: 15px;
  margin: 16px 0 22px;
  width: 100%;
}

.legal th,
.legal td {
  border: 1px solid var(--pf-line);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}

.legal th {
  background: var(--pf-surface);
  font-size: 14px;
}

.legal-note {
  background: var(--pf-surface);
  border: 1px solid var(--pf-green-100);
  border-radius: 12px;
  margin: 22px 0;
  padding: 16px 18px;
}

.legal-note p:last-child {
  margin-bottom: 0;
}

/* ---- Small screens ------------------------------------------------------ */

@media (max-width: 640px) {
  main {
    padding: 0 16px;
  }

  .hero {
    padding: 44px 0 36px;
  }

  .tool {
    padding: 22px;
  }

  .closing {
    padding: 36px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ---- Site navigation ----------------------------------------------------
 *
 * Four tool links plus a button was fine for four tools. With a guide,
 * pricing and services it is seven items and nobody reads the seventh,
 * so Tools becomes a menu.
 *
 * A <details> element, not a script: this page carries no JavaScript
 * beyond the analytics tag and that is the point of it being separate
 * from the app. The browser gives keyboard support and Escape for free.
 */

.site-nav {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.site-nav > a {
  align-items: center;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.82);
  display: inline-flex;
  font-size: 14.5px;
  min-height: 44px;
  padding: 0 14px;
  text-decoration: none;
}

.site-nav > a:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.nav-menu {
  position: relative;
}

.nav-menu summary {
  align-items: center;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.82);
  cursor: pointer;
  display: inline-flex;
  font-size: 14.5px;
  gap: 5px;
  list-style: none;
  min-height: 44px;
  padding: 0 14px;
  user-select: none;
}

.nav-menu summary::-webkit-details-marker {
  display: none;
}

.nav-menu summary:hover,
.nav-menu[open] summary {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.nav-menu summary svg {
  height: 15px;
  transition: transform 0.15s ease;
  width: 15px;
}

.nav-menu[open] summary svg {
  transform: rotate(180deg);
}

.nav-drop {
  background: var(--pf-card);
  border: 1px solid var(--pf-line);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.26);
  left: 0;
  min-width: 290px;
  padding: 6px;
  position: absolute;
  top: calc(100% + 6px);
  z-index: 60;
}

.nav-drop a {
  border-radius: 9px;
  display: grid;
  gap: 1px;
  padding: 10px 12px;
  text-decoration: none;
}

.nav-drop a:hover {
  background: var(--pf-surface);
}

.nav-drop b {
  color: var(--pf-ink);
  font-size: 15px;
}

.nav-drop span {
  color: var(--pf-muted);
  font-size: 13px;
  line-height: 1.4;
}

@media (max-width: 720px) {
  .nav-drop {
    left: auto;
    right: 0;
  }
}

/* ---- The menu at phone width --------------------------------------------
 *
 * One nav, not two. Above 900px the summary is hidden and the content
 * is forced visible, so the <details> is inert and the bar looks
 * exactly as it did. Below it, the summary becomes the three-bar
 * button and the same links drop out of it as a sheet.
 *
 * A second, mobile-only copy of the menu would be a second thing to
 * keep in step with the first, which is the mistake the footers on
 * this site already made once.
 */

.site-menu > summary {
  display: none;
}

/* `display` is not enough on its own. Chromium hides a closed
   <details> through `content-visibility` on ::details-content, not
   through the children, so overriding the children left the nav
   laid out at zero width and the desktop bar empty. Engines without
   the pseudo-element ignore this and the rule below still does the
   job for them. */
.site-menu::details-content {
  block-size: auto;
  content-visibility: visible;
}

.site-menu > .site-nav {
  display: flex;
}

@media (max-width: 900px) {
  /* Deliberately no position override here. brand.css makes the bar
     sticky, and this rule used to reset it to relative on narrow
     screens, which is where a bar that stays put is most useful.
     Sticky anchors the burger panel just as relative did. */

  .site-menu > summary {
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 11px;
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    height: 44px;
    justify-content: center;
    list-style: none;
    width: 44px;
  }

  .site-menu > summary::-webkit-details-marker {
    display: none;
  }

  .site-menu > summary svg {
    height: 21px;
    width: 21px;
  }

  .site-menu[open] > summary {
    background: rgba(255, 255, 255, 0.12);
  }

  .site-menu:not([open])::details-content {
    block-size: 0;
    content-visibility: hidden;
  }

  .site-menu:not([open]) > .site-nav {
    display: none;
  }

  .site-menu[open] > .site-nav {
    align-items: stretch;
    background: var(--pf-bar);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    flex-direction: column;
    gap: 2px;
    left: 0;
    padding: 8px 16px 18px;
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 70;
  }

  /* Full width and left aligned: a row of pills reads as a toolbar,
     a column of rows reads as a menu, and at this width it is a menu. */
  .site-menu[open] > .site-nav > a,
  .site-menu[open] .nav-menu summary {
    border-radius: 10px;
    justify-content: flex-start;
    width: 100%;
  }

  /* The Tools submenu opens in place rather than floating over the
     sheet it came out of. */
  .site-menu[open] .nav-drop {
    background: transparent;
    border: 0;
    box-shadow: none;
    min-width: 0;
    padding: 0 0 0 12px;
    position: static;
  }

  .site-menu[open] .nav-drop b {
    color: #ffffff;
  }

  .site-menu[open] .nav-drop span {
    color: rgba(255, 255, 255, 0.62);
  }

  .site-menu[open] .nav-drop a:hover {
    background: rgba(255, 255, 255, 0.1);
  }

  .site-menu[open] > .site-nav > .cta-small {
    justify-content: center;
    margin-top: 8px;
  }
}

/* ---- Pricing ------------------------------------------------------------ */

.price-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin: 0 auto;
  max-width: var(--pf-shell);
  padding: 0 24px;
}

.price {
  background: var(--pf-card);
  border: 1px solid var(--pf-line);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  padding: 24px 22px;
}

.price.is-featured {
  border-color: var(--pf-primary);
  box-shadow: inset 0 0 0 1px var(--pf-primary);
}

.price-tag {
  background: var(--pf-primary);
  border-radius: 999px;
  color: var(--pf-on-primary);
  font-size: 11.5px;
  font-weight: 760;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
  padding: 3px 10px;
  text-transform: uppercase;
  width: fit-content;
}

.price h2 {
  font-size: 21px;
  margin: 0 0 4px;
}

.price-who {
  color: var(--pf-muted);
  font-size: 14px;
  margin: 0 0 16px;
  min-height: 42px;
}

.price-amount {
  align-items: baseline;
  display: flex;
  gap: 6px;
  margin-bottom: 4px;
}

.price-amount b {
  font-size: 32px;
  letter-spacing: -0.02em;
  line-height: 1;
}

.price-amount span {
  color: var(--pf-muted);
  font-size: 14px;
}

/* Prices are not set yet, and a page that quietly shows a number
   nobody has agreed is worse than one that admits it. */
.price-tbc {
  background: var(--pf-warn-soft);
  border: 1px solid var(--pf-warn-line);
  border-radius: 8px;
  color: var(--pf-warn);
  display: block;
  font-size: 12.5px;
  font-weight: 650;
  margin-bottom: 18px;
  padding: 6px 10px;
}

.price ul {
  display: grid;
  gap: 9px;
  flex: 1;
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}

.price li {
  color: var(--pf-ink);
  font-size: 14.5px;
  line-height: 1.5;
  padding-left: 24px;
  position: relative;
}

.price li::before {
  color: var(--pf-primary);
  content: "\2713";
  font-weight: 700;
  left: 0;
  position: absolute;
}

.price li.is-off {
  color: var(--pf-muted);
}

.price li.is-off::before {
  color: var(--pf-muted);
  content: "\2014";
}

.price .cta,
.price .cta-ghost {
  justify-content: center;
  text-align: center;
  width: 100%;
}

/* ---- Services ----------------------------------------------------------- */

.svc-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  margin: 0 auto;
  max-width: var(--pf-shell);
  padding: 0 24px;
}

.svc {
  background: var(--pf-card);
  border: 1px solid var(--pf-line);
  border-radius: 16px;
  padding: 24px 22px;
}

.svc h2 {
  font-size: 19px;
  margin: 0 0 8px;
}

.svc p {
  color: var(--pf-muted);
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 14px;
}

.svc ul {
  display: grid;
  gap: 7px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.svc li {
  font-size: 14.5px;
  line-height: 1.5;
  padding-left: 18px;
  position: relative;
}

.svc li::before {
  background: var(--pf-primary);
  border-radius: 50%;
  content: "";
  height: 6px;
  left: 0;
  position: absolute;
  top: 8px;
  width: 6px;
}

/* ---- Help and FAQ -------------------------------------------------------- */

.faq {
  margin: 0 auto;
  max-width: 780px;
  padding: 0 24px;
}

.faq details {
  background: var(--pf-card);
  border: 1px solid var(--pf-line);
  border-radius: 12px;
  margin-bottom: 10px;
  padding: 0 18px;
}

.faq summary {
  cursor: pointer;
  font-size: 16px;
  font-weight: 650;
  list-style: none;
  padding: 16px 0;
  position: relative;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  color: var(--pf-muted);
  content: "+";
  font-size: 20px;
  font-weight: 400;
  position: absolute;
  right: 0;
  top: 13px;
}

.faq details[open] summary::after {
  content: "\2212";
}

.faq details > p,
.faq details > ul {
  color: var(--pf-muted);
  font-size: 15px;
  line-height: 1.65;
  margin: 0 0 16px;
}

.faq details > ul {
  padding-left: 20px;
}

/* ---- Newsletter signup --------------------------------------------------
 *
 * Posts to the Taadom relay; see marketing/newsletter.js. Styled from the
 * same tokens as everything else so it does not read as a bolted-on
 * widget, which is what most newsletter boxes look like.
 */

.nl {
  background: var(--pf-card);
  border: 1px solid var(--pf-line);
  border-radius: var(--pf-radius);
  margin: 48px 0 0;
  padding: 28px;
}

.nl h2 {
  margin: 0 0 6px;
}

.nl-lede {
  color: var(--pf-muted);
  margin: 0 0 18px;
  max-width: 58ch;
}

.nl-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.nl-row input[type="email"] {
  background: var(--pf-paper);
  border: 1px solid var(--pf-line);
  border-radius: var(--pf-radius);
  color: var(--pf-ink);
  flex: 1 1 260px;
  font: inherit;
  /* 44px, so it is a comfortable target on a phone. */
  min-height: 44px;
  padding: 0 14px;
}

.nl-row input[type="email"]:focus-visible {
  border-color: var(--pf-green-700);
  outline: 2px solid var(--pf-green-700);
  outline-offset: 1px;
}

.nl-row button {
  border: 0;
  cursor: pointer;
  font: inherit;
  min-height: 44px;
}

.nl-row button[disabled] {
  cursor: progress;
  opacity: 0.65;
}

/* The honeypot. Off-screen rather than display:none, because some bots
   skip hidden fields and the whole point is that they fill it in. It is
   taken out of the tab order and hidden from screen readers so nobody
   using one is ever asked to complete it. */
.nl-hp {
  left: -9999px;
  position: absolute;
}

.nl-status {
  margin: 12px 0 0;
  min-height: 1.3em;
}

.nl-status[data-nl-kind="error"] {
  color: var(--pf-danger);
}

.nl-status[data-nl-kind="ok"] {
  color: var(--pf-green-700);
}

.nl-status[data-nl-kind="busy"] {
  color: var(--pf-muted);
}

.nl-small {
  color: var(--pf-muted);
  font-size: 13px;
  margin: 14px 0 0;
  max-width: 58ch;
}

.cf-turnstile {
  margin-top: 14px;
}

@media (max-width: 560px) {
  .nl {
    padding: 20px;
  }

  .nl-row button {
    flex: 1 1 100%;
    justify-content: center;
  }
}