/*
 * The public website. The page is one working day: a column of times down the side, features as
 * appointments in it, and the agenda's line of the current time following the reader.
 */

@font-face {
    font-family: "Schibsted Grotesk";
    src: url("/r/fonts/schibsted-grotesk-latin-wght-normal.woff2") format("woff2-variations"), url("/r/fonts/schibsted-grotesk-latin-wght-normal.woff2") format("woff2");
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
}

.lp {
    --ink: #1c1946;
    --ink-soft: #4a4770;
    --paper: #f6f6fc;
    --hour-line: #dddcef;
    --brand: #4338ca;
    --brand-dark: #2f2796;
    --now: #d4265a;
    --customer: #0b7a75;
    --customer-tint: #d9f2ee;
    --team: #a85f00;
    --team-tint: #fbeccf;
    --you: #4338ca;
    --you-tint: #e5e4fd;
    --gutter: 96px;
    --page: 1240px;

    background: var(--paper);
    color: var(--ink);
    font-family: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.5;
}

.lp a:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.lp h1, .lp h2, .lp p, .lp ul, .lp ol, .lp dl, .lp dd { margin: 0; padding: 0; }
.lp ul, .lp ol { list-style: none; }
/* This font's tabular figures also widen commas and periods, so only use them where digits line up */
.lp-time, .lp-today time, .lp-now span, .fr-table td { font-variant-numeric: tabular-nums; }

