/* THE LEAD SIGN-IN PAGES (PRD-285 S17) on report.typeamedia.net. The pixel truth
   is Ross's approved frames in section 825:42773 on page "PRD-285 Free onboarding"
   of hP9WwD5Tpup3oa4fGn2EcI (desktop 1440, phone 390), made from the Step 6
   frames 688:2511 and 688:2853. Spacing is the frames' own. Type sizes are the
   sheet's: where a frame drew a size the sheet does not have (26, 22, 19, 11),
   Ross chose the nearest sheet size (24, 24, 18, 12; issue 6314, 2026-10-16). The
   controls are the sheet's Button, Field and Notice (ui-controls.css,
   ui-boxes.css). Every rule hangs off `.ld-`, so nothing here reaches another
   page. Light only, like the frames. The phone layout starts below 960px, the
   landing page's breakpoint (S2). */

.ld-body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-sans);font-size:var(--font-size-base);line-height:1.5;-webkit-font-smoothing:antialiased}
.ld-body *,.ld-body *::before,.ld-body *::after{box-sizing:border-box}
:where(.ld-body) :where(h1,p){margin:0}

/* The top bar: 20px above and below, the 1120 column, a line under it. */
.ld-top{display:flex;align-items:center;padding:20px calc((100% - min(1120px, 100% - 32px)) / 2);border-bottom:1px solid var(--color-border);background:var(--color-bg)}

/* The brand lockup (694:2677): mark, "AI visibility report" and "by Type A
   Media", 8px apart. */
.ld-brand{display:flex;align-items:center;gap:8px;color:var(--color-text);text-decoration:none}
.ld-brand-mark{width:auto;height:28px;flex:none}
.ld-brand-text{display:flex;align-items:baseline;gap:8px;white-space:nowrap}
.ld-brand-name{font-size:var(--font-size-2xl);font-weight:600;line-height:1.2;letter-spacing:-0.24px}
.ld-brand-by{font-size:var(--font-size-lg);font-weight:400;line-height:1.2;color:var(--color-muted)}

/* The body: 48 above the 640 column, 96 below; 32 between its parts. */
.ld-page{display:flex;justify-content:center;padding:48px 16px 96px}
.ld-column{display:flex;flex-direction:column;gap:32px;width:min(640px,100%)}

.ld-heading{display:flex;flex-direction:column;gap:8px}
.ld-heading h1{font-size:var(--font-size-page-title);font-weight:600;line-height:40px;letter-spacing:-0.32px}
.ld-heading p{font-size:var(--font-size-base);line-height:24px;color:var(--color-muted);overflow-wrap:anywhere}

.ld-column .ui-notice{max-width:none;overflow-wrap:anywhere}

.ld-form{display:flex;flex-direction:column;gap:32px}
/* The frames' Field is 80 tall: label, input and the line its error takes. */
.ld-form .ui-field{max-width:none;min-height:80px}
.ld-form .ui-input-regular{font-size:var(--font-size-sm)}

/* The footer: a line, 24 under it, the one button on the right. */
.ld-foot{display:flex;justify-content:flex-end;padding-top:24px;border-top:1px solid var(--color-border)}
.ld-foot .ui-button-form{margin:0}

/* The Google and Microsoft doors and the "or" line (S17 part 2; the frames'
   "Form"): 20 apart, and 20 above the email field, so the block gives back
   the column's extra 12 (8 on the phone) under it. Each door is a 48-tall
   white button with the sheet's border and radius, its 20px mark 12 from the
   15px label. */
.ld-doors{display:flex;flex-direction:column;gap:20px;margin-bottom:-12px}
.ld-door-form{margin:0}
.ld-door{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:48px;padding:0 16px;border:1px solid var(--color-border);border-radius:var(--radius-ui);background:var(--color-bg);color:var(--color-text);font:inherit;font-size:var(--font-size-card);font-weight:500;line-height:18px;cursor:pointer}
.ld-door:hover{background:var(--color-surface)}
.ld-door:focus-visible{outline:none;box-shadow:0 0 0 2px var(--color-bg),0 0 0 4px var(--color-focus)}
.ld-door-mark{display:block;width:20px;height:20px;flex:none}
.ld-or{display:flex;align-items:center;gap:12px;color:var(--color-muted);font-size:var(--font-size-sm);line-height:17px}
.ld-or::before,.ld-or::after{content:"";flex:1 1 0;height:1px;background:var(--color-border)}

