/* Phones (up to 760 px wide). index.html loads this file with media="(max-width: 760px)", so every
   rule here overrides site.css on phones only. Section by section, in page order. */

@media (max-width: 760px) {

  /* ---- Page, type and shared pieces ---------------------------------------------------------------- */

  .page-inner {
    padding: 0;
  }

  .t-h2,
  .t-h2s {
    font-size: 32px;
    line-height: .95;
  }

  .t-h3 {
    font-size: 24px;
  }

  /* touch has no hover: a tap leaves :hover stuck on the element, so hover-only looks are switched off
     here and the taps below set their own classes instead */
  .r .src:hover .n {
    background: none;
    color: inherit;
  }

  .r .src .t {
    display: none;
  }


  /* ---- Header: brand and CONTACT US ---------------------------------------------------------------- */

  .brand {
    flex: 1 1 auto;
    padding: 0 16px;
  }

  .brand-name {
    font-size: 16px;
  }

  .site-nav {
    flex: 0 0 auto;
  }

  .nav-contact {
    flex: 0 0 auto;
    min-height: 56px;
    padding: 0 16px;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    font-size: 11px;
  }

  .nav-contact-arrow {
    align-self: center;
    font-size: 14px;
  }


  /* ---- Hero: the face fills the screen, the headline types over its lower half ---------------------- */

  /* The face is sized to the screen: full width on most phones, smaller on short ones. It is centred
     on the head, whose middle sits 59.4% across the 696 × 740 crop, and ends 150 px above the hero's
     bottom so the headline's first lines sit over it. The hero stops short of the screen's bottom
     edge (--peek) so the first lane of samples shows. */
  .hero {
    --peek: 76px;
    --face-h: min(calc(100vw * 1.26), calc(100svh - 360px));
    aspect-ratio: auto;
    min-height: 0;
    height: calc(100svh - 57px - var(--peek));
    border: 0;
  }

  .hero-face {
    top: calc(100% - var(--face-h) - 150px);
    left: calc(50% - var(--face-h) * 696 / 740 * .594);
    width: calc(var(--face-h) * 696 / 740);
    height: var(--face-h);
    aspect-ratio: auto;
  }

  .hero-copy {
    padding: 0 20px 22px;
    gap: 14px;
  }

  /* three phrases, one to a line: AI DETECTION STACK. just fits the width */
  .hero-title {
    font-size: calc((100vw - 40px) * .094);
  }

  .hero-lead {
    font-size: 16px;
    max-width: 330px;
  }


  /* ---- 01 Samples: the question sits where the first two lanes meet, over both ---------------------- */

  .samples {
    padding: 10px 0 44px;
  }

  .lanes {
    position: relative;
    gap: 12px;
  }

  /* centred on the gap between lane one and lane two (a card is 150 px, the gap 12); the cards stay
     visible through a soft clearing and take taps through the text */
  .samples-overlay {
    inset: auto 0 auto 0;
    top: 156px;
    translate: 0 -50%;
    z-index: 3;
  }

  .samples-callout {
    width: auto;
    aspect-ratio: auto;
    padding: 20px 20px;
    background: radial-gradient(closest-side, rgba(236, 232, 223, .9), rgba(236, 232, 223, .72) 60%, rgba(236, 232, 223, 0));
  }

  .samples-title {
    max-width: 330px;
    text-shadow: 0 0 14px var(--g), 0 0 6px var(--g), 0 0 2px var(--g);
  }

  .track {
    gap: 12px;
  }

  .card {
    flex-basis: 148px;
    width: 148px;
    height: 150px;
  }

  .card-bubble,
  .card-caption,
  .card-subject {
    font-size: 11px;
  }

  .lanes.in .lane:hover .track {
    animation-play-state: running;
  }

  .lanes.in .lane.held .track {
    animation-play-state: paused;
  }

  /* a tapped card lights up as a hovered one does on desktop, and its lane stops */
  .card:hover .hd {
    background: none;
    color: var(--mut);
    border-bottom: 1px dashed var(--line);
  }

  .card:hover .cn {
    width: 9px;
    height: 9px;
  }

  .card:hover .cn.tl { border-top-width: 1px; border-left-width: 1px; }
  .card:hover .cn.tr { border-top-width: 1px; border-right-width: 1px; }
  .card:hover .cn.bl { border-bottom-width: 1px; border-left-width: 1px; }
  .card:hover .cn.br { border-bottom-width: 1px; border-right-width: 1px; }

  .r .card.on .hd {
    background: var(--acc);
    color: var(--onacc);
    border-bottom: 1px solid var(--acc);
  }

  .r .card.on .cn {
    width: 16px;
    height: 16px;
  }

  .r .card.on .cn.tl { border-top-width: 3px; border-left-width: 3px; }
  .r .card.on .cn.tr { border-top-width: 3px; border-right-width: 3px; }
  .r .card.on .cn.bl { border-bottom-width: 3px; border-left-width: 3px; }
  .r .card.on .cn.br { border-bottom-width: 3px; border-right-width: 3px; }


  /* ---- 02 Cases: the title types, then the chart draws; the cases swipe sideways -------------------- */

  /* The graph shares the heading's top: its rising end sits beside THEY COULDN’T with the peak dot
     level with the capitals, and its flat start runs under TELL EITHER. */
  .cases-head {
    padding: 56px 20px 26px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .cases-head > * {
    grid-area: 1 / 1;
  }

  .cases-head .heading-group {
    position: relative;
    z-index: 1;
  }

  .fraud {
    align-items: flex-start;
    margin-left: 0;
    margin-top: 2px;
  }

  .fraud svg {
    width: 100%;
  }

  /* the chart starts once the title has finished typing (typing.js), so it draws a little sooner */
  .fz .draw {
    transition-delay: .15s;
  }

  .fz .ar,
  .fz .dt {
    transition-delay: 1.15s;
  }

  .case-row {
    flex-wrap: nowrap;
    gap: 12px;
    padding: 0 20px 24px;
    border-top: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 20px;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }

  .case-row::-webkit-scrollbar {
    display: none;
  }

  .case,
  .case:hover,
  .case:focus-visible,
  .case:has(:focus-visible) {
    flex: 0 0 calc(100% - 44px);
    transition: none;
  }

  .case {
    scroll-snap-align: start;
  }

  .case-panel {
    min-height: 0;
    padding: 18px 18px 22px;
    gap: 40px;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--g) 55%, transparent);
  }

  /* one size for all three, set by the longest (Everything.) so it fits the card */
  .case .num,
  .case:hover .num {
    font-size: min(64px, 17.5cqi);
    color: var(--ink);
  }

  .case .sub {
    width: auto;
    font-size: 18px;
  }

  .case .more {
    grid-template-rows: 1fr;
  }

  .case .mi,
  .case:hover .mi {
    width: auto;
    opacity: .4;
    transition: opacity .35s ease;
  }

  /* the case in view is the open one: the desktop's blue number, and its story at full strength */
  .r .case.on .num {
    color: var(--acct);
  }

  .r .case.on .mi {
    opacity: 1;
  }


  /* ---- 03 State of the art: an accordion; the open row turns blue ---------------------------------- */

  /* The rows only take this form once phone.js marks the list (.tiles.acc). Matched on every tile, these
     rules made Chrome paint the desktop's hidden evidence panels as shown, though this file's media
     query did not match. */

  .state {
    padding: 44px 0 0;
    gap: 26px;
  }

  .state-head {
    padding: 0 20px;
  }

  .tiles.acc {
    display: block;
    border-left: 0;
  }

  .tiles.acc .tile {
    min-height: 0;
    padding: 0;
    border-right: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .tiles.acc .tile .less,
  .tiles.acc .tile:hover .less,
  .tiles.acc .tile:focus-visible .less,
  .tiles.acc .tile:has(:focus-visible) .less {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 18px;
    grid-template-areas: "icon lab sign" "icon head sign";
    align-items: center;
    gap: 6px 16px;
    height: auto;
    padding: 18px 20px;
    opacity: 1;
  }

  .tiles.acc .less svg {
    grid-area: icon;
    width: 52px;
    height: auto;
  }

  .tiles.acc .less .t-lab {
    grid-area: lab;
  }

  .tiles.acc .less .t-h4 {
    grid-area: head;
    font-size: 17px;
  }

  .tiles.acc .less .t-small {
    display: none;
  }

  .tiles.acc .less::after {
    content: "+";
    grid-area: sign;
    justify-self: end;
    font-family: var(--f-mono);
    font-size: 18px;
    line-height: 1;
    color: var(--acct);
    transition: rotate .3s ease;
  }

  .tiles.acc .tile .more,
  .tiles.acc .tile:hover .more,
  .tiles.acc .tile:focus-visible .more,
  .tiles.acc .tile:has(:focus-visible) .more {
    position: static;
    padding: 0 20px;
    display: grid;
    grid-template-rows: 0fr;
    background: none;
    opacity: 1;
    transform: none;
  }

  .tiles.acc .tile .more {
    transition: grid-template-rows .45s cubic-bezier(.2, .7, .2, 1);
  }

  .tiles.acc .tile .more-in {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity .15s ease;
  }

  .r .tiles.acc .tile.open .more-in {
    opacity: 1;
    transition: opacity .3s ease .12s;
  }

  .tiles.acc .tile .more-in > .t-lab {
    display: none;
  }

  .tiles.acc .tile .more-in > :last-child {
    margin-bottom: 22px;
  }

  .r .tiles.acc .tile.open {
    background: var(--acc);
    color: var(--onacc);
  }

  .r .tiles.acc .tile.open .more {
    grid-template-rows: 1fr;
  }

  .r .tiles.acc .tile.open .less .t-lab {
    color: var(--onacc2);
  }

  .r .tiles.acc .tile.open .less svg {
    opacity: .25;
  }

  .r .tiles.acc .tile.open .less::after {
    rotate: 45deg;
    color: var(--onacc);
  }

  .tiles.acc .tile .chips {
    gap: 10px 18px;
  }

  .tiles.acc .tile .src {
    padding: 10px 6px;
    margin: -10px -6px;
  }


  /* ---- 04 Why us: the bento in one column; each card arrives as it scrolls in ---------------------- */

  .method {
    padding: 56px 14px;
    gap: 26px;
  }

  .method > .heading-group {
    padding: 0 6px;
  }

  .bgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: 10px;
  }

  .bx-approach,
  .bx-fakes,
  .bx-data,
  .bx-scale {
    grid-column: span 2;
    grid-row: auto;
    padding: 20px;
  }

  .bx-approach { order: 1; }
  .bx-fakes { order: 2; }
  .bx-data { order: 3; }
  .bx-scale { order: 4; }

  .bx-security,
  .bx-device {
    order: 5;
    padding: 16px;
    min-height: 190px;
  }

  .bx-security .t-h4,
  .bx-device .t-h4 {
    font-size: 15px;
  }

  .bx-security svg,
  .bx-device svg {
    width: 100%;
    max-width: 132px;
    height: auto;
  }

  .bx-approach svg g {
    font-size: 13px;
  }

  .bx-fakes svg text {
    font-size: 13px;
  }

  .bx-copy .t-body,
  .bx-copy-data .t-body {
    font-size: 14px;
  }

  .waffle {
    grid-template-columns: repeat(34, minmax(0, 1fr));
    gap: 3px;
  }

  .wq {
    width: auto;
    height: auto;
    aspect-ratio: 1;
  }

  /* the first eight of decor.js's twelve rows */
  .wq:nth-child(n+273) {
    display: none;
  }

  .scale-legend {
    flex-direction: column;
    gap: 6px;
  }

  /* No lift on touch (it would stick after a tap); a press instead. */
  .bx:hover {
    transform: none;
    outline-color: transparent;
    box-shadow: none;
  }

  .bx:active {
    transform: scale(.985);
  }

  /* Each card slides in from its side when it scrolls into view (main.js adds .in to the card),
     then plays its graphic, as the whole grid does at once on desktop. */
  .r .bento:not(.in) .bx,
  .r .bento:not(.in) .bx.gl,
  .r .bento:not(.in) .bx.gr,
  .r .bento:not(.in) .bx.gu {
    opacity: 1;
    translate: none;
  }

  /* the .gl, .gr and .gu forms outrank the reset above, which would otherwise show a card at its
     slid-out position before it arrives */
  .r .bento .bx:not(.in),
  .r .bento .bx.gl:not(.in),
  .r .bento .bx.gr:not(.in),
  .r .bento .bx.gu:not(.in) {
    opacity: 0;
  }

  .r .bento .bx.gl:not(.in) {
    translate: -40px 0;
  }

  .r .bento .bx.gr:not(.in) {
    translate: 40px 0;
  }

  .r .bento .bx.gu:not(.in) {
    translate: 0 32px;
  }

  .bento .bx {
    transition-delay: 0s, 0s, 0s, 0s, 0s;
  }

  .bx-device {
    transition-delay: .08s, .08s, 0s, 0s, 0s;
  }

  .bx.in .wq {
    opacity: 1;
    scale: 1;
  }

  .bx.in .draw {
    stroke-dashoffset: 0;
  }

  .bx.in .dt {
    opacity: 1;
  }

  .bx.in .sbar {
    transform: none;
  }


  /* ---- 05 Work with us and 06 Contact: one section. The card above shows the audience the big
          line below is speaking to, and both move on together (contact.js) ---------------------- */

  .work-section {
    border: 0;
    padding-bottom: 28px;
  }

  .work-head {
    padding: 56px 20px 22px;
  }

  .work-intro {
    display: none;
  }

  /* swipe through the four audiences; the headline below follows (phone.js, contact.js) */
  .work {
    display: flex;
    gap: 12px;
    padding: 0 20px;
    border-top: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 20px;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }

  .work::-webkit-scrollbar {
    display: none;
  }

  .wc,
  .wc-divided {
    flex: 0 0 calc(100% - 44px);
    min-height: 0;
    padding: 18px 18px 22px;
    gap: 12px;
    border: 1px solid var(--line);
    scroll-snap-align: start;
  }

  .work .wc {
    transition: background-color .25s ease, opacity .6s ease, translate .7s cubic-bezier(.16, 1, .3, 1);
    transition-delay: 0s;
  }

  .wc-meta {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 14px;
  }

  .wc-pos {
    display: flex;
    gap: 3px;
  }

  .wc-pos i {
    width: 7px;
    height: 7px;
    background: var(--grid);
  }

  .wc-pos i.on {
    background: var(--acc);
  }

  .wc .wt {
    font-size: 24px;
  }

  .wc .wc-text {
    font-size: 15px;
  }

  .r .wc:hover {
    background: none;
  }

  .wc:hover::before {
    transform: scaleX(0);
  }

  .wc:hover .wt {
    color: inherit;
    transform: none;
  }

  .wc.on::before {
    transform: scaleX(1);
    transition: transform .9s cubic-bezier(.2, .7, .2, 1) .3s;
  }

  .r .wc.on .wt {
    color: var(--acct);
  }

  .contact {
    padding: 30px 20px 20px;
    gap: 30px;
    border: 0;
  }

  /* as big as the longest word allows: COMPARE fills the width, and every line takes two rows */
  .r .cta-h {
    font-size: calc((100vw - 40px) / 4.8);
    line-height: .86;
    white-space: normal;
    height: auto;
    min-height: calc(2 * .86em);
  }

  .contact-form {
    width: 100%;
  }

  .r .contact-submit {
    flex: 1;
    min-height: 64px;
  }


  /* ---- Footer: sources fold behind one row ---------------------------------------------------------- */

  .site-footer {
    flex-direction: column;
    border: 0;
  }

  .sources-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 56px;
    padding: 0 20px;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: none;
    color: var(--ink);
    font-size: 11px;
    letter-spacing: .08em;
    cursor: pointer;
  }

  .sources-sign {
    font-size: 18px;
    color: var(--acct);
    transition: rotate .3s ease;
  }

  .site-footer.open .sources-sign {
    rotate: 45deg;
  }

  .sources {
    display: none;
    padding: 18px 20px 18px 40px;
    columns: auto;
  }

  .site-footer.open .sources {
    display: block;
  }

  .footer-meta {
    flex: none;
    border-left: 0;
    padding: 22px 20px 28px;
    gap: 18px;
  }


  /* ---- Source sheet: a tapped citation opens its reference here (sheet.js) -------------------------- */

  .sheet-scrim {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(20, 20, 26, .32);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility 0s linear .25s;
  }

  .sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 51;
    box-sizing: border-box;
    padding: 12px 20px calc(24px + env(safe-area-inset-bottom));
    background: var(--card);
    border-top: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 14px;
    translate: 0 100%;
    visibility: hidden;
    transition: translate .35s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .35s;
  }

  .sheet-open .sheet-scrim,
  .sheet-open .sheet {
    visibility: visible;
    transition-delay: 0s;
  }

  .sheet-open .sheet-scrim {
    opacity: 1;
  }

  .sheet-open .sheet {
    translate: none;
  }

  .sheet-grab {
    align-self: center;
    width: 36px;
    height: 4px;
    background: var(--line);
  }

  .sheet-label {
    color: var(--acct);
  }

  .sheet-text {
    margin: 0;
    font-size: 16px;
    line-height: 1.4;
  }

  .r .sheet-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 52px;
    padding: 0 18px;
    border: 1px solid var(--ink);
    color: var(--ink);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
  }


  /* ---- Reduced motion ------------------------------------------------------------------------------- */

  @media (prefers-reduced-motion: reduce) {
    .tile,
    .tile .more,
    .less svg,
    .less::after,
    .wc,
    .work .wc,
    .sheet,
    .sheet-scrim,
    .case .mi {
      transition: none !important;
    }
  }

}