/* phone.css — tenean.com in a hand.
 *
 * Peter, 2026-10-03: "our mobile site must reflect the best in class mobile site… Everything the public
 * see about tenean needs to be a great design." The occasion: the Tenean ad plays at an event and a room
 * full of people open the site on their phones.
 *
 * Every page was walked on an iPhone first (production, 15 pages, four screen sizes). Nothing scrolled
 * sideways and the hero was already good. What fell short was everything a desktop layout does by
 * accident when it is folded into one column:
 *   · product screens — a 1,280px-wide app drawn 331px wide. A grey rectangle, not a product.
 *   · the platform picker — seven large greyed-out labels that read as disabled, their picture a screen away.
 *   · cards inside cards, each keeping its desktop padding: body text in a 270px column on a 393px screen.
 *   · a four-item fact row stacked into 200px of bullets; a footer of nineteen 22px-tall links, two screens long.
 *   · centred sections among left-aligned ones, and separator dots stranded at the end of wrapped lines.
 *   · buttons that stayed in their hover colour after a touch (seen in Safari: a white pill with no words).
 *
 * ONE FILE, EVERY PAGE, LOADED LAST. The pages' own styles are untouched; this only speaks under 720px
 * (plus the touch rule, which is about fingers, not width). Nothing here changes a word, a number or
 * which picture is shown — only how much of it a phone can actually see.
 */

/* ── A finger does not hover ─────────────────────────────────────────────────────────────────────
   iOS keeps :hover on the last thing touched. Every button's hover look is put back to its resting
   look where there is no pointer to hover with. */