/* THE LEAD'S REPORT (S7; Figma 913:4170 desktop, 913:55184 phone, drawn
   from the sheet's Count card, Section box, Table row, Tag and Notice): the
   top bar's 1120 column, 24 between its parts, the heading with Sign out at
   its right. Buyers and sites are read-only Table rows (a `div`, no link, no
   chevron); a question is a link row that opens its answers (S7 part 2), so
   its box keeps the chevron's column. A figure's own word (`.ld-cell-word`)
   is for a screen reader until the phone hides the column heads, and then
   shows. */
.ld-column.ld-wide{width:min(1120px,100%);gap:var(--space-5)}
.ld-report-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-5)}
.ld-report-head .ui-button-form{margin:0;flex:none}
.ld-wide div.ui-table-row{padding-right:var(--space-5)}
.ld-wide .ui-table-cell-state{justify-content:flex-end}
.ld-wide .ui-table-cell-number{padding-right:0}
.ld-wide .ui-section-box:not(:has(a.ui-table-row)) .ui-table-head .ui-row-open{display:none}
.ld-cell-site{gap:var(--space-2)}
/* "Is this your site?" (S7 part 3, D94): the warning Notice, then its two Buttons in a row. */
.ld-site-check{display:flex;flex-direction:column;gap:var(--space-4)}
.ld-site-check-buttons{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.ld-site-check-buttons .ui-button-form{margin:0}
/* Your numbers and Your competitors (PRD-344 S7; Figma 1037:59702): two
   boxes 16 apart in the 1120 column. A numbers row is the setting, a
   120px Input in a 136px column and the Source Tag in a 100px one; the
   competitors' body is 20 in, its Tags 8 apart and 16 above the add row,
   whose Input takes the width left of Add. A Tag that removes a website is
   a bare button around the Tag. */
.ld-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4);align-items:start}
.ld-numbers{margin:0}
.ld-numbers .ui-table-cell-number{flex:0 0 136px;width:136px;justify-content:flex-start;padding-right:var(--space-4)}
.ld-numbers .ui-table-cell-number .ui-input{width:120px}
.ld-wide .ld-numbers .ui-table-cell-state{flex:0 0 100px;width:100px;justify-content:flex-start}
.ld-competitors{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-5)}
.ld-chips{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0;padding:0;list-style:none}
.ld-chip-form{margin:0}
.ld-chip{display:inline-flex;margin:0;padding:0;border:0;background:none;cursor:pointer;border-radius:var(--radius-full)}
.ld-chip:focus-visible{outline:none;box-shadow:0 0 0 2px var(--color-bg),0 0 0 4px var(--color-focus)}
.ld-add{display:flex;gap:var(--space-2);margin:0}
.ld-add .ui-input{flex:1;min-width:0}
.ld-cell-word{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ld-says{display:flex;flex-direction:column;gap:6px;padding:16px var(--space-5);border-bottom:1px solid var(--color-border-subtle)}
.ld-says:last-child{border-bottom:0}
.ld-says h3{margin:0;font-size:var(--font-size-sm);font-weight:var(--fw-medium);line-height:20px;color:var(--color-text)}
.ld-says p{margin:0;font-size:var(--font-size-sm);line-height:22px;color:var(--color-text);overflow-wrap:anywhere}
.ld-says h3 a{color:var(--color-link);text-decoration:underline;text-underline-offset:2px}
.ld-says h3 a:hover{color:var(--color-primary-dark)}
.ld-says .ld-says-sources{font-size:var(--font-size-sm-minus);line-height:18px;color:var(--color-muted)}
/* A question opened (Figma 927:4713): its answers one under another, 32
   apart, each the client report's band line, text and Cited list. */
.ld-answers{gap:var(--space-6)}
.ld-answer{display:flex;flex-direction:column;gap:var(--space-4);min-width:0}

/* Your blueprint (PRD-344 S11, Figma 1044:60199, frame 8): the proposal
   page's look (clients-pages.css, .bp-*) on the lead page. Four count cards
   12 apart, AI visibility beside the 404px Your numbers box, each box's
   finding one line under its header, the charts and bars inset like it. */
@media (min-width:1100px){.ld-bp-cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}}
.ld-bp-pair{display:grid;grid-template-columns:minmax(0,1fr) 404px;gap:var(--space-4);align-items:start}
.ld-bp-pair>*{min-width:0;margin:0}
/* Frame 8's narrower Your numbers: a 96px input and the source beside it,
   so "Average case value" keeps its line in the 404px box. */
