/* Hashmark (phase 3) - First page in the mockups' look: docs/design/app-a-c-screens.html, screen "Sign in".
   Every rule starts with html[data-site] (the look; the website and the app). siteui.css has the frame and the shared tokens.
   Markup: account.js acBoot (.ld-a: .ld-split = .ld-hero on the left, .ld-side with the top row and #acPanel on the right),
   the panels, acTeamCard (.ac-row.ac-team) and acLookRows (the club buttons as .ac-row). */
@media screen {
html[data-site][data-ui="a"] .ld-a {
  --f-eyb: 700 12px/1.2 'Barlow Condensed', 'Barlow', sans-serif;
  --f-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --f-ok-bg: #e6f3e8; --f-ok: #1f6a2f; --f-bad-bg: #fbe7e2; --f-bad: #a3260f;
  background: var(--bg);
}
html[data-site][data-ui="a"][data-theme="dark"] .ld-a { --f-ok-bg: #16281a; --f-ok: #9be3a6; --f-bad-bg: #2e1914; --f-bad: #ff9c8a; }

/* ---------- the two halves ---------- */
html[data-site][data-ui="a"] .ld-a .ld-split { flex: none; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: 100vh; }

/* the left: the brand moment, the night look in both modes */
html[data-site][data-ui="a"] .ld-a .ld-hero,
html[data-site][data-ui="a"] .ld-a.ld-in .ld-hero { position: relative; display: flex; flex-direction: column; padding: 48px 56px; overflow: hidden; background: #0c0d0f; color: #f3f0e8; min-width: 0; }
html[data-site][data-ui="a"] .ld-a .ld-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 119px, rgba(255,225,77,.06) 119px 120px), radial-gradient(500px 300px at 30% 0, rgba(255,225,77,.14), transparent 70%); }
html[data-site][data-ui="a"] .ld-a .ld-hero > * { position: relative; }
html[data-site][data-ui="a"] .ld-a .ld-lg { display: flex; gap: 10px; align-items: center; }
html[data-site][data-ui="a"] .ld-a .ld-lg .ld-lm { width: 32px; height: 32px; }
html[data-site][data-ui="a"] .ld-a .ld-lg .ld-lw { height: 17px; width: auto; }
html[data-site][data-ui="a"] .ld-a .ld-hero h1 { font: 800 clamp(48px, 6vw, 88px)/.92 var(--s-hf); text-transform: uppercase; letter-spacing: 0; color: #f3f0e8; margin: auto 0 20px; max-width: 9ch; text-wrap: balance; }
html[data-site][data-ui="a"] .ld-a .ld-hero h1 span { display: block; }
html[data-site][data-ui="a"] .ld-a .ld-hero h1 em { display: block; font-style: normal; color: var(--hi); }
html[data-site][data-ui="a"] .ld-a .ld-hero p { font-size: 18px; line-height: 1.55; max-width: 28em; margin: 0; color: #f3f0e8; opacity: .75; }
html[data-site][data-ui="a"] .ld-a .ld-strip { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 36px; }
html[data-site][data-ui="a"] .ld-a .ld-strip span { border: 0; border-radius: 3px; background: rgba(127,127,127,.15); color: inherit; padding: 3px 8px; font-size: 11.5px; font-weight: 700; line-height: 1.4; white-space: nowrap; }

/* the right: the top row's buttons (the bell, Pricing, the language), then the box, centered */
html[data-site][data-ui="a"] .ld-a .ld-side { display: flex; flex-direction: column; min-width: 0; padding: 16px 24px 40px; }
html[data-site][data-ui="a"] .ld-a .ld-side .ld-top { max-width: none; margin: 0; padding: 0; min-height: 40px; gap: 8px; }
html[data-site][data-ui="a"] .ld-a .ac-toplink { font-size: 14px; font-weight: 600; color: var(--muted); }
html[data-site][data-ui="a"] .ld-a .ac-toplink:hover { color: var(--ink); }
html[data-site][data-ui="a"] .ld-a .ld-sign { width: 100%; max-width: 400px; margin: auto; padding: 32px 0 8px; gap: 12px; }

/* ---------- the box ---------- */
html[data-site][data-ui="a"] .ld-a .ld-sign h2 { font: 700 28px/1.15 'Barlow', system-ui, sans-serif; letter-spacing: -.025em; text-transform: none; margin: 0 0 -4px; color: var(--ink); overflow-wrap: anywhere; }
html[data-site][data-ui="a"] .ld-a .ld-lead { font-size: 15px; line-height: 1.5; color: var(--muted); margin: 0 0 10px; }
html[data-site][data-ui="a"] .ld-a .ld-small { font-size: 13px; color: var(--muted); }
html[data-site][data-ui="a"] .ld-a .ld-sign > button,
html[data-site][data-ui="a"] .ld-a .ld-sign .ld-new { width: 100%; }
html[data-site][data-ui="a"] .ld-a .ld-go { min-height: 48px; padding: 12px 20px; font-size: 16px; font-weight: 700; box-shadow: 0 1px 0 rgba(0,0,0,.08), inset 0 -2px 0 rgba(0,0,0,.08); }
html[data-site][data-ui="a"] .ld-a .ld-new { min-height: 40px; padding: 9px 15px; font-size: 14px; font-weight: 600; background: var(--panel); border: 1px solid var(--btn-ln, var(--line)); color: var(--ink); text-transform: none; letter-spacing: 0; }
html[data-site][data-ui="a"] .ld-a .ld-or { font-size: 13px; font-weight: 400; color: var(--muted); gap: 12px; margin: 6px 0; }
html[data-site][data-ui="a"] .ld-a .ld-or::before,
html[data-site][data-ui="a"] .ld-a .ld-or::after { border-top: 1px solid var(--line); }
/* the quiet links: plain underlined text, not buttons */
html[data-site][data-ui="a"] .ld-a .ld-sign .ac-link { width: auto; min-height: 0; padding: 2px 0; border: 0; background: none; box-shadow: none; border-radius: 0; font: inherit; font-size: 13px; font-weight: 400; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; text-align: left; align-self: flex-start; }
html[data-site][data-ui="a"] .ld-a .ld-sign .ac-link:hover { color: var(--ink); }
html[data-site][data-ui="a"] .ld-a .ld-sign .ld-small .ac-link { display: inline; padding: 0; }
html[data-site][data-ui="a"] .ld-a .ld-sign > .ac-link#acToPlans { margin-top: 10px; }
@media (pointer: coarse) { html[data-site][data-ui="a"] .ld-a .ld-sign .ac-link { min-height: 32px; } html[data-site][data-ui="a"] .ld-a .ld-sign .ld-small .ac-link { min-height: 0; padding: 6px 0; } }

/* eyebrows: On this device, Club, Open to, Ownership offer */
html[data-site][data-ui="a"] .ld-a .ld-k { font: var(--f-eyb); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
html[data-site][data-ui="a"] .ld-a .ld-k.ac-eyb { margin: 18px 0 -2px; }

/* ---------- list rows: the team, the clubs, the team on this device ---------- */
html[data-site][data-ui="a"] .ld-a .ac-row { display: flex; gap: 12px; align-items: center; width: 100%; min-height: 0; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--rs, 6px); background: var(--panel); box-shadow: none; color: var(--ink); font: 400 14px/1.3 'Barlow', system-ui, sans-serif; text-align: left; text-transform: none; letter-spacing: 0; }
html[data-site][data-ui="a"] .ld-a button.ac-row { cursor: pointer; }
html[data-site][data-ui="a"] .ld-a button.ac-row:hover { border-color: var(--muted); }
html[data-site][data-ui="a"] .ld-a button.ac-row::after { content: ""; flex: none; width: 16px; height: 16px; margin-left: auto; background: var(--muted); -webkit-mask: var(--f-arrow) center / contain no-repeat; mask: var(--f-arrow) center / contain no-repeat; }
html[data-site][data-ui="a"] .ld-a .ac-rt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
html[data-site][data-ui="a"] .ld-a .ac-rt b { display: block; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
html[data-site][data-ui="a"] .ld-a .ac-rt small { display: block; color: var(--muted); font-size: 12.5px; }
html[data-site][data-ui="a"] .ld-a .ac-rt small span { display: inline; color: inherit; }
html[data-site][data-ui="a"] .ld-a .ac-dot { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: currentColor; vertical-align: middle; margin: 0 6px; opacity: .7; }
html[data-site][data-ui="a"] .ld-a .ac-crest,
html[data-site][data-ui="a"] .ld-a .ld-av { width: 30px; height: 30px; flex: none; border-radius: 8px; background: var(--s-blue); color: #fff; font: 800 14px/1 var(--s-hf); display: grid; place-items: center; letter-spacing: 0; }
/* the team: a bigger row, the plan as a tag, the last save underneath */
html[data-site][data-ui="a"] .ld-a .ac-team { padding: 14px; gap: 14px; align-items: flex-start; margin-top: 6px; }
html[data-site][data-ui="a"] .ld-a .ac-team .ld-av { width: 44px; height: 44px; border-radius: 10px; font-size: 18px; background: #7a1f1f; }
html[data-site][data-ui="a"] .ld-a .ac-team .ac-rt b { font-size: 17px; font-weight: 700; }
html[data-site][data-ui="a"] .ld-a .ac-team .ac-rt small { font-size: 13px; margin-top: 2px; }
html[data-site][data-ui="a"] .ld-a .ac-team .ac-rt > .ld-small { display: block; font-size: 12.5px; margin-top: 2px; }
html[data-site][data-ui="a"] .ld-a .ac-badge { align-self: flex-start; border: 0; border-radius: 3px; margin: 8px 0 0; padding: 3px 8px; font-size: 11.5px; font-weight: 700; line-height: 1.4; background: var(--soft-2); color: var(--muted); }
html[data-site][data-ui="a"] .ld-a .ac-badge.paid { background: var(--f-ok-bg); color: var(--f-ok); }
html[data-site][data-ui="a"] .ld-a .ac-badge.ended { background: var(--f-bad-bg); color: var(--f-bad); }

/* Open to: a segmented control, the pick is ink with yellow text */
html[data-site][data-ui="a"] .ld-a .ld-pick { display: flex; flex-wrap: wrap; gap: 3px; padding: 3px; background: var(--soft); border: 1px solid var(--line); border-radius: 13px; }
html[data-site][data-ui="a"] .ld-a .ld-pick label { flex: 1 1 auto; text-align: center; border: 0; border-radius: var(--rb, 10px); background: transparent; padding: 8px 10px; font-size: 13.5px; font-weight: 600; color: var(--muted); box-shadow: none; white-space: nowrap; }
html[data-site][data-ui="a"] .ld-a .ld-pick label:hover { color: var(--ink); }
html[data-site][data-ui="a"] .ld-a .ld-pick label:has(input:checked) { background: var(--ink-bg, #141414); color: var(--hi); }
html[data-site][data-ui="a"] .ld-a .ld-sign > div:has(> .ld-pick) { margin-top: 6px; }

/* Name your team: the team type (teamtype.js ttPickHtml) as two segmented controls, like Open to */
html[data-site][data-ui="a"] .ld-a .ac-type { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
html[data-site][data-ui="a"] .ld-a .ac-type > label { font: var(--f-eyb); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 6px 0 0; }
html[data-site][data-ui="a"] .ld-a .ac-type .su-pick { display: flex; flex-wrap: wrap; gap: 3px; padding: 3px; background: var(--soft); border: 1px solid var(--line); border-radius: 13px; }
html[data-site][data-ui="a"] .ld-a .ac-type .su-pick label { flex: 1 1 auto; align-items: center; border: 0; border-radius: var(--rb, 10px); background: transparent; box-shadow: none; padding: 8px 10px; color: var(--muted); }
html[data-site][data-ui="a"] .ld-a .ac-type .su-pick label b { font-size: 13.5px; font-weight: 600; color: inherit; white-space: nowrap; }
html[data-site][data-ui="a"] .ld-a .ac-type .su-pick label:hover { color: var(--ink); }
html[data-site][data-ui="a"] .ld-a .ac-type .su-pick label:has(input:checked) { background: var(--ink-bg, #141414); color: var(--hi); box-shadow: none; }
html[data-site][data-ui="a"] .ld-a .ac-check { font-size: 13.5px; }

/* notes and offers */
html[data-site][data-ui="a"] .ld-a .ac-note { border: 1px solid var(--line); border-radius: var(--rs, 6px); background: var(--soft); padding: 10px 12px; font-size: 13.5px; color: var(--ink); }
html[data-site][data-ui="a"] .ld-a .ac-offer { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--ink); border-radius: var(--rs, 6px); padding: 14px; gap: 6px; }
html[data-site][data-ui="a"] .ld-a .ac-offer b { font-size: 17px; }
html[data-site][data-ui="a"] .ld-a .ac-offer-b button { background: var(--btn-bg, var(--panel)); color: var(--ink); }
html[data-site][data-ui="a"] .ld-a .ac-offer-b button.primary { background: var(--hi); color: #141414; }
html[data-site][data-ui="a"] .ld-a .ac-off-k { font: var(--f-eyb); letter-spacing: .1em; }
html[data-site][data-ui="a"] .ld-a .ld-sign label[for="acTeam"] { font: var(--f-eyb); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* signed in: the same two halves (acCss hides the brand otherwise); the plans stay hidden as before */
html[data-site][data-ui="a"] .ld-a.ld-in .ld-sign { padding-top: 24px; }

/* ---------- below: the plans and the footer ---------- */
html[data-site][data-ui="a"] .ld-a .ac-prices { padding-top: 56px; }
html[data-site][data-ui="a"] .ld-a .ld-foot { border-top: 1px solid var(--line); }
html[data-site][data-ui="a"] .ld-a .ld-foot a, html[data-site][data-ui="a"] .ld-a .ld-foot button { color: var(--muted); font-weight: 500; }
html[data-site][data-ui="a"] .ld-a .ld-foot a:hover, html[data-site][data-ui="a"] .ld-a .ld-foot button:hover { color: var(--ink); }

/* ---------- iPad portrait and phones: the brand on top, short, the box right under it ---------- */
@media (max-width: 900px) {
  html[data-site][data-ui="a"] .ld-a .ld-split { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  html[data-site][data-ui="a"] .ld-a .ld-hero, html[data-site][data-ui="a"] .ld-a.ld-in .ld-hero { padding: 28px 32px 32px; min-height: 0; }
  html[data-site][data-ui="a"] .ld-a .ld-hero h1 { font-size: clamp(44px, 9vw, 72px); margin: 48px 0 16px; max-width: none; }
  html[data-site][data-ui="a"] .ld-a .ld-strip { margin-top: 24px; }
  html[data-site][data-ui="a"] .ld-a .ld-side { padding: 12px 24px 32px; }
  html[data-site][data-ui="a"] .ld-a .ld-sign { margin: 0 auto; padding-top: 16px; }
  /* the top row's buttons sit on the brand, level with the mark */
  html[data-site][data-ui="a"] .ld-a { position: relative; }
  html[data-site][data-ui="a"] .ld-a .ld-side .ld-top { position: absolute; top: 24px; right: 24px; min-height: 40px; }
  html[data-site][data-ui="a"] .ld-a .ld-side .ac-toplink { color: #c9c5bb; }
  html[data-site][data-ui="a"] .ld-a .ld-side .ac-toplink:hover { color: #f3f0e8; }
  html[data-site][data-ui="a"] .ld-a .ld-side .ld-top :is(.nt-bell, .lang-btn) { background: rgba(255,255,255,.06); border-color: #34342f; color: #f3f0e8; box-shadow: none; }
}
@media (max-width: 560px) {
  html[data-site][data-ui="a"] .ld-a .ld-hero, html[data-site][data-ui="a"] .ld-a.ld-in .ld-hero { padding: 18px 16px 20px; }
  html[data-site][data-ui="a"] .ld-a .ld-hero h1 { font-size: 40px; margin: 22px 0 10px; }
  html[data-site][data-ui="a"] .ld-a .ld-hero p { font-size: 15px; }
  html[data-site][data-ui="a"] .ld-a .ld-strip { margin-top: 14px; gap: 6px; }
  /* signed in, a phone goes for the team: the brand is just the mark, the headline */
  html[data-site][data-ui="a"] .ld-a.ld-in .ld-hero p, html[data-site][data-ui="a"] .ld-a.ld-in .ld-strip { display: none; }
  html[data-site][data-ui="a"] .ld-a.ld-in .ld-hero h1 { font-size: 32px; margin: 14px 0 0; }
  html[data-site][data-ui="a"] .ld-a.ld-in .ld-hero h1 span, html[data-site][data-ui="a"] .ld-a.ld-in .ld-hero h1 em { display: inline; }
  html[data-site][data-ui="a"] .ld-a .ld-side { padding: 8px 16px 28px; }
  html[data-site][data-ui="a"] .ld-a .ld-side .ld-top { top: 14px; right: 12px; }
  html[data-site][data-ui="a"] .ld-a .ld-sign { padding-top: 8px; }
  html[data-site][data-ui="a"] .ld-a .ld-sign h2 { font-size: 24px; }
  html[data-site][data-ui="a"] .ld-a .ld-pick label { flex: 1 1 calc(50% - 3px); }
}
}