/* ---------------------------------------------------------------------------
   Hand-written layer. generated.css carries the design verbatim; this file adds
   the things a prototype does not have to think about — WordPress chrome, the
   blog, forms, state machinery, print and reduced motion.
   --------------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #fff;
  font-family: var(--jn-font-body);
  color: var(--jn-ink);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img, svg, video { max-width: 100%; height: auto; }
button { font: inherit; }

/* ---------------------------------------------------------------- a11y ---- */

.jn-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  background: var(--jn-teal);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 var(--jn-radius-btn) 0;
  font-weight: 700;
}
.jn-skip:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--jn-teal-light);
  outline-offset: 2px;
  border-radius: 4px;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* --------------------------------------------------------- state groups ---- */

/* Pages with a segment / OS / category switch ship every variant; only the
   active one is shown. Without JS the first variant stays visible, which is
   the correct no-script fallback. */
.jn-state { display: none; }
.jn-state[data-jn-active] { display: contents; }

/* A state region that wraps grid children must not introduce a box. `contents`
   handles that, but Safari < 16 needs the fallback below. */
@supports not (display: contents) {
  .jn-state[data-jn-active] { display: block; }
}

/* ---------------------------------------------------------------- FAQ ---- */

.jn-faq-open .jn-faq-body { max-height: 900px !important; }

/* ------------------------------------------------------------- generic ---- */

.jn-container {
  max-width: var(--jn-container-tight);
  margin: 0 auto;
  padding: 0 var(--jn-gutter);
}

.jn-generic-hero {
  background: var(--jn-wash);
  padding: 66px 0 54px;
  margin-bottom: 44px;
}
.jn-generic-hero h1 {
  font-family: var(--jn-font-display);
  font-size: clamp(32px, 5vw, 46px);
  line-height: 1.08;
  letter-spacing: -.02em;
  font-weight: 800;
  margin: 0;
}
.jn-generic-hero p {
  color: var(--jn-body);
  margin: 12px 0 0;
  font-size: 17px;
}

/* --------------------------------------------------------------- prose ---- */

.jn-prose {
  max-width: 860px;
  padding-bottom: 64px;
  font-size: 17px;
  line-height: 1.75;
  color: var(--jn-body-2);
}
.jn-prose h1, .jn-prose h2, .jn-prose h3, .jn-prose h4 {
  font-family: var(--jn-font-heading);
  color: var(--jn-ink);
  line-height: 1.25;
  margin: 1.8em 0 .5em;
}
.jn-prose h2 { font-size: 26px; }
.jn-prose h3 { font-size: 20px; }
.jn-prose p, .jn-prose ul, .jn-prose ol { margin: 0 0 1.1em; }
.jn-prose ul, .jn-prose ol { padding-left: 1.3em; }
.jn-prose a { color: var(--jn-teal); font-weight: 700; }
.jn-prose a:hover { text-decoration: underline; }
.jn-prose blockquote {
  border-left: 3px solid var(--jn-teal-light);
  margin: 1.6em 0;
  padding: 4px 0 4px 20px;
  color: var(--jn-body);
}
.jn-prose table { width: 100%; border-collapse: collapse; margin: 1.4em 0; }
.jn-prose th, .jn-prose td { border: 1px solid var(--jn-border); padding: 10px 12px; text-align: left; }
.jn-prose__media { margin: 0 0 28px; border-radius: var(--jn-radius-panel); overflow: hidden; }

/* ---------------------------------------------------------------- blog ---- */

.jn-blog {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  padding-bottom: 70px;
}
@media (min-width: 960px) {
  .jn-blog:has(.jn-blog-side) { grid-template-columns: minmax(0, 1fr) 300px; }
}
.jn-blog-list { display: grid; gap: 22px; }

.jn-card-post {
  display: grid;
  gap: 0;
  background: #fff;
  border: 2px solid var(--jn-border);
  border-radius: var(--jn-radius-card);
  overflow: hidden;
  transition: box-shadow var(--jn-ease), transform var(--jn-ease);
}
.jn-card-post:hover { box-shadow: var(--jn-shadow-card); transform: translateY(-2px); }
@media (min-width: 700px) {
  .jn-card-post:has(.jn-card-post__media) { grid-template-columns: 260px minmax(0, 1fr); }
}
.jn-card-post__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jn-card-post__body { padding: 26px; }
.jn-card-post__meta {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--jn-muted);
}
.jn-card-post__title {
  font-family: var(--jn-font-heading);
  font-size: 21px;
  font-weight: 700;
  margin: 8px 0 10px;
  line-height: 1.3;
}
.jn-card-post__title a:hover { color: var(--jn-teal); }
.jn-card-post__excerpt { color: var(--jn-body-2); font-size: 15px; line-height: 1.6; margin: 0 0 16px; }