.ld-bp-pair .ld-numbers .ui-table-cell-number{flex-basis:112px;width:112px}
.ld-bp-pair .ld-numbers .ui-table-cell-number .ui-input{width:96px}
.ld-wide .ld-bp-pair .ld-numbers .ui-table-cell-state{flex-basis:84px;width:84px}
.ld-bp-finding{margin:0;padding:14px 20px;border-top:1px solid var(--color-border-subtle);font-size:var(--font-size-sm);line-height:20px;color:var(--color-text)}
.ld-bp-table .ui-table-cell-date{width:220px;font-weight:var(--fw-semibold);color:var(--color-text)}
.ld-bp-chart{padding:var(--space-4) 20px 20px;border-top:1px solid var(--color-border-subtle)}
.ld-bp-links{display:flex;flex-direction:column;gap:var(--space-4);min-width:0}
.ld-bp-links-row{display:grid;grid-template-columns:120px minmax(0,1fr) 48px;align-items:center;gap:var(--space-3)}
.ld-bp-links-firm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--font-size-sm-minus);line-height:18px;color:var(--color-text)}
.ld-bp-links-count{font-size:var(--font-size-sm-minus);line-height:18px;color:var(--color-muted)}
@media (min-width:720px){
  .ld-bp-value .ui-table-row{column-gap:var(--space-2)}
  .ld-bp-value .ui-table-cell-main{min-width:160px}
  .ld-bp-value .ui-table-cell-number{width:100px;padding-right:0}
  .ld-bp-value .ui-table-cell-number:nth-child(7){width:112px}
}
.ld-bp-total.ui-table-row{font-weight:var(--fw-semibold);background:var(--color-surface)}

/* The phone frames: 16 gutters, 24 above the column and 56 below, 28 between
   its parts, the 24px heading, the lockup on two lines and the button full width. */
@media (max-width:959.98px){
  .ld-top{padding:20px 16px}
  .ld-brand-mark{height:24px}
  .ld-brand-text{flex-direction:column;align-items:flex-start;gap:0}
  .ld-brand-name{font-size:var(--font-size-xl);letter-spacing:-0.2px}
  .ld-brand-by{font-size:var(--font-size-xs)}
  .ld-page{padding:24px 16px 56px}
  .ld-column,.ld-form{gap:28px}
  .ld-doors{margin-bottom:-8px}
  .ld-heading h1{font-size:var(--font-size-2xl);line-height:32px;letter-spacing:-0.24px}
  .ld-foot .ui-button,.ld-foot .ui-button-form{width:100%}
  .ld-column.ld-wide{gap:var(--space-4)}
  .ld-report-head{flex-direction:column;align-items:stretch;gap:var(--space-4)}
  .ld-report-head .ui-button,.ld-report-head .ui-button-form{width:100%}
  .ld-two,.ld-bp-pair{grid-template-columns:minmax(0,1fr)}
}
/* The sheet's phone rows (ui-boxes.css) start below 720: the column heads
   go, so each figure says its own word, in the muted line under the name. */
@media (max-width:719.98px){
  .ld-wide div.ui-table-row{padding-right:var(--space-4)}
  .ld-answers{gap:var(--space-5)}
  .ld-says{padding:12px var(--space-4)}
  .ld-competitors{padding:var(--space-4)}
  .ld-wide .ui-table-cell-number,.ld-wide .ui-table-cell-state{justify-content:flex-start;color:var(--color-muted);font-size:var(--font-size-sm-minus)}
  .ld-cell-word{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:pre}
}