/* Customer framing: comparison, private admission, membership and payment return.
   Shared presentation owner; working content and original document pixels keep their own roles. */
* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--dito-color-ink);
  background: var(--dito-color-white);
  font: 16px/1.5 var(--dito-font-body);
}

button, input, select {
  font: inherit;
}

button, a, input, select {
  -webkit-tap-highlight-color: transparent;
}

button {
  min-height: 44px;
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: .45;
}

a {
  color: inherit;
}

button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 3px solid var(--dito-color-signal-red);
  outline-offset: 3px;
}

[hidden] {
  display: none !important;
}


.site-header {
  display: flex;
  align-items: center;
  gap: 26px;
  min-height: var(--dito-header-height);
  padding: 12px max(28px, calc((100vw - 1242px) / 2));
  border-bottom: 1px solid var(--dito-color-border-dark);
  background: var(--dito-color-ink);
  color: var(--dito-color-white);
}

.wordmark {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  min-height: var(--dito-touch-target);
  text-decoration: none;
}
.wordmark img { display: block; width: var(--dito-logo-wordmark-width); height: auto; }
.site-header .text-button { color: var(--dito-color-white); }

#sign-out { margin-left: auto; white-space: nowrap; }

.intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  position: relative;
  isolation: isolate;
  margin-bottom: 28px;
  padding: 40px 0;
  color: var(--dito-color-white);
}
.intro::before { content: ''; position: absolute; z-index: -1; inset: 0 calc((100% - 100vw) / 2); background: var(--dito-color-ink); }
.eyebrow { margin: 0 0 16px; color: var(--dito-color-dark-field-text); font: 700 13px/1.4 var(--dito-font-body); letter-spacing: var(--dito-label-letter-spacing); text-transform: uppercase; }
/* A red kicker above the headline, as on the marketing hero ("Trust, but confirm."). */
.kicker { margin: 0 0 14px; color: var(--dito-color-emphasis-red); font: 600 18px/1.4 var(--dito-font-body); }
.intro h1 span { color: var(--dito-color-emphasis-red); }
.intro .lead { margin-top: 22px; padding-left: 18px; border-left: 3px solid var(--dito-color-outcomes-red); color: var(--dito-color-dark-field-text); font-size: 17px; line-height: 1.5; max-width: 60ch; }
.intro .input-limits { color: var(--dito-color-dark-field-text); }

h1 {
  margin: 0 0 6px;
  font: 400 clamp(40px, 5vw, 68px)/1.06 var(--dito-font-display);
  letter-spacing: -.045em;
}
/* Landing hero (ditoit.com opening story title, October 1): one short, easy-to-read phrase with a visual aid on a
   landing view. A contextual option, not the base size: working pages keep the h1 above. */
.landing-hero {
  font: 400 var(--dito-landing-hero-size)/var(--dito-landing-hero-leading) var(--dito-font-display);
  letter-spacing: var(--dito-landing-hero-tracking);
  max-width: 10em;
}
@media (max-width: 760px) { .landing-hero { font-size: var(--dito-landing-hero-size-mobile); } }
/* Short phones: the phrase steps down to the ordinary heading size so the main action stays in the first screen
   (the live site also shrinks its title on short phones, inside its pinned story). */
@media (max-width: 760px) and (max-height: 680px) { .landing-hero { font-size: 40px; } }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }


.customer-main { max-width: calc(var(--dito-layout-content-max) + 56px); margin: auto; padding: 0 28px 64px; }
.customer-main .intro { display: block; }
.customer-main .intro h1:not(.landing-hero) { max-width: 900px; }
.customer-main .intro .lead { max-width: 70ch; }
.customer-panel { padding: var(--dito-ui-panel-padding); border: 1px solid var(--dito-color-border); background: var(--dito-color-white); }
.customer-panel h2 { font: 400 30px/1.2 var(--dito-font-display); }
.secondary, .customer-main button:not(.primary) { min-height: var(--dito-touch-target); padding: 12px 20px; border: 1px solid var(--dito-color-ink); border-radius: var(--dito-control-radius); background: var(--dito-color-white); color: var(--dito-color-ink); font: 700 16px/1.3 var(--dito-font-body); }
a.secondary { display: inline-flex; align-items: center; max-width: 100%; text-decoration: none; }
.secondary:hover:enabled { background: var(--dito-color-soft-gray); }
.site-header a { display: inline-flex; align-items: center; min-height: var(--dito-touch-target); }
.customer-main .error { color: var(--dito-color-deep-red); }
@media(max-width:760px) { .customer-main { padding: 0 20px 40px; } .site-header { min-height: var(--dito-header-height-mobile); padding: 12px 20px; gap: 16px; flex-wrap: wrap; } .intro { padding: 32px 0; } .customer-panel { padding: var(--dito-ui-panel-padding-mobile); } }