.jn-btn {
  display: inline-block;
  font-weight: 800;
  border-radius: var(--jn-pill);
  padding: 11px 24px;
  font-size: 14px;
}
.jn-btn--ghost { background: var(--jn-tint-hover); color: var(--jn-ink); }
.jn-btn--ghost:hover { background: var(--jn-tint-chip); }

.jn-results { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 16px; }
.jn-results li { border-bottom: 1px solid var(--jn-border); padding-bottom: 16px; }
.jn-results a { font-family: var(--jn-font-heading); font-weight: 700; font-size: 18px; color: var(--jn-ink); }
.jn-results a:hover { color: var(--jn-teal); }
.jn-results p { margin: 6px 0 0; font-size: 15px; }

.jn-pagination { margin-top: 34px; }
.jn-pagination .page-numbers {
  display: inline-block;
  padding: 9px 15px;
  border-radius: var(--jn-radius-btn);
  border: 1px solid var(--jn-border);
  margin-right: 6px;
  font-weight: 700;
  font-size: 14px;
}
.jn-pagination .page-numbers.current,
.jn-pagination .page-numbers:hover { background: var(--jn-teal); color: #fff; border-color: var(--jn-teal); }

.jn-widget { margin-bottom: 30px; }
.jn-widget-title { font-family: var(--jn-font-heading); font-size: 16px; margin: 0 0 12px; }
.jn-widget ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 15px; }

/* --------------------------------------------------------------- forms ---- */

.jn-prose input[type="text"],
.jn-prose input[type="email"],
.jn-prose input[type="search"],
.jn-prose input[type="url"],
.jn-prose textarea,
.search-form input[type="search"] {
  width: 100%;
  border: 2px solid var(--jn-border);
  border-radius: var(--jn-radius-btn);
  padding: 13px 16px;
  font: inherit;
  font-size: 15px;
  outline: none;
  background: #fff;
}
.jn-prose input:focus, .jn-prose textarea:focus, .search-form input:focus { border-color: var(--jn-teal-light); }
.search-form { display: flex; gap: 10px; }
.search-form label { flex: 1; }
.search-form input[type="submit"],
.jn-prose input[type="submit"],
.jn-prose button[type="submit"] {
  background: var(--jn-teal);
  color: #fff;
  border: 0;
  font-weight: 800;
  padding: 13px 26px;
  border-radius: var(--jn-radius-btn);
  cursor: pointer;
}

/* ------------------------------------------------- domain search results ---- */

