/* Homepage stylesheet (index.html only). Other pages keep styles.css. */
:root {
  --green: #107c41;
  --green-dark: #0b5c2f;
  --mint: #e6f4ea;
  --grey: #f1f3f4;
  --ink: #202124;
  --muted: #5f6368;
  --line: #e7e9eb;
  --bezel: #111;
  --max: 1120px;
}

@font-face { font-family: "Open Sans"; src: url("assets/fonts/OpenSans-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("assets/fonts/OpenSans-Semibold.ttf") format("truetype"); font-weight: 600; font-display: swap; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink); background: #fff; line-height: 1.5; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
.wrap { width: min(var(--max), 100% - 40px); margin: 0 auto; }
.center { text-align: center; }
.h2 { font-size: clamp(28px, 3.2vw, 40px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.fine { font-size: 16px; color: var(--muted); }

/* Buttons and links */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 26px; border-radius: 24px; font-weight: 600; font-size: 15px; background: var(--green); color: #fff; white-space: nowrap; transition: background 0.15s ease; }
.btn:hover { background: var(--green-dark); }

/* Header */
.site-header { background: #fff; }
.site-header .wrap { display: flex; align-items: center; gap: 26px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 19px; white-space: nowrap; }
.brand img { width: 32px; height: 32px; border-radius: 8px; }
.nav { display: flex; align-items: center; gap: 26px; margin-left: auto; font-size: 14px; color: var(--muted); }
.nav a:hover { color: var(--green); }
.nav a.signin { color: var(--green); font-weight: 600; }
.nav-toggle { display: none; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 18px; }

/* The AI line above the headline: "New" in green, the rest grey, a click scrolls to Just ask. Take it away once the AI is not new. */
.new { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 14px; color: var(--muted); }
.new em { font-style: normal; font-weight: 600; color: var(--green); }
.new i { font-style: normal; color: var(--green); }
.new:hover span { color: var(--ink); }

/* Hero: one line, the plan line, one button, the store doors, then the counter. The headline grows with the width and the counter with the height, so the whole hero sits on the first screen of a 1366 × 768 monitor and fills a MacBook Pro. */
.hero { padding: 34px 0 0; }
.hero h1 { font-size: clamp(32px, 3vw, 54px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.08; }
.hero h1 em { font-style: normal; color: var(--green); }
.fine { margin-top: 10px; }
.cta { display: flex; justify-content: center; align-items: center; margin-top: 18px; }

/* Where it runs: one grey line under the button, the logo and one word, no borders. Start free already goes to the visitor's own device, so none of these is a button. */
.doors { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 22px; margin-top: 14px; }
.door { display: inline-flex; align-items: center; gap: 6px; height: 32px; font-size: 14px; color: var(--muted); line-height: 1; transition: color 0.15s ease; }
.door svg { width: 16px; height: 16px; flex: none; }
.door:hover { color: var(--green); }

/* The kind of business: one quiet line of words under where it runs; the chosen one green and underlined. More › goes to every trade by name. */
.trades { display: flex; justify-content: center; align-items: center; gap: 2px 26px; margin-top: 16px; }
.trades button, .trades .more { font: inherit; font-size: 15px; color: var(--muted); background: none; border: 0; border-bottom: 2px solid transparent; padding: 4px 0 5px; cursor: pointer; white-space: nowrap; transition: color 0.15s ease; }
.trades button:hover, .trades .more:hover { color: var(--green); }
.trades button[aria-pressed="true"] { color: var(--green); font-weight: 600; border-bottom-color: var(--green); }
.trades .more { color: #86868b; }

/* The counter. Each scene is drawn at a fixed size (data-w × data-h) and scaled by script to fit. A switch of trade fades the pictures and the receipt. */
.scene { position: relative; width: 100%; margin-top: 18px; border-radius: 28px; background: #f7f8f7; overflow: hidden; }
.scene.desk { aspect-ratio: 1120 / 600; max-width: min(1120px, calc((100vh - 405px) * 1.85)); margin-left: auto; margin-right: auto; }
.scene .in img, .scene .paper { transition: opacity 0.22s ease; }
.scene.swap .in img, .scene.swap .paper { opacity: 0; }
.scene.ph { display: none; aspect-ratio: 716 / 640; border-radius: 22px; }
.design { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.scene.desk .design { width: 1120px; height: 600px; }
.scene.ph .design { width: 716px; height: 640px; }
.counter { position: absolute; left: 0; right: 0; bottom: 0; background: #eceeec; }
.edge { position: absolute; left: 0; right: 0; height: 14px; background: #dfe2df; }
.tab { position: absolute; background: var(--bezel); border-radius: 26px; padding: 14px; box-shadow: 0 26px 50px rgba(0, 0, 0, 0.22), 0 3px 8px rgba(0, 0, 0, 0.14); transform: perspective(1600px) rotateX(5deg); transform-origin: 50% 100%; }
.tab .in { aspect-ratio: 1800 / 1256; overflow: hidden; border-radius: 10px; background: #fff; }
.tab img { width: 100%; }
.wedge { position: absolute; background: linear-gradient(#8a9094, #5f6569); clip-path: polygon(0 100%, 10% 0, 90% 0, 100% 100%); }
.printer { position: absolute; }
.printer .body { position: relative; background: linear-gradient(#45494c 0, #45494c 26px, #2b2e30 26px); border-radius: 14px; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18); }
.printer .body::before { content: ""; position: absolute; left: 14%; right: 14%; top: 10px; height: 5px; border-radius: 3px; background: #17191a; }
.printer .body::after { content: ""; position: absolute; right: 16px; bottom: 14px; width: 9px; height: 9px; border-radius: 5px; background: #5fd38d; }
.printer .paper { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; background: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14); font-family: Menlo, "Courier New", monospace; color: #222; clip-path: polygon(0 6px, 4% 0, 8% 6px, 12% 0, 16% 6px, 20% 0, 24% 6px, 28% 0, 32% 6px, 36% 0, 40% 6px, 44% 0, 48% 6px, 52% 0, 56% 6px, 60% 0, 64% 6px, 68% 0, 72% 6px, 76% 0, 80% 6px, 84% 0, 88% 6px, 92% 0, 96% 6px, 100% 0, 100% 100%, 0 100%); }
.paper .c { text-align: center; }
.paper .l { display: flex; justify-content: space-between; gap: 6px; }
.paper .dash { border-top: 1px dashed #999; margin: 5px 0; }
.paper .bd { font-weight: 700; }
.phone { position: absolute; background: var(--bezel); border-radius: 20px; padding: 5px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18); }
.phone .in { overflow: hidden; border-radius: 16px; background: #fff; }
.phone img { width: 100%; }
/* desktop composition */
.desk .counter { top: 470px; }
.desk .edge { top: 470px; }
.desk .tab { left: 70px; top: 44px; width: 560px; }
.desk .wedge { left: 230px; top: 440px; width: 240px; height: 32px; }
.desk .printer { left: 680px; top: 322px; width: 190px; }
.desk .printer .body { height: 148px; }
.desk .printer .paper { width: 140px; bottom: 136px; padding: 14px 10px 10px; font-size: 8.5px; line-height: 1.45; }
.desk .phone { left: 920px; top: 140px; width: 154px; border-radius: 34px; padding: 8px; }
.desk .phone .in { height: 318px; border-radius: 26px; }
/* phone composition, drawn at 2× */
.ph .counter { top: 524px; }
.ph .edge { top: 524px; }
.ph .tab { left: 20px; top: 130px; width: 490px; }
.ph .wedge { left: 169px; top: 480px; width: 192px; height: 44px; }
.ph .phone { left: 538px; top: 168px; width: 156px; border-radius: 36px; padding: 8px; }
.ph .phone .in { height: 340px; border-radius: 28px; }

/* Just ask: the real AI tab on a phone, with two more questions beside it on a computer */
#ask { padding-top: 88px; scroll-margin-top: 24px; }
.kick { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green); margin-bottom: 8px; }
.stage { position: relative; display: flex; justify-content: center; align-items: center; gap: 56px; margin-top: 40px; }
.say { width: 260px; text-align: left; font-size: 13px; color: var(--muted); }
.say.left { margin-bottom: 120px; }
.say.right { margin-top: 140px; text-align: right; }
.say .q { display: inline-block; margin-bottom: 9px; padding: 11px 15px; border: 1px solid var(--line); border-radius: 18px 18px 4px 18px; background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07); font-size: 15px; color: var(--ink); }
.say .mic { width: 18px; height: 18px; margin-right: 8px; vertical-align: -3px; color: var(--muted); }
.say b { font-weight: 600; color: var(--ink); }
.ask-phone { flex: none; width: 250px; padding: 8px; border-radius: 38px; background: var(--bezel); box-shadow: 0 26px 50px rgba(0, 0, 0, 0.18); }
.ask-phone .in { overflow: hidden; border-radius: 30px; background: #fff; }
.ask-phone img { width: 100%; }

/* Every trade by name: plain words in hairline boxes. The four with a counter of their own show it in the hero when tapped. */
#trades { padding-top: 88px; scroll-margin-top: 24px; }
.kinds { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; max-width: 880px; margin: 36px auto 0; }
.kinds > * { display: flex; align-items: center; justify-content: center; min-height: 64px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; font: inherit; font-size: 16px; font-weight: 600; color: var(--ink); text-align: center; }
.kinds button { cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; }
.kinds button:hover { border-color: var(--green); color: var(--green); }

/* The four words under the counter */
#inside { padding-top: 72px; }
.four { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.tile { display: block; text-align: center; }
.tile b { display: block; font-size: 22px; font-weight: 600; }
.tile small { display: block; margin-top: 4px; font-size: 15px; color: var(--muted); }
.tile:hover b { color: var(--green); }

/* Footer */
.site-footer { margin-top: 72px; padding: 24px 0 32px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.site-footer .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.site-footer .brand { font-size: 15px; }
.site-footer .brand img { width: 24px; height: 24px; border-radius: 6px; }
.site-footer nav { display: flex; gap: 22px; margin-left: auto; }
.site-footer nav a:hover { color: var(--green); }

/* Responsive */
@media (max-width: 1000px) {
  .four { grid-template-columns: repeat(2, 1fr); }
  .say { display: none; }
}
@media (max-width: 760px) {
  html { scroll-behavior: auto; }
  .site-header .wrap { gap: 10px; }
  .brand { font-size: 17px; gap: 8px; }
  .brand img { width: 28px; height: 28px; }
  .nav { display: none; }
  .nav-toggle { display: block; margin-left: auto; }
  .site-header.open .nav { display: flex; position: absolute; top: 64px; left: 0; right: 0; z-index: 30; flex-direction: column; align-items: stretch; gap: 0; background: #fff; border-bottom: 1px solid var(--line); padding: 8px 20px 16px; }
  .site-header.open .nav a { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .site-header.open .nav a:last-child { border: 0; }
  .hero h1 em { display: block; }
  .fine { font-size: 14px; }
  .cta .btn { width: 100%; }
  .new { font-size: 13px; }
  .long { display: none; }
  .doors { gap: 2px 14px; margin-top: 12px; }
  .door { font-size: 13px; gap: 5px; }
  .door svg { width: 15px; height: 15px; }
  #ask { padding-top: 56px; }
  .stage { margin-top: 28px; }
  .say { display: none; }
  .scene.desk { display: none; }
  .scene.ph { display: block; margin-top: 22px; max-width: none; }
  .trades { justify-content: flex-start; gap: 2px 20px; margin: 14px -20px 0; padding: 0 20px; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
  .trades::-webkit-scrollbar { display: none; }
  .trades button, .trades .more { font-size: 14px; }
  #trades { padding-top: 56px; }
  .kinds { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 24px; }
  .kinds > * { min-height: 56px; font-size: 15px; }
  #inside { padding-top: 36px; }
  .four { gap: 22px 12px; }
  .tile b { font-size: 18px; }
  .tile small { font-size: 13px; }
  .site-footer { margin-top: 48px; }
  .site-footer nav { margin-left: 0; flex-wrap: wrap; gap: 14px; }
}