.primary {
  min-height: var(--dito-control-height);
  padding: var(--dito-control-padding);
  border: 1px solid var(--dito-color-signal-red);
  border-radius: var(--dito-control-radius);
  background: var(--dito-color-signal-red);
  color: var(--dito-color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font: var(--dito-control-font-weight) var(--dito-control-font-size)/1.25 var(--dito-font-body);
  letter-spacing: var(--dito-label-letter-spacing);
  text-transform: uppercase;
  white-space: nowrap;
}

button.primary:hover:enabled, a.primary:hover {
  background: var(--dito-color-deep-red);
}

.primary > span {
  margin-left: 18px;
}

.text-button {
  padding: 8px 3px;
  border: 0;
  background: none;
  color: var(--dito-color-secondary-text);
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* One paid report offer, alongside useful document evidence. */
.report-overview { scroll-margin-top:24px; display:grid; grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr); gap:20px; align-items:start; margin:20px 0 28px; }
.report-preview { min-width:0; }
.report-preview .result-summary { margin:0 0 12px; }
.report-findings h3 { font:32px/1.1 var(--dito-font-display); margin:0 0 12px; }
.result-tools { display:grid; gap:12px; }
.report-main { display:grid; gap:16px; }
.payment-heading { min-width:0; }
.payment-heading h3 { margin:0 0 10px; font:400 32px/1.1 var(--dito-font-display); letter-spacing:-.02em; }
.payment-heading p { margin:0; color:var(--dito-color-secondary-text); font-size:15px; }
.report-actions { display:flex; flex-direction:column; gap:8px; }
.report-actions > :is(button,a) { white-space:normal; width:100%; max-width:100%; }
.report-actions > a { text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }
.report-actions .report-status { margin:0; font-size:14px; line-height:1.5; color:var(--dito-color-secondary-text); overflow-wrap:anywhere; }
.report-status:empty { display:none; }
.report-note > summary { min-height:44px; display:list-item; padding:10px 0; cursor:pointer; font:600 14px/1.5 var(--dito-font-body); }
.report-note > p { margin:4px 0 0; }
.report-session-note,.report-note { margin:0; color:var(--dito-color-secondary-text); font:12px/1.5 var(--dito-font-body); }
.result-tools > details { border-top:1px solid var(--dito-color-border); padding-top:4px; min-width:0; }
.result-tools > details > summary { min-height:44px; padding:10px 0; cursor:pointer; font:600 14px/1.5 var(--dito-font-body); }
@media(max-width:760px) { .report-overview { scroll-margin-top:24px; grid-template-columns:minmax(0,1fr); gap:12px; } .payment-heading h3 { font-size:28px; } }

/* Motion: Jeremy's marketing vocabulary (v149 app/motion.css). Short settling movement explains
   what just changed; controls never travel, only real work drives progress and reduced motion stops it.
   Scripts mark changed content with data-motion; timing and keyframes stay here. */
:root { --motion-arrive: var(--dito-motion-arrive); --motion-step: var(--dito-motion-stagger); interpolate-size: allow-keywords; }
@media (max-width: 760px) { :root { --motion-arrive: var(--dito-motion-arrive-compact); --motion-step: 0ms; } }
@keyframes dito-settle-in { from { opacity: 0; transform: translateY(var(--dito-motion-arrive-distance)); } }
@keyframes dito-document-arrive { from { opacity: 0; transform: translateY(24px) scale(.98); } }
@keyframes dito-detail-change { from { opacity: .25; transform: translateY(5px); } }
@keyframes dito-detail-fade { from { opacity: .25; } }
@keyframes dito-review-check { from { opacity: 0; transform: scale(.65); } }
/* Live marketing vocabulary (2026-09-25 capture): coverage rows read in; a page pair pulses once when it finishes. */
@keyframes dito-coverage-read { from { opacity: .45; transform: translateY(5px); } }
@keyframes dito-page-check { 45% { box-shadow: inset 0 0 0 2px var(--dito-color-signal-red), 0 0 10px #d92d2040; } }

button, .primary, .secondary, .text-button {
  transition: background-color var(--dito-motion-feedback-max) ease, border-color var(--dito-motion-feedback-max) ease,
    color var(--dito-motion-feedback-max) ease, opacity var(--dito-motion-feedback-max) ease,
    box-shadow var(--dito-motion-control) var(--dito-motion-settle-easing), transform var(--dito-motion-control) var(--dito-motion-settle-easing);
}
.primary:active:not(:disabled), .secondary:active:not(:disabled) { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) {
  button.primary:hover:enabled, a.primary:hover { transform: translateY(-2px); box-shadow: 0 4px 8px #11111118, 0 10px 22px #11111120; }
}

/* Policy links on every customer page; each opens in a new tab so an open comparison stays put. */
.policy-links { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 14px; }
.policy-links a { color: inherit; min-height: 24px; }

@media (prefers-reduced-motion: no-preference) {
  .intro :is(.eyebrow, .kicker) { animation: dito-settle-in var(--motion-arrive) var(--dito-motion-settle-easing) backwards; }
  .intro .lead, .intro .input-limits { animation: dito-settle-in var(--motion-arrive) var(--dito-motion-settle-easing) calc(var(--motion-step) * 2) backwards; }
  .customer-panel { animation: dito-document-arrive var(--dito-motion-document-arrive) var(--dito-motion-settle-easing) var(--motion-step) backwards; }
  [data-motion="arrive"] { animation: dito-settle-in var(--motion-arrive) var(--dito-motion-settle-easing) calc(var(--motion-order, 0) * var(--motion-step)) backwards; }
  [data-motion="detail"] { animation: dito-detail-change var(--dito-motion-detail) var(--dito-motion-settle-easing) calc(var(--motion-order, 0) * var(--motion-step)) backwards; }
  /* Text beside controls only fades, so nothing near a control shifts. */
  [data-motion="fade"] { animation: dito-detail-fade var(--dito-motion-detail) var(--dito-motion-settle-easing) backwards; }
  .report-actions > *, .result-tools > .ocr-evidence { animation: dito-detail-change var(--dito-motion-detail) var(--dito-motion-settle-easing) backwards; }
  /* Disclosures open like the marketing FAQ; the clip margin keeps focus outlines visible. Opened content
     is readable at once (no discrete content-visibility delay); closing hides it and eases the space shut. */
  details::details-content {
    block-size: 0; opacity: 0; overflow: clip; overflow-clip-margin: 8px;
    transition: block-size var(--dito-motion-disclosure) var(--dito-motion-settle-easing), opacity 260ms ease;
  }
  details[open]::details-content { block-size: auto; opacity: 1; }
}
@media (max-width: 760px) { .customer-panel { animation-duration: var(--motion-arrive); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after, ::backdrop { animation: none !important; transition: none !important; }
  .primary:hover, .primary:active, .secondary:active { transform: none !important; }
}
@media print { *, *::before, *::after, ::backdrop { animation: none !important; transition: none !important; } }

/* On phones the same action remains reachable while findings scroll. */
@media(max-width:760px) {
  .report-overview { display:flex; flex-direction:column; align-items:stretch; }
  .report-preview,.report-findings { display:contents; }
  .report-preview > *, .report-findings > * { order:3; }
  .report-preview > .result-summary,.report-findings > h3 { order:0; }
  .report-preview > [data-dito-component]:first-of-type,.report-findings > [data-dito-component]:first-of-type { order:1; }
  .report-overview > .report-section { order:2; }
  .report-actions { position:fixed; z-index:30; bottom:0; left:0; right:0; margin:0; padding:12px 16px max(12px,env(safe-area-inset-bottom)); background:var(--dito-color-white); border-top:1px solid var(--dito-color-border); box-shadow:0 -4px 16px #11111110; }
  .report-actions :is(button,a) { width:100%; }
  .report-actions .report-status { margin:4px 0 0; font-size:13px; }
  #results { padding-bottom:150px; }
}