.jn-dom-results { display: grid; gap: 10px; }
.jn-dom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--jn-border);
  border-radius: 14px;
  padding: 14px 18px;
}
.jn-dom-row__left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.jn-dom-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.jn-dom-name { font-family: var(--jn-font-heading); font-weight: 700; font-size: 17px; }
.jn-dom-tag { font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: var(--jn-pill); }
.jn-dom-price { font-family: var(--jn-font-display); font-weight: 800; font-size: 16px; color: var(--jn-ink); }
.jn-dom-cta { white-space: nowrap; font-weight: 800; padding: 11px 22px; border-radius: var(--jn-pill); }
.is-free  .jn-dom-dot { background: var(--jn-ok-fg); }
.is-free  .jn-dom-tag { background: var(--jn-ok-bg); color: var(--jn-ok-fg); }
.is-free  .jn-dom-cta { background: var(--jn-orange); color: #fff; }
.is-taken .jn-dom-dot { background: var(--jn-no-fg); }
.is-taken .jn-dom-tag { background: var(--jn-no-bg); color: var(--jn-no-fg); }
.is-taken .jn-dom-cta { background: #eef4f5; color: var(--jn-ink); }
/* The registry did not answer. Neither green nor red, because we do not know. */
.is-unknown .jn-dom-dot { background: #b6c2c7; }
.is-unknown .jn-dom-tag { background: #eef2f4; color: var(--jn-muted); }
.is-unknown .jn-dom-cta { background: #eef4f5; color: var(--jn-ink); }
.jn-dom-note { color: var(--jn-muted); font-size: 13.5px; padding: 6px 2px; }

/* --------------------------------------------------------- WHOIS card ---- */

/* The design shipped one status pill, in the red of a registered domain.
   The other two answers need their own colour. */
.jn-whois-pill--free { background: var(--jn-ok-bg); color: var(--jn-ok-fg); }
.jn-whois-pill--unknown { background: #eef2f4; color: var(--jn-muted); }

/* Nameservers read as a list, not a paragraph. */
.jn-u830 { white-space: pre-line; }

/* ----------------------------------------------------------- chat bubble ---- */

/* The designer's launcher, kept, now driving the comms widget. It ships hidden
   and the script reveals it once the widget has actually mounted — a bubble
   that opens nothing is worse than no bubble. */
.jn-chat-launcher[hidden] { display: none !important; }

.jn-chat-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--jn-pill);
  background: var(--jn-orange);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 20px;
  text-align: center;
}
.jn-chat-badge[hidden] { display: none; }

/* The pulse is an invitation, and it has said its piece by the time the panel
   is open. */
.jn-chat-launcher[aria-expanded="true"] { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .jn-chat-launcher { animation: none; }
}

/* --------------------------------------------------------- header state ---- */

.jn-site-header { position: relative; z-index: 500; }
.jn-mobile-open { overflow: hidden; }

/* The prototype opens mega panels on hover. Keyboard users get the same panel
   when the trigger, or anything inside it, has focus. */
.jn-nav-item:focus-within .jn-panel { display: block; }

/* ----------------------------------------------------------- print/motion -- */

@media print {
  .jn-site-header, .jn-site-footer, .jn-skip { display: none !important; }
  body { color: #000; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------ admin bar ---- */

body.admin-bar .jn-site-header > div[style*="sticky"] { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .jn-site-header > div[style*="sticky"] { top: 46px; }
}

/* --------------------------------------------------------------- mobile ---- */

@media (max-width: 760px) {
  :root { --jn-gutter: 20px; }
  .jn-generic-hero { padding: 44px 0 36px; }
}

/* --------------------------------------------- portal TLD pricing widget ---- */

/* The widget injects its own light stylesheet at runtime, so it lands after
   this file in the cascade. These rules are scoped to the mount id to win on
   specificity rather than !important, which is also what stops its
   prefers-color-scheme block from flipping the table dark inside a light page. */

.jn-tld-pricing { margin-top: 24px; }

.jn-xtp .xtp,
.jn-xtp .xtp-table { font-family: var(--jn-font-body); color: var(--jn-ink); }

.jn-xtp .xtp-title {
  font-family: var(--jn-font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--jn-ink);
  margin: 0 0 14px;
}

.jn-xtp .xtp-controls { gap: 12px; margin-bottom: 18px; }

.jn-xtp .xtp-search,
.jn-xtp .xtp-currency {
  border: 2px solid #eadfce;
  border-radius: var(--jn-pill);
  padding: 13px 20px;
  font-size: 15px;
  background: #fff;
  color: var(--jn-ink);
  outline: none;
}
.jn-xtp .xtp-search:focus,
.jn-xtp .xtp-currency:focus { border-color: var(--jn-teal-light); }
.jn-xtp .xtp-currency { font-weight: 700; cursor: pointer; }

.jn-xtp .xtp-table {
  font-size: 15px;
  background: #fff;
  border: 2px solid var(--jn-border);
  border-radius: var(--jn-radius-panel);
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
}

.jn-xtp .xtp-th {
  font-family: var(--jn-font-heading);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--jn-muted);
  background: var(--jn-tint-soft);
  border-bottom: 1px solid var(--jn-border);
  padding: 14px 18px;
}

.jn-xtp .xtp-cell {
  border-bottom: 1px solid #eef4f5;
  padding: 14px 18px;
  color: var(--jn-body-2);
}
.jn-xtp .xtp-row:last-child .xtp-cell { border-bottom: 0; }
.jn-xtp .xtp-row:hover .xtp-cell { background: var(--jn-tint-hover); }

.jn-xtp .xtp-tld {
  font-family: var(--jn-font-heading);
  font-weight: 700;
  font-size: 16px;
  color: var(--jn-ink);
}

.jn-xtp .xtp-row--spotlight .xtp-cell { background: #fbfdfd; }
.jn-xtp .xtp-row--spotlight:hover .xtp-cell { background: var(--jn-tint-hover); }

.jn-xtp .xtp-badge {
  background: var(--jn-tint-chip);
  color: var(--jn-teal);
  border-radius: var(--jn-pill);
  padding: 3px 9px;
  font-size: 10.5px;
  font-weight: 800;
}

.jn-xtp .xtp-price {
  font-family: var(--jn-font-display);
  font-weight: 800;
  color: var(--jn-ink);
}
.jn-xtp .xtp-price--promo { color: var(--jn-orange); }
.jn-xtp .xtp-was { color: var(--jn-muted); }
.jn-xtp .xtp-sale {
  background: #fff0e5;
  color: var(--jn-orange);
  border-radius: var(--jn-pill);
  padding: 3px 9px;
  font-size: 10px;
  font-weight: 800;
}
.jn-xtp .xtp-per { color: var(--jn-muted); font-weight: 600; }
.jn-xtp .xtp-na { color: #cfdcdf; }

.jn-xtp .xtp-footer { color: var(--jn-muted); font-size: 13px; margin-top: 12px; }
.jn-xtp .xtp-loading,
.jn-xtp .xtp-empty { color: var(--jn-body-2); padding: 22px 18px; }
.jn-xtp .xtp-error { color: var(--jn-no-fg); padding: 22px 18px; }

.jn-tld-fallback { color: var(--jn-body-2); padding: 18px 0; }

/* The table has four columns and scrolls rather than squashing on a phone. */
@media (max-width: 680px) {
  .jn-tld-pricing { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .jn-xtp .xtp-table { min-width: 480px; }
  .jn-xtp .xtp-th,
  .jn-xtp .xtp-cell { padding: 12px 14px; }
}

/* The header's region picker is the single currency control on the page, so the
   widget's own dropdown is redundant. Drop this rule to show it again. */
.jn-xtp .xtp-currency { display: none; }

/* ---- the Microsoft widget's two extra axes -------------------------------- */

/* It is the TLD widget's sibling and shares the xtp- prefix, so everything
   above already applies. Only the controls it adds — a billing cycle and a
   category — and its order button need saying. */
.jn-xtp .xtp-cycle,
.jn-xtp .xtp-category {
  border: 2px solid #eadfce;
  border-radius: var(--jn-pill);
  padding: 13px 20px;
  font-size: 15px;
  font-weight: 700;
  background: #fff;
  color: var(--jn-ink);
  outline: none;
  cursor: pointer;
}
.jn-xtp .xtp-cycle:focus,
.jn-xtp .xtp-category:focus { border-color: var(--jn-teal-light); }

.jn-xtp .xtp-plan-name {
  font-family: var(--jn-font-heading);
  font-weight: 700;
  font-size: 16px;
  color: var(--jn-ink);
}
.jn-xtp .xtp-plan-note { color: var(--jn-muted); font-size: 13px; }

/* The widget ships indigo buttons; ours are the brand orange, like every other
   call to action on the site. */
.jn-xtp .xtp-btn {
  background: var(--jn-orange);
  color: #fff;
  font-weight: 800;
  border-radius: var(--jn-pill);
  padding: 10px 20px;
  font-size: 13.5px;
}
.jn-xtp .xtp-btn:hover { background: var(--jn-orange); filter: brightness(.94); }
.jn-xtp .xtp-btn--ghost {
  background: #eef4f5;
  color: var(--jn-ink);
  border: 0;
}
.jn-xtp .xtp-btn--ghost:hover { background: var(--jn-tint-chip); }

/* Plan names are long and the order column must not wrap under them. */
@media (max-width: 760px) {
  .jn-catalogue { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .jn-xtp .xtp-table { min-width: 560px; }
}

/* ---- the card layout (SSL brands) ---------------------------------------- */

/* The widget reads these rather than setting colours itself, so the cards pick
   up the brand instead of its defaults. */
.jn-xtp {
  --xtp-accent: var(--jn-orange);
  --xtp-line: var(--jn-border);
  --xtp-muted: var(--jn-muted);
  --xtp-radius: 16px;
}

.jn-xtp .xtp-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.jn-xtp .xtp-card {
  background: #fff;
  border: 2px solid var(--jn-border);
  border-radius: var(--jn-radius-card);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow var(--jn-ease), transform var(--jn-ease);
}
.jn-xtp .xtp-card:hover { box-shadow: var(--jn-shadow-card); transform: translateY(-2px); }
.jn-xtp .xtp-card-name {
  font-family: var(--jn-font-heading);
  font-weight: 700;
  font-size: 20px;
  color: var(--jn-ink);
}
.jn-xtp .xtp-card-count { color: var(--jn-muted); font-size: 13px; }
.jn-xtp .xtp-from { color: var(--jn-muted); font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.jn-xtp .xtp-card-price {
  font-family: var(--jn-font-display);
  font-weight: 800;
  font-size: 26px;
  color: var(--jn-ink);
}
/* The button sits at the bottom whatever the card above it is worth. */
.jn-xtp .xtp-card .xtp-btn { margin-top: auto; align-self: flex-start; }

.jn-tld-note {
  margin: 12px 0 0;
  font-size: 13.5px;
  color: var(--jn-muted);
}

/* ------------------------------------------------ header locale picker ---- */

/* The design gives .jn-u501 `gap:7px`, which only separates flex items — the
   prototype ran the globe, label and chevron together as one text node, so the
   chevron sat hard against the currency code. These are real elements now, so
   the gap does its job; the caret is nudged down a hair to sit on the text
   baseline rather than above it. */
.jn-locale-caret {
  font-size: 10px;
  line-height: 1;
  color: var(--jn-muted);
  transition: transform var(--jn-ease);
}
.jn-locale-trigger[aria-expanded="true"] .jn-locale-caret { transform: rotate(180deg); }
.jn-locale-trigger:hover { border-color: var(--jn-teal-light); color: var(--jn-ink); }
.jn-locale-globe { font-size: 14px; line-height: 1; }