/* Navigation */
.lp-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: var(--page); margin: 0 auto; padding: 20px 24px; }
.lp-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-size: 20px; font-weight: 700; text-decoration: none; }
.lp-brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: var(--brand); color: #fff; font-size: 15px; }
.lp-nav-links { display: flex; align-items: center; gap: 18px; }
.lp-link { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--hour-line); text-underline-offset: 4px; text-decoration-thickness: 2px; }
.lp-link:hover { color: var(--brand); text-decoration-color: var(--brand); }
.lp-link-large { font-size: 18px; }
.lp-button { display: inline-block; padding: 9px 16px; border-radius: 8px; background: var(--brand); color: #fff !important; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background 0.15s; }
.lp-button:hover { background: var(--brand-dark); }
.lp-button-large { padding: 14px 24px; font-size: 18px; }
.lp-button-light { background: #fff; color: var(--brand-dark) !important; }
.lp-button-light:hover { background: var(--you-tint); }

/* Opening */
.lp-hero { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; align-items: end; max-width: var(--page); margin: 0 auto; padding: 48px 24px 72px; }
.lp-trades { max-width: 1080px; margin: 0 auto; padding: 0 24px 72px; text-align: center; }
.lp-trades h2 { font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -0.02em; font-weight: 700; margin: 0 0 22px; }
.lp-trade-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.lp-trade { display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px 11px 11px; border-radius: 999px; background: #fff; border: 1px solid var(--hour-line); color: var(--ink); font-weight: 600; text-decoration: none; transition: transform 0.2s, box-shadow 0.2s; }
.lp-trade i { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; font-size: 13px; background: linear-gradient(135deg, var(--t1), var(--t2)); }
.lp-trade:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -16px rgba(28, 25, 70, 0.45); }
.lp-trade:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.lp-film { max-width: 1080px; margin: 0 auto; padding: 0 24px 72px; text-align: center; }
.lp-film h2 { font-size: clamp(28px, 3.6vw, 44px); letter-spacing: -0.025em; line-height: 1.1; font-weight: 700; margin: 0 0 12px; }
.lp-film > p { max-width: 62ch; margin: 0 auto 28px; font-size: 18px; color: var(--ink-soft); }
.lp-film .sv-caption { text-align: left; }
.lp-hero h1 { font-size: clamp(42px, 6.4vw, 84px); line-height: 1.02; letter-spacing: -0.035em; font-weight: 700; max-width: 16ch; text-wrap: balance; }
.lp-lead { margin-top: 26px !important; max-width: 56ch; font-size: 20px; line-height: 1.45; color: var(--ink-soft); }
.lp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 32px; }

.lp-today { background: #fff; border: 1px solid var(--hour-line); border-radius: 12px; padding: 18px 8px 8px; }
.lp-today h2 { padding: 0 12px 10px; font-size: 16px; font-weight: 700; letter-spacing: 0; }
.lp-today a { display: flex; gap: 12px; padding: 7px 12px; border-radius: 7px; color: var(--ink); font-size: 15px; line-height: 1.3; text-decoration: none; }
.lp-today a:hover { background: var(--paper); color: var(--brand); }
.lp-today time { flex: none; color: var(--ink-soft); font-size: 14px; line-height: 1.4; }

/* The day */
.lp-day { position: relative; max-width: var(--page); margin: 0 auto; padding: 0 24px 40px; }
.lp-now-track { position: absolute; top: 0; bottom: 0; left: 24px; right: 24px; pointer-events: none; }
.lp-now { position: sticky; top: 44vh; display: flex; align-items: center; height: 0; z-index: 1; }
.lp-now::after { content: ""; flex: 1; height: 2px; background: var(--now); }
.lp-now span { flex: none; padding: 2px 8px; border-radius: 6px; background: var(--now); color: #fff; font-size: 14px; font-weight: 600; line-height: 1.4; }

.lp-slot { position: relative; display: grid; grid-template-columns: var(--gutter) minmax(0, 1fr); padding: 14px 0 34px; border-top: 1px solid var(--hour-line); scroll-margin-top: 16px; }
.lp-time { padding-top: 2px; color: var(--ink-soft); font-size: 15px; font-weight: 500; }

/* An appointment, as in the agenda: a tinted block with a strong edge. The colour says who it is for. */
.lp-block { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 40px; align-items: center; padding: 34px 36px; border-left: 6px solid var(--edge); border-radius: 4px 14px 14px 4px; background: var(--tint); }
.lp-customer { --edge: var(--customer); --tint: var(--customer-tint); }
.lp-team { --edge: var(--team); --tint: var(--team-tint); }
.lp-you { --edge: var(--you); --tint: var(--you-tint); }
.lp-copy h2 { font-size: clamp(25px, 2.7vw, 34px); line-height: 1.12; letter-spacing: -0.02em; font-weight: 700; max-width: 22ch; text-wrap: balance; }
.lp-copy p { margin-top: 14px; max-width: 54ch; color: var(--ink); }
.lp-copy ul { margin-top: 16px; display: grid; gap: 6px; }
.lp-copy li { position: relative; padding-left: 20px; font-size: 16px; color: var(--ink); }
.lp-copy li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 8px; height: 8px; border-radius: 2px; background: var(--edge); }

/* Pieces of the application, drawn small */
.lp-frag { background: #fff; border-radius: 10px; padding: 18px; font-size: 14px; line-height: 1.35; color: var(--ink); box-shadow: 0 1px 0 rgba(28, 25, 70, 0.08), 0 14px 30px -18px rgba(28, 25, 70, 0.45); }
.fr-title { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; font-size: 16px; font-weight: 700; }
.fr-title span { font-size: 13px; font-weight: 400; color: var(--ink-soft); }
.fr-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid #ecebf6; }
.fr-row strong { display: block; font-weight: 600; }
.fr-row span { color: var(--ink-soft); font-size: 13px; }
.fr-buttons { display: flex; gap: 5px; flex: none; }
.fr-btn { padding: 4px 8px; border: 1px solid #d5d4e8; border-radius: 6px; font-size: 12px; font-weight: 500; }
.fr-solid { border-color: var(--brand); background: var(--brand); color: #fff; }

.fr-days { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 12px; }
.fr-days span { padding: 6px 0; border: 1px solid #e3e2f2; border-radius: 8px; text-align: center; font-size: 12px; color: var(--ink-soft); }
.fr-days b { display: block; font-size: 16px; font-weight: 600; color: var(--ink); }
.fr-days .is-on { border-color: var(--customer); background: var(--customer-tint); }
.fr-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.fr-slots span { padding: 7px 0; border: 1px solid #e3e2f2; border-radius: 8px; text-align: center; font-weight: 500; }
.fr-slots .is-on { border-color: var(--customer); background: var(--customer); color: #fff; }
.fr-summary { margin-top: 12px; padding-top: 12px; border-top: 1px solid #ecebf6; color: var(--ink-soft); }
.fr-summary strong { color: var(--ink); font-weight: 600; }

.fr-agenda { padding: 14px; }
.fr-agenda-head, .fr-agenda-grid { display: grid; grid-template-columns: 42px 1fr 1fr; gap: 4px; }
.fr-agenda-head { margin-bottom: 6px; font-size: 13px; font-weight: 600; }
.fr-agenda-grid { height: 210px; }
.fr-hours { display: flex; flex-direction: column; justify-content: space-between; font-size: 11px; color: var(--ink-soft); }
.fr-col { position: relative; border-radius: 6px; background: repeating-linear-gradient(to bottom, #f4f4fb 0, #f4f4fb 34px, #e9e8f5 34px, #e9e8f5 35px); }
.fr-event { position: absolute; left: 3px; right: 3px; padding: 4px 6px; border-radius: 5px; overflow: hidden; font-size: 12px; font-style: normal; font-weight: 600; line-height: 1.25; }
.fr-event small { display: block; font-size: 11px; font-weight: 400; }
.fr-a { background: var(--customer-tint); border-left: 3px solid var(--customer); }
.fr-b { background: #eeedf6; color: var(--ink-soft); }
.fr-c { background: var(--you-tint); border-left: 3px solid var(--you); }
.fr-moving { background: #fff; border: 2px dashed var(--customer); box-shadow: 0 8px 16px -8px rgba(28, 25, 70, 0.5); transform: rotate(-1.2deg); }

.fr-phone { max-width: 330px; justify-self: center; width: 100%; }
.fr-push { margin-bottom: 12px; padding: 11px 12px; border-radius: 10px; background: var(--ink); color: #fff; }
.fr-push strong { display: block; font-weight: 600; }
.fr-push span { font-size: 13px; opacity: 0.85; }
.fr-shift { display: flex; justify-content: space-between; padding: 8px 2px; border-top: 1px solid #ecebf6; }
.fr-shift span { color: var(--ink-soft); }
.fr-shift b { font-weight: 600; }

.fr-roster-row { display: grid; grid-template-columns: 58px repeat(5, 1fr) 38px; gap: 5px; align-items: center; margin-bottom: 5px; }
.fr-roster-row > span:last-child { text-align: right; font-weight: 600; }
.fr-roster-row > span:first-child { font-weight: 500; }
.fr-roster-head { color: var(--ink-soft); font-size: 12px; text-align: center; }
.fr-roster-head > span:last-child, .fr-roster-head > span { font-weight: 400; }
.fr-roster i, .fr-roster-key i { display: block; height: 32px; border-radius: 5px; background: #f1f0f9; }
.fr-roster .on { background: var(--team); }
.fr-roster .leave { background: repeating-linear-gradient(135deg, var(--team-tint) 0, var(--team-tint) 4px, #f2cf8d 4px, #f2cf8d 8px); }
.fr-roster-key { display: flex; gap: 16px; margin-top: 10px; font-size: 12px; color: var(--ink-soft); }
.fr-roster-key span { display: inline-flex; align-items: center; gap: 6px; }
.fr-roster-key i { display: inline-block; width: 14px; height: 14px; border-radius: 3px; }

.fr-note { margin-bottom: 8px; padding: 9px 11px; border-radius: 8px; background: var(--paper); color: var(--ink-soft); }
.fr-history { display: grid; grid-template-columns: 52px 1fr auto; gap: 8px; padding: 8px 0; border-top: 1px solid #ecebf6; }
.fr-history span { color: var(--ink-soft); }
.fr-history b { font-weight: 500; }
.fr-history em { font-style: normal; font-size: 13px; color: var(--now); }
.fr-history em.ok { color: var(--customer); }

.fr-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fr-table th { padding: 6px 0; color: var(--ink-soft); font-weight: 500; text-align: right; }
.fr-table td { padding: 8px 0 8px 8px; border-top: 1px solid #ecebf6; text-align: right; white-space: nowrap; }
.fr-table th:first-child, .fr-table td:first-child { padding-left: 0; text-align: left; }
.fr-table tfoot td { border-top: 2px solid var(--ink); font-weight: 700; }

/* The rest of what's in there */
.lp-more { position: relative; z-index: 2; padding: 6px 0 30px; background: var(--paper); }
.lp-more h2 { font-size: clamp(25px, 2.7vw, 34px); line-height: 1.12; letter-spacing: -0.02em; font-weight: 700; }
.lp-more dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 36px; margin-top: 26px; }
.lp-more dt { font-weight: 700; }
.lp-more dd { margin-top: 2px; color: var(--ink-soft); font-size: 16px; }

/* Prices: one scale from small to large, because the number of people is all that differs */
.lp-prices { max-width: var(--page); margin: 0 auto; padding: 56px 24px 72px; scroll-margin-top: 16px; }
.lp-prices-head h2 { font-size: clamp(30px, 4vw, 48px); line-height: 1.06; letter-spacing: -0.028em; font-weight: 700; max-width: 22ch; text-wrap: balance; }
.lp-prices-head p { margin-top: 14px; max-width: 54ch; font-size: 19px; color: var(--ink-soft); }
.lp-price-scale { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 36px; border-top: 3px solid var(--ink); }
.lp-price { display: flex; flex-direction: column; align-items: flex-start; padding: 22px 24px 4px; border-left: 1px solid var(--hour-line); }
.lp-price:first-child { padding-left: 0; border-left: 0; }
.lp-price h3 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.lp-price p { margin: 0; }
.lp-price-people { color: var(--ink-soft); }
.lp-price-amount { margin-top: 22px !important; font-size: clamp(34px, 3.4vw, 44px); line-height: 1.05; font-weight: 700; letter-spacing: -0.025em; white-space: nowrap; }
.lp-price-ask { color: var(--ink-soft); font-weight: 600; }
.lp-price-input { width: 100%; max-width: 160px; margin-top: 8px; padding: 8px 12px; font: inherit; border: 1px solid var(--line, #d0d5dd); border-radius: 10px; }
.lp-price-note { margin-top: 12px; color: var(--ink-soft); }
.lp-price-term { margin-bottom: 22px !important; font-size: 15px; color: var(--ink-soft); }
.lp-price .lp-button { margin-top: auto; }
.lp-button-outline { background: transparent; border: 2px solid var(--brand); padding: 7px 14px; color: var(--brand) !important; }
.lp-button-outline:hover { background: var(--brand); color: #fff !important; }

/* Several locations */
.lp-chain { max-width: var(--page); margin: 0 auto; padding: 56px 24px 16px; scroll-margin-top: 16px; }
.lp-chain-head h2 { font-size: clamp(30px, 4vw, 48px); line-height: 1.06; letter-spacing: -0.028em; font-weight: 700; max-width: 22ch; text-wrap: balance; }
.lp-chain-head p { margin-top: 14px; max-width: 54ch; font-size: 19px; color: var(--ink-soft); }
.lp-chain-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; margin-top: 36px; align-items: start; }
.lp-chain-table { margin: 0; padding: 20px 22px; background: #fff; border: 1px solid var(--hour-line); border-radius: 12px; }
.lp-chain-table figcaption { margin-bottom: 10px; font-size: 14px; color: var(--ink-soft); }
.lp-chain-table table { width: 100%; border-collapse: collapse; font-size: 16px; font-variant-numeric: tabular-nums; }
.lp-chain-table th, .lp-chain-table td { padding: 9px 8px; text-align: right; border-bottom: 1px solid var(--hour-line); white-space: nowrap; }
.lp-chain-table th:first-child { padding-left: 0; text-align: left; }
.lp-chain-table td:last-child, .lp-chain-table th:last-child { padding-right: 0; }
.lp-chain-table thead th { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.lp-chain-table tbody th { font-weight: 600; }
.lp-chain-table tfoot th, .lp-chain-table tfoot td { font-weight: 700; border-bottom: 0; }
.lp-chain-table .is-flagged td:last-child { color: #b42318; font-weight: 700; }
.lp-chain-table .lp-chain-flag { margin: 14px 0 0; padding: 10px 12px; background: #fef3f2; color: #b42318; border-radius: 8px; font-size: 15px; }
.lp-chain-points { display: grid; gap: 20px; margin: 0; }
.lp-chain-points dt { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.lp-chain-points dd { margin: 3px 0 0; color: var(--ink-soft); }
@media (max-width: 860px) {
    .lp-chain-grid { grid-template-columns: minmax(0, 1fr); }
    .lp-chain-table { padding: 16px 12px; }
    .lp-chain-table table { font-size: 14px; }
    .lp-chain-table th, .lp-chain-table td { padding: 8px 4px; }
    .lp-chain-table thead th { font-size: 12px; white-space: normal; vertical-align: bottom; }
}

/* Closing */
.lp-close { background: var(--brand-dark); color: #fff; padding: 72px 0; }
.lp-close-inner { max-width: var(--page); margin: 0 auto; padding: 0 24px; }
.lp-close h2 { font-size: clamp(32px, 4.6vw, 58px); line-height: 1.05; letter-spacing: -0.03em; font-weight: 700; max-width: 18ch; }
.lp-close p { max-width: 54ch; margin: 18px 0 28px; font-size: 19px; color: #e4e3ff; }

/* Help: the most read topics, and the way to all of them */
.lp-help { max-width: var(--page); margin: 0 auto; padding: 56px 24px 40px; scroll-margin-top: 16px; }
.lp .lp-help-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 30px; }
.lp-help-list a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 18px 20px; background: #fff; border: 1px solid var(--hour-line); border-radius: 12px; color: var(--ink); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.lp-help-list a:hover { border-color: var(--brand); box-shadow: 0 6px 18px rgba(67, 56, 202, .10); }
.lp-help-list strong { font-size: 18px; font-weight: 650; }
.lp-help-list span { font-size: 15px; color: var(--ink-soft); }
.lp .lp-help-all { margin-top: 22px; }
.lp-faq { max-width: var(--page); margin: 0 auto; padding: 24px 24px 64px; scroll-margin-top: 16px; }
.lp .lp-faq-list { margin-top: 26px; border-top: 1px solid var(--hour-line); max-width: 860px; }
.lp-faq-item { border-bottom: 1px solid var(--hour-line); }
.lp-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 2px; cursor: pointer; list-style: none; }
.lp-faq-item summary::-webkit-details-marker { display: none; }
.lp-faq-item summary::after { content: "+"; flex: none; font-size: 24px; line-height: 1; color: var(--brand); }
.lp-faq-item[open] summary::after { content: "\2212"; }
.lp .lp-faq-item h3 { margin: 0; font-size: 19px; font-weight: 650; }
.lp .lp-faq-item p { margin: 0 0 20px; max-width: 70ch; color: var(--ink-soft); font-size: 17px; }

/* The help pages as part of the website: its header and footer around them */
.lp-site-page { min-height: 100vh; background: #f6f6fc; }
.lp.lp-site { background: transparent; }
.lp-site-page .help { padding: 0 24px; }
.lp-nav-links a[aria-current="page"] { color: var(--brand); text-decoration-color: var(--brand); }

.lp-footer { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: baseline; max-width: var(--page); margin: 0 auto; padding: 26px 24px 34px; color: var(--ink-soft); font-size: 15px; }
.lp-footer span { font-weight: 700; color: var(--ink); }
.lp-footer a { color: var(--ink-soft); }
.lp-footer p { flex-basis: 100%; }

@media (max-width: 1040px) {
    .lp-hero { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-bottom: 48px; }
    .lp-today { max-width: 460px; }
    .lp-block { grid-template-columns: minmax(0, 1fr); gap: 26px; }
    .lp-frag { max-width: 480px; }
    .fr-phone { justify-self: start; }
    .lp-more dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1040px) {
    .lp-price-scale { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-price { padding-bottom: 28px; }
    .lp-price:nth-child(odd) { padding-left: 0; border-left: 0; }
    .lp-price:nth-child(n + 3) { border-top: 1px solid var(--hour-line); }
}

@media (max-width: 640px) {
    .lp-nav-prices { display: none; }
    .lp-prices { padding: 40px 16px 48px; }
    .lp-price-scale { grid-template-columns: minmax(0, 1fr); }
    .lp-price, .lp-price:nth-child(odd) { padding: 18px 0 22px; border-left: 0; }
    .lp-price:nth-child(n + 2) { border-top: 1px solid var(--hour-line); }
    .lp { --gutter: 50px; font-size: 16px; }
    .lp-nav { padding: 14px 16px; }
    .lp-nav-links { gap: 12px; }
    .lp-hero { padding: 24px 16px 40px; }
    .lp-lead { font-size: 18px; }
    .lp-day { padding: 0 16px 24px; }
    .lp-now-track { left: 16px; right: 16px; }
    .lp-now span { padding: 1px 5px; font-size: 12px; }
    .lp-time { font-size: 13px; }
    .lp-slot { padding-bottom: 22px; }
    .lp-block { padding: 22px 16px 20px; border-left-width: 4px; }
    .lp-frag { padding: 14px; }
    .lp-more dl { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .lp-close { padding: 48px 0; }
    .lp-close-inner { padding: 0 16px; }
    .lp-footer { padding: 20px 16px 28px; }
    .fr-table { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .lp-button { transition: none; }
}
@media (max-width: 900px) {
    .lp .lp-help-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .lp .lp-help-list { grid-template-columns: minmax(0, 1fr); }
}
/* On a phone there is no room for it next to logging in: it stays in the footer and the crumbs */
@media (max-width: 560px) {
    .lp-nav-help { display: none; }
}
/* Phones: logo, logging in and the button side by side, the button with a shorter label */
/* The text is always the full one; only on a phone does the stylesheet show the short one instead, so
   without styles (or with an old copy of them) there is never both */
@media (max-width: 440px) {
    .lp-nav-links { gap: 12px; }
    .lp-nav .lp-button { padding: 8px 12px; }
    .lp-brand { gap: 8px; font-size: 18px; }
    .lp-nav .lp-button-shortens { font-size: 0; }
    .lp-nav .lp-button-shortens::after { content: attr(data-short); font-size: 16px; }
}
/* The smallest phones: the logo without its name, which the logo's label still gives, and the
   examples of the back office smaller, so nothing makes the page wider than the screen */
@media (max-width: 350px) {
    .lp-nav { gap: 8px; }
    .lp-nav .lp-brand-name { display: none; }
    .lp-frag { padding: 12px; overflow-x: auto; }
    .fr-row { flex-wrap: wrap; }
    .fr-table { font-size: 11px; }
    .fr-table td { padding-left: 4px; }
}