@media (hover:none){
  .btn:hover{background:var(--coral);border-color:transparent;transform:none}
  .btn.ghost:hover{background:transparent;color:var(--ink);border-color:rgba(17,19,24,.28)}
  .ds-panel.ink .btn.ghost:hover{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
  .band3 .btn:hover{background:#fff;color:var(--ink)}
  .stickybar .btn.askbar:hover{background:#fff;color:var(--ink);border-color:var(--coral)}
  .d3:hover,.door:hover{transform:none}
  .tt:hover .tobj.web .crop{transform:none}
}

@media (max-width:720px){

  /* ── The page: one gutter, one rhythm ───────────────────────────────────────────────────────── */
  .wrap{padding-left:20px;padding-right:20px}
  h2{font-size:30px;line-height:1.1;letter-spacing:-.025em;text-wrap:balance}
  h1{text-wrap:balance}
  .lead{font-size:17.5px;line-height:1.5}
  p{text-wrap:pretty}
  /* Everything reads from the left edge. A centred block among left-aligned ones is a second voice. */
  h2[style*="text-align:center"]{text-align:left !important;margin-left:0 !important}

  /* ── The hero ───────────────────────────────────────────────────────────────────────────────── */
  .ds-panel.ink{padding:36px 24px 32px}
  .ds-panel.ink h1{font-size:40px;line-height:1.02;letter-spacing:-.035em;margin-bottom:16px}
  .ds-panel.ink .ctas{margin-top:26px}
  .ds-panel.ink .hint{margin-top:22px;font-size:14px;line-height:1.5}

  /* ── Product screens a phone can read ───────────────────────────────────────────────────────────
     A screen of the web app is 1,280 points wide. Fitted whole into a phone it is a third of its size
     and says nothing. So a phone shows the PART that matters — the room itself, past the app's own
     menu — at a size the words can be read. Every web screen on the site (shots/web-*) gets the same
     crop: from the room's top-left corner, 42% of its width. Where the page has an enlarger
     (.crop.region), a tap still opens the whole screen. The build sends these the 1,400px copy. */
  :is(.frame,.crop,.webcrop,.im,.tobj):has(> img[src*="shots/web-"]){overflow:hidden}
  :is(.frame,.crop,.webcrop):has(> img[src*="shots/web-"]){aspect-ratio:4/3.1}
  img[src*="shots/web-"]{width:236% !important;max-width:none !important;height:auto !important;aspect-ratio:auto !important;
    margin-left:-43%;margin-top:-1.5%;display:block}
  .d3 .im:has(> img[src*="shots/web-"]){height:200px}
  /* A box that holds one of these crops grows to fit it. Services' strip held its screens in a fixed
     190px box, and the 273px crop spilled over the label above and the caption below. */
  .tobj.web{height:auto !important;flex:none !important}
  /* On the home page's two enlargers, a small glass says the whole screen is a tap away. */
  :is(.ds-sector,.pview) .crop.region{position:relative}
  :is(.ds-sector,.pview) .crop.region::after{content:"";position:absolute;right:10px;bottom:10px;width:34px;height:34px;border-radius:50%;
    background:rgba(17,19,24,.82) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M15 4h5v5M9 20H4v-5M20 4l-6.5 6.5M4 20l6.5-6.5'/%3E%3C/svg%3E") center/16px no-repeat;
    box-shadow:0 2px 8px rgba(17,19,24,.25)}

  /* The hero's product panel */
  .ds-sector{padding:16px;gap:12px}
  .ds-sector .sw button{min-height:40px;padding:8px 16px;font-size:14.5px}
  .ds-sector figcaption{font-size:15px;line-height:1.45}

  /* A photograph with its caption laid over it: a 2.4:1 strip is 147px tall on a phone and the caption
     covered most of it. A 4:3 frame keeps the caption along the bottom edge, as on a desk. */
  .band-photo{padding:0}
  .band-photo figure{margin:0 20px}
  .band-photo img{aspect-ratio:4/3 !important}
  .band-photo figcaption{padding:40px 18px 16px;font-size:14.5px;line-height:1.4}

  /* ── The four facts: a tidy two-by-two, not four bullets a thumb apart ──────────────────────── */
  .facts .wrap{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;padding:18px 20px 0;font-size:13.5px;line-height:1.35}
  .facts span{align-items:flex-start;gap:8px}
  .facts i{margin-top:6px}

  /* ── Industries: two doors ──────────────────────────────────────────────────────────────────── */
  .doors3{gap:16px;margin-top:24px}
  .d3 .im{height:200px}
  .d3 .bd{padding:20px 20px 24px}
  .d3 p{font-size:16px}
  .d3 .go2{margin-top:12px;padding:6px 0}

  /* ── The platform picker: seven chips you swipe, the picture right under them ───────────────────
     On a desk it is a tall list beside a picture. Folded, the list was seven 30px grey labels — they
     read as switched off — and choosing one changed a picture below the fold. */
  .pick{padding:18px 16px 16px;gap:14px;margin-top:22px;border-radius:24px}
  .plist{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    margin:0 -16px;padding:2px 16px 4px;scrollbar-width:none}
  .plist::-webkit-scrollbar{display:none}
  .plist button{flex:0 0 auto;width:auto;scroll-snap-align:start;font:600 14.5px/1 var(--sans);letter-spacing:0;
    color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:999px;padding:0 16px;height:42px;white-space:nowrap}
  .plist button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
  .plist button[aria-pressed="true"]:after{content:none}
  .pview{border-radius:16px}
  .pview figcaption{padding:14px 16px 16px;font-size:15.5px;line-height:1.5}

  /* ── The assistant ──────────────────────────────────────────────────────────────────────────── */
  .ai3{gap:22px;margin-top:22px}
  .ai3 .shots{padding:24px 18px;gap:14px;border-radius:24px}
  .ai3 .pframe{width:47%}
  .ai3 li{font-size:17px;padding:13px 0;gap:14px}

  /* ── Open for business ──────────────────────────────────────────────────────────────────────── */
  .ds-open{padding:26px 20px;gap:28px;border-radius:24px}

  /* ── Who built it ───────────────────────────────────────────────────────────────────────────── */
  .founder2{gap:18px;margin-top:22px}
  .founder2 .face{width:88px;height:88px}
  .founder2 blockquote{font-size:21px;line-height:1.32}
  .why3 li{padding:14px 16px}
  .proofline{align-items:flex-start;margin-top:22px}
  .proofline b{font-size:30px;line-height:1}

  /* ── Questions ──────────────────────────────────────────────────────────────────────────────── */
  .faqgrid{gap:0;margin-top:14px}
  .faqgrid summary{font-size:18px;line-height:1.3;padding:16px 0;align-items:center;min-height:56px}
  .faqgrid summary:after{font-size:24px;line-height:1}
  .faqgrid details p{font-size:16px;line-height:1.55}

  /* ── The closing ask: left like the rest; three promises as three lines, no stranded dots ───── */
  .close{text-align:left;padding:56px 0 60px}
  .close .lead{margin-left:0}
  .close .ctas{justify-content:flex-start}
  .risk{display:grid;gap:8px;justify-content:start;text-align:left;font-size:0;margin-top:24px}
  .risk span{font-size:14.5px;line-height:1.45;padding-left:16px;position:relative}
  .risk span::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--coral)}

  /* Buttons: a full-width primary is the easiest thing on a phone to hit. */
  .ctas{display:flex;flex-direction:column;align-items:stretch;gap:10px}
  .ctas .btn{width:100%}

  /* ── The footer: two columns of real tap targets, one screen instead of two ─────────────────── */
  footer{padding:40px 0 24px}
  footer .cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 20px;margin-bottom:22px}
  footer .cols>div:first-child{grid-column:1/-1}
  footer h4{margin-bottom:4px;font-size:12.5px;color:rgba(255,255,255,.6)}
  footer .cols a:not(.mark){margin:0;padding:11px 0;line-height:1.3;min-height:44px;display:flex;align-items:center}
  footer .cols>div:last-child{grid-column:1/-1;display:flex;flex-wrap:wrap;column-gap:22px}
  footer .cols>div:last-child h4{flex:0 0 100%}
  footer .legal{gap:6px;padding-top:16px;flex-direction:column}
  footer .legal a{display:inline-block;padding:11px 10px 11px 0;margin:0}

  /* ── Sections breathe once, not twice ───────────────────────────────────────────────────────────
     Two plain sections in a row each kept their own top and bottom padding: 104–124px of white between
     a card and the next heading. The second one gives its top back. */
  section:not(.tint):not(.close):not([style*="padding"]) + section:not(.tint):not([style*="padding"]){padding-top:12px}

  /* ── The header is solid. Its see-through white turned grey over the dark footer. ────────────── */
  nav.site{background:#fff;backdrop-filter:none}

  /* ── A page's own second bar: one row you can swipe, each word a full-height target ─────────── */
  .subnav .wrap{flex-wrap:nowrap;overflow-x:auto;gap:22px;height:48px;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-left:20px;padding-right:20px}
  .subnav .wrap::-webkit-scrollbar{display:none}
  .subnav a,.subnav .dd,.subnav .dd>button{height:48px;flex:none}
  .subnav .lbl{flex:none}

  /* ── A film of the app: taller, and on the part of the screen where things happen ───────────────
     The films are recordings of the web app, 1,280 points wide. Fitted whole, a phone showed a
     thumbnail. The panel is now a portrait window onto the room itself (past the app's menu), and the
     chapter names run in one swipeable row along the bottom instead of wrapping across the picture. */
  .ds-film{min-height:112vw}
  .ds-film video,.ds-film img.poster{object-position:40% top}
  .ds-pills{left:12px;right:12px;bottom:12px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:6px}
  .ds-pills::-webkit-scrollbar{display:none}
  .ds-pills button{flex:none;font-size:12px;padding:0 14px;height:38px;white-space:nowrap}
  .ds-pause{width:44px;height:44px;right:12px;top:12px}

  /* ── Phone screens in a row you swipe, each big enough to read its caption beside nothing ────── */
  .phones{display:flex;grid-template-columns:none;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    margin-left:-20px;margin-right:-20px;padding:0 20px 6px;scrollbar-width:none;max-width:none}
  .phones::-webkit-scrollbar{display:none}
  .phones figure{flex:0 0 62%;scroll-snap-align:center}
  .phones figcaption{font-size:15px;line-height:1.45}

  /* ── Things a thumb has to hit ──────────────────────────────────────────────────────────────── */
  .card .go,.go{display:inline-flex;align-items:center;min-height:44px;margin-top:4px}
  details>summary{min-height:52px}
  .tiles .tsec{font-size:12.5px}

  /* A centred founder block among left-aligned sections: left, like the rest. */
  .wrap.founder-c,.founder-c h2,.founder-c p{text-align:left !important}
  .founder-c .face-lg{margin-left:0}

  /* The assistant block's text sat 36px inside an invisible box. */
  .ai3{padding:0}

  /* ── The menu: a full-screen sheet, not a panel with the page showing under it ──────────────────
     Open, it covers the screen below the header in white, every row is a 56px target in the display
     face, the two groups (Industries, Company) read as headings with their pages under them, and the
     booking button sits at the bottom where a thumb is. The page behind does not scroll. */
  nav.site.open .links{position:fixed;top:72px;left:0;right:0;bottom:0;height:auto;overflow-y:auto;
    padding:8px 20px calc(24px + env(safe-area-inset-bottom));border-bottom:0;background:#fff;z-index:41}
  nav.site .links > a:not(.btn),nav.site .links .ndt{font:600 22px/1.2 var(--disp,var(--sans));letter-spacing:-.02em;color:var(--ink);
    min-height:60px;padding:0;display:flex;align-items:center;border-bottom:1px solid var(--line)}
  nav.site .links > a.on{color:var(--ink)}
  nav.site .links .ndt{cursor:default;pointer-events:none;color:var(--mute);font-size:13px;font-family:var(--sans);
    font-weight:600;letter-spacing:.08em;text-transform:uppercase;min-height:0;padding:22px 0 6px;border-bottom:0}
  nav.site .links .ndm{padding:0;gap:0}
  nav.site .links .ndm a{min-height:60px;padding:0;border:0;border-bottom:1px solid var(--line);border-radius:0;display:flex;align-items:center}
  nav.site .links .ndm a b{font:600 22px/1.2 var(--disp,var(--sans));letter-spacing:-.02em}
  nav.site .links .navcta{display:flex !important;margin:28px 0 0 !important;width:100%;min-height:56px;color:#fff !important;font-size:14px}
  body:has(nav.site.open){overflow:hidden}
  body:has(nav.site.open) .stickybar{display:none}
  nav.site .menubtn{min-height:44px;min-width:72px}

  /* The bar at the bottom keeps clear of the phone's own home indicator. */
  .stickybar{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  body{padding-bottom:env(safe-area-inset-bottom)}
}

/* ══ PHIL'S REVIEW (2026-10-03; Peter: "fix all") ══════════════════════════════════════════════════
   Each block names the issue it answers in Phil's list. */
@media (max-width:720px){
  /* #11 — the dark hero filled the whole first screen; no product until a scroll. Tighter, and the
     reassurance line moves under the product (index.artifact.html .hint-under), so the picture starts
     on the first screen. */
  .ds-hero{padding-top:10px}
  .ds-panel.ink{padding:26px 20px 24px}
  .ds-panel.ink .eyebrow{margin-bottom:10px}
  .ds-panel.ink h1{font-size:34px;margin-bottom:12px}
  .ds-panel.ink .lead{font-size:16px;line-height:1.5}
  .ds-panel.ink .ctas{margin-top:20px;gap:8px}
  .ds-panel.ink .ctas .btn{min-height:48px}
  .ds-hero .ds-panel.ink .hint{display:none}

  /* #7 — the hero shows a conversation, not an empty inbox: on a phone, the thread itself (the lead's
     question and the assistant's reply), cut from shots/walk-answered.jpg (1,800 x 1,238; the thread
     runs from x 770 to 1,420 and y 300 to 760). A tap still opens the whole screen. */
  .crop.thread{overflow:hidden;aspect-ratio:4/2.9}
  .crop.thread img{width:268% !important;max-width:none !important;height:auto !important;aspect-ratio:auto !important;
    margin-left:-112%;margin-top:-42%;display:block}

  /* #12 — the page's second bar scrolls sideways, and nothing said so. A fade with an arrow at its right
     edge says there is more; the last word scrolls clear of it. (A mask on the bar itself would also
     fade the "Inside the product" menu that opens under it, so the fade is drawn over it instead.) */
  .subnav{position:relative}
  .subnav::after{content:"";position:absolute;right:0;top:0;height:48px;width:52px;pointer-events:none;z-index:2;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111318' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") right 12px center/14px no-repeat,
      linear-gradient(90deg,rgba(255,255,255,0),#fff 55%)}
  .subnav .wrap{padding-right:60px}

  /* #13 and #14 — a film of the app gets the same treatment as every screenshot on a phone: the room
     itself, past the app's menu, at a size its words can be read (236% of the box, from 43% in). The
     chapter names sit UNDER the picture in rows that wrap, never cut off, each a 44px target (#19). */
  .ds-film{min-height:0 !important;height:auto;aspect-ratio:auto;padding-top:88vw;display:flex;flex-direction:column;overflow:hidden}
  .ds-film video,.ds-film img.poster{top:0;left:-43% !important;right:auto;bottom:auto;width:236% !important;max-width:none !important;height:auto !important;
    object-fit:fill !important;object-position:left top !important}
  .ds-pills{position:static !important;flex-wrap:wrap !important;overflow:visible !important;gap:6px;padding:10px 12px 12px;
    background:var(--paper-2,#f3f1ec);position:relative;z-index:3}
  .ds-pills button{height:44px !important;background:#fff;color:var(--ink);border:1px solid var(--line);font-size:12.5px}
  .ds-pills button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
  .ds-pills button.done{background:#fff}
  .dm-film.ds-film{padding-top:96vw}

  /* #15 — the Services comparison was four columns squeezed into a phone: one word per line, Housecall
     Pro cut off. Each row becomes a card with Tenean and each rival inside it. */
  .vswrap{overflow:visible}
  .vswrap table.vs2,.vswrap .vs2 tbody,.vswrap .vs2 tr,.vswrap .vs2 td{display:block;width:auto}
  .vswrap .vs2{background:transparent;border-radius:0;overflow:visible;margin-top:20px}
  .vswrap .vs2 thead{display:none}
  .vswrap .vs2 tr{background:#fff;border:1px solid var(--line);border-radius:16px;padding:6px 16px 10px;margin-bottom:12px}
  .vswrap .vs2 td{border:0;padding:8px 0;display:grid;grid-template-columns:104px minmax(0,1fr);gap:12px;font-size:15px;line-height:1.45}
  .vswrap .vs2 td:first-child{display:block;width:auto;font:600 17px/1.3 var(--disp,var(--sans));letter-spacing:-.01em;padding:10px 0 6px;border-bottom:1px solid var(--line);margin-bottom:4px}
  .vswrap .vs2 td.us{background:transparent}
  .vswrap .vs2 td:nth-child(2)::before{content:"Tenean";font-weight:700;color:var(--coral-t,#d13a26)}
  .vswrap .vs2 td:nth-child(3)::before{content:"Jobber";font-weight:700;color:var(--ink)}
  .vswrap .vs2 td:nth-child(4)::before{content:"Housecall Pro";font-weight:700;color:var(--ink)}

  /* #18 — the diagnostic in the phone menu, as the second door just above the booking button: an outline
     button, so it does not read as one more page under Company. */
  nav.site .links > a.mdiag{margin-top:28px;justify-content:center;border:1.5px solid var(--ink);border-radius:999px;min-height:56px;
    font:700 14px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase}
  nav.site .links .mdiag + .navcta{margin-top:10px !important}

  /* #19 — the footer's "X" link was 9px wide. Every link in the Follow row is at least 44 x 44. */
  footer .cols>div:last-child a{min-width:44px;justify-content:center}
}