@charset "utf-8";

:root {
  --ink: #17181d;
  --muted: #696b73;
  --bg: #f5f2eb;
  --surface: #fff;
  --soft: #e9e6df;
  --accent: #6b64e8;
  --accent-2: #ff8a64;
  --line: rgba(23, 24, 29, 0.17);
}

body.theme-yomikau { --bg: #fff4ec; --surface: #fffaf6; --soft: #ffd8c4; --accent: #e96f45; --accent-2: #269c70; }
body.theme-revmeter { --ink: #f7f7f8; --muted: #adaeb4; --bg: #101114; --surface: #191a1f; --soft: #2b2522; --accent: #ff9547; --accent-2: #ff4d4d; --line: rgba(255,255,255,.16); }
body.theme-neoneq { --ink: #f9f8ff; --muted: #aba8b8; --bg: #080b18; --surface: #11152a; --soft: #1c1632; --accent: #37d7ed; --accent-2: #e949da; --line: rgba(255,255,255,.15); }
body.theme-agentgauge { --ink: #16212e; --muted: #66717d; --bg: #edf2f5; --surface: #fff; --soft: #dce9f2; --accent: #258cd5; --accent-2: #ed8152; }
body.theme-salon { --ink: #352731; --muted: #786c73; --bg: #fff8f8; --surface: #fff; --soft: #f9dce9; --accent: #d75b91; --accent-2: #ee9c5c; }
body.theme-kintai { --ink: #183047; --muted: #667887; --bg: #f2f7f5; --surface: #fff; --soft: #dcece5; --accent: #278866; --accent-2: #d5dd62; }
body.theme-releasepilot { --ink: #172438; --muted: #667386; --bg: #f3f7fb; --surface: #fff; --soft: #dbeaff; --accent: #2d72d7; --accent-2: #f19b4a; }
body.theme-buta { --ink: #5a382e; --muted: #866c64; --bg: #fff4ed; --surface: #fff; --soft: #ffd8ce; --accent: #d86f70; --accent-2: #7a9b65; }
body.theme-totte { --ink: #223046; --muted: #687485; --bg: #f8f6ef; --surface: #fff; --soft: #dceeff; --accent: #358bd4; --accent-2: #e8bd46; }
body.theme-taskmate { --ink: #f7f8fb; --muted: #afb8c7; --bg: #0b1932; --surface: #132545; --soft: #213a62; --accent: #62a7ff; --accent-2: #ffae3d; --line: rgba(255,255,255,.17); }

body { background: var(--bg); color: var(--ink); line-height: 1.8; }
::selection { background: var(--accent); color: #fff; }

.site-nav { position: absolute; z-index: 100; top: 0; right: 0; left: 0; display: flex; min-height: 76px; align-items: center; justify-content: space-between; gap: 28px; padding: 16px clamp(20px, 4vw, 64px); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; font-size: .9rem; font-weight: 700; letter-spacing: .04em; }
.brand-mark { display: grid; width: 36px; height: 36px; place-items: center; background: var(--ink); color: var(--bg); }
.brand i { opacity: .34; font-style: normal; }
.brand strong { color: var(--accent); }
.site-nav nav { display: flex; align-items: center; gap: clamp(17px,2.6vw,38px); }
.site-nav nav a { font-size: .76rem; font-weight: 700; letter-spacing: .05em; }
.site-nav .nav-download { padding: 9px 13px; border: 1px solid currentColor; }

.hero { position: relative; display: grid; min-height: 100svh; grid-template-columns: minmax(350px,.86fr) minmax(520px,1.14fr); align-items: center; gap: clamp(36px,6vw,96px); overflow: hidden; padding: 118px clamp(20px,5vw,72px) 72px; background: var(--bg); }
.hero-copy { position: relative; z-index: 4; max-width: 650px; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; color: var(--accent); font-size: .71rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow span { width: 24px; height: 2px; background: currentColor; }
.hero h1 { margin: 0; font-size: clamp(2.4rem,3.3vw,4.2rem); font-weight: 700; letter-spacing: -.065em; line-height: 1.12; }
.hero h1 em { color: var(--accent); font-style: normal; }
.hero-lead { max-width: 610px; margin: 30px 0 0; color: var(--muted); font-size: clamp(.98rem,1.25vw,1.1rem); line-height: 2; }
.hero-actions,.download-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-actions { margin-top: 30px; }
.button { display: inline-flex; min-height: 50px; align-items: center; justify-content: space-between; gap: 26px; padding: 0 18px; border: 1px solid var(--ink); font-size: .82rem; font-weight: 700; transition: transform .18s ease,background .18s ease,color .18s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.button-outline { background: transparent; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 12px 24px; margin: 34px 0 0; padding: 0; color: var(--muted); font-size: .74rem; list-style: none; }
.hero-facts li { display: flex; gap: 8px; align-items: center; }
.hero-facts span { color: var(--accent); font-weight: 800; }

.hero-grid,.cube-backdrop,.visual-word,.scroll-cue,.download-cubes { display: none; }
.hero-visual { position: relative; min-height: min(72vh,700px); align-self: stretch; }
.hero-visual::before { position: absolute; inset: 6% 2% 3% 8%; border-radius: 46% 54% 12px 12px; background: var(--soft); content: ""; }
.phone { position: absolute; z-index: 3; overflow: hidden; width: clamp(155px,17vw,255px); padding: 7px; border: 1px solid var(--line); border-radius: 31px; background: #15171d; box-shadow: 0 28px 60px rgba(16,20,30,.22); }
.phone img { width: 100%; border-radius: 24px; }
.phone-main { z-index: 5; top: 7%; left: 36%; }
.phone-left { top: 25%; left: 4%; width: clamp(130px,14vw,210px); }
.phone-right { top: 23%; right: 0; width: clamp(135px,14.5vw,220px); }
.desktop-showcase { position: absolute; z-index: 4; inset: 17% 5% auto 4%; display: grid; min-height: 54%; place-items: center; padding: clamp(16px,2.6vw,34px); border: 1px solid var(--line); border-radius: 24px; background: var(--surface); box-shadow: 0 32px 80px rgba(0,0,0,.22); }
.desktop-showcase img { width: 100%; max-height: 54vh; object-fit: contain; }
.hero-product-icon { position: absolute; z-index: 4; top: 18%; left: 23%; width: min(52%,340px); border-radius: 24%; box-shadow: 0 32px 80px rgba(21,31,50,.2); }
.app-badge { display: none; }
.app-badge img { width: 56px; height: 56px; border-radius: 22%; }
.app-badge small { display: block; margin-top: 2px; color: var(--muted); font-size: .58rem; letter-spacing: .08em; }

.section { position: relative; padding: clamp(88px,10vw,145px) clamp(20px,5vw,72px); }
.section-shell { width: 100%; max-width: 1320px; margin: 0 auto; }
.section-index,.privacy-label { margin: 0; color: var(--accent); font-size: .74rem; font-weight: 800; letter-spacing: .1em; }
.split-heading { display: grid; grid-template-columns: minmax(130px,.28fr) 1fr; gap: 38px; }
.split-heading > div { display: grid; grid-template-columns: .9fr .7fr; gap: clamp(36px,7vw,100px); align-items: end; }
.split-heading h2,.feature-heading h2,.screens-heading h2,.download h2,.privacy h2 { margin: 0; font-size: clamp(1.8rem,3vw,3.2rem); font-weight: 700; letter-spacing: -.045em; line-height: 1.25; }
.split-heading h2 span,.feature-heading h2 span,.screens-heading h2 span,.download h2 span { color: var(--accent); }
.split-heading > div > p { margin: 0; color: var(--muted); line-height: 2; }

.decision-flow { margin-top: clamp(55px,7vw,90px); border-top: 1px solid var(--line); }
.decision-flow article { display: grid; grid-template-columns: 55px minmax(80px,.22fr) minmax(180px,.68fr) minmax(240px,1fr); gap: clamp(16px,3vw,48px); align-items: start; min-height: auto; padding: 30px 0; border-bottom: 1px solid var(--line); }
.decision-flow article > span { color: var(--accent); font-size: .8rem; font-weight: 800; }
.flow-en,.feature-label { margin: 4px 0 0; color: var(--accent); font-size: .68rem; font-weight: 800; letter-spacing: .12em; }
.decision-flow h3 { margin: 0; font-size: clamp(1.25rem,1.8vw,1.85rem); line-height: 1.45; }
.decision-flow article > p:last-child { max-width: 560px; margin: 0; color: var(--muted); line-height: 1.9; }

.features { background: var(--surface); }
.feature-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; padding-bottom: 38px; border-bottom: 1px solid var(--line); }
.feature-list article { display: grid; grid-template-columns: 80px .7fr 1fr; gap: clamp(24px,5vw,75px); align-items: center; min-height: 170px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.feature-number { color: var(--accent); font-size: .8rem; font-weight: 800; }
.feature-list h3 { margin: 0; font-size: clamp(1.25rem,1.8vw,1.8rem); }
.feature-list article > p { margin: 0; color: var(--muted); line-height: 1.9; }

.screens { overflow: hidden; background: var(--soft); color: var(--ink); }
.screens-heading { display: grid; grid-template-columns: 1fr .6fr; gap: clamp(36px,7vw,90px); align-items: end; }
.screens-heading .section-index { margin-bottom: 17px; }
.screens-heading > p { margin: 0; color: var(--muted); line-height: 2; }
.screen-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(18px,3vw,38px); margin-top: clamp(55px,7vw,90px); }
.screen-grid.one { grid-template-columns: minmax(0,900px); justify-content: center; }
.screen-grid.four,.screen-grid.catalog { grid-template-columns: repeat(4,1fr); }
.screen-grid figure { margin: 0; }
.screen-frame { overflow: hidden; padding: clamp(8px,1.2vw,15px); border: 1px solid var(--line); border-radius: 30px; background: #15171d; box-shadow: 0 22px 50px rgba(18,25,35,.18); }
.screen-frame img { width: 100%; border-radius: 23px; }
.screen-frame.ad-covered { position: relative; }
.screen-frame.ad-covered::after { position: absolute; right: clamp(6px,1.2vw,15px); bottom: clamp(6px,1.2vw,15px); left: clamp(6px,1.2vw,15px); height: 8.2%; border-radius: 0 0 23px 23px; background: #f2f2f2; content: ""; }
.screen-grid figcaption { display: flex; gap: 12px; margin-top: 17px; }
.screen-grid figcaption > span { color: var(--accent); font-size: .75rem; font-weight: 800; }
.screen-grid figcaption b,.screen-grid figcaption small { display: block; }
.screen-grid figcaption b { font-size: .9rem; }
.screen-grid figcaption small { margin-top: 2px; color: var(--muted); font-size: .64rem; letter-spacing: .08em; }

.privacy { padding-top: clamp(58px,7vw,90px); padding-bottom: clamp(58px,7vw,90px); background: var(--surface); }
.privacy-panel { display: grid; grid-template-columns: .3fr 1fr auto; gap: clamp(28px,5vw,70px); align-items: center; padding: clamp(30px,4vw,55px); border: 1px solid var(--line); }
.privacy h2 { font-size: clamp(1.45rem,2.1vw,2.2rem); }
.privacy-panel > div > p { margin: 14px 0 0; color: var(--muted); }
.privacy-panel > a { padding-bottom: 4px; border-bottom: 1px solid currentColor; font-size: .78rem; font-weight: 700; }

.download { background: var(--bg); }
.download-inner { display: grid; grid-template-columns: auto 1fr auto; gap: clamp(30px,6vw,85px); align-items: center; }
.download-inner > img { width: clamp(105px,12vw,170px); border-radius: 24%; box-shadow: 0 22px 50px rgba(0,0,0,.14); }
.download .section-index { margin-bottom: 16px; }
.download h2 { font-size: clamp(1.8rem,2.8vw,3rem); }
.download-inner > div > p:last-child { margin: 18px 0 0; color: var(--muted); }
.download-actions { max-width: 250px; flex-direction: column; }
.download-actions .button { width: 100%; }

footer { padding: 25px clamp(20px,4vw,64px); background: #0d0e11; color: #85878d; font-size: .72rem; }
footer > div { display: flex; justify-content: space-between; gap: 20px; }
.template-credit { display: none; }

/* Mac utilities: the product window is the hero, not decoration. */
.theme-revmeter .hero,.theme-neoneq .hero { background: var(--bg); }
.theme-revmeter .desktop-showcase,.theme-neoneq .desktop-showcase { border-color: rgba(255,255,255,.14); background: #0a0b0e; }
.theme-revmeter .hero-visual::before { border-radius: 50%; background: radial-gradient(circle,#49251e 0,#18191e 62%); }
.theme-revmeter .decision-flow { display: grid; grid-template-columns: repeat(3,1fr); border-left: 1px solid var(--line); }
.theme-revmeter .decision-flow article { display: block; padding: 34px; border-right: 1px solid var(--line); }
.theme-revmeter .decision-flow article > span { display: block; margin-bottom: 50px; }
.theme-revmeter .decision-flow h3 { margin-top: 9px; }
.theme-revmeter .decision-flow article > p:last-child { margin-top: 17px; }
.theme-revmeter .screens { background: #f0a13d; color: #17181d; }
.theme-revmeter .screens .section-index,.theme-revmeter .screens-heading h2 span,.theme-revmeter .screen-grid figcaption > span { color: #4b2612; }
.theme-revmeter .screens-heading > p,.theme-revmeter .screen-grid figcaption small { color: #56391f; }

.theme-neoneq .hero { display: flex; min-height: auto; flex-direction: column; align-items: stretch; padding-top: 140px; text-align: center; }
.theme-neoneq .hero-copy { max-width: 820px; margin: 0 auto; }
.theme-neoneq .eyebrow,.theme-neoneq .hero-actions,.theme-neoneq .hero-facts { justify-content: center; }
.theme-neoneq .hero-lead { margin-right: auto; margin-left: auto; }
.theme-neoneq .hero-facts { display: none; }
.theme-neoneq .hero-visual { min-height: 420px; margin-top: 35px; }
.theme-neoneq .hero-visual::before { inset: 0; border-radius: 30px; background: radial-gradient(circle at 50% 65%,rgba(233,73,218,.22),transparent 50%),linear-gradient(135deg,#11172c,#090b17); }
.theme-neoneq .desktop-showcase { inset: 15% 14% auto; min-height: 48%; background: rgba(7,9,18,.8); box-shadow: 0 25px 90px rgba(55,215,237,.12); }
.theme-neoneq .desktop-showcase img { image-rendering: auto; }
.theme-neoneq .decision-flow article { grid-template-columns: 55px minmax(80px,.22fr) minmax(180px,.68fr) minmax(240px,1fr); }
.theme-neoneq .screens { background: linear-gradient(135deg,#24cbe8,#da45d0); color: #07101a; }
.theme-neoneq .screens-heading > p,.theme-neoneq .screen-grid figcaption small { color: #28304b; }

.theme-agentgauge .hero-visual::before { border-radius: 28px; background: linear-gradient(145deg,#cce9f6,#f4e2d7); }
.theme-agentgauge .desktop-showcase { inset: 16% 12% auto 10%; min-height: 48%; }
.theme-agentgauge .decision-flow { display: grid; grid-template-columns: 1.1fr .9fr .9fr; gap: 14px; border: 0; }
.theme-agentgauge .decision-flow article { display: block; padding: 30px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.theme-agentgauge .decision-flow article:first-child { background: var(--soft); }
.theme-agentgauge .decision-flow article > span { display: block; margin-bottom: 45px; }
.theme-agentgauge .decision-flow h3 { margin-top: 8px; }
.theme-agentgauge .decision-flow article > p:last-child { margin-top: 16px; }
.theme-agentgauge .screens { background: #dce9f2; }

/* Work tools use calmer, more literal layouts. */
.theme-salon .hero-visual::before { border-radius: 50% 50% 18px 18px; background: #f7d9e5; }
.theme-salon .phone { border-color: #ebc4d3; background: #fff; }
.theme-salon .decision-flow article,.theme-kintai .decision-flow article { grid-template-columns: 55px minmax(80px,.22fr) minmax(180px,.68fr) minmax(240px,1fr); }
.theme-salon .screens { background: #f6dae6; }
.theme-salon .hero-facts { display: none; }
.theme-kintai .hero { background: linear-gradient(110deg,#f2f7f5 0 58%,#dcece5 58%); }
.theme-kintai .hero-visual::before { background: #c9ded6; }
.theme-kintai .screens { background: #dfe9a3; }

.theme-releasepilot .hero { background: linear-gradient(150deg,#f3f7fb 0 64%,#dbeaff 64%); }
.theme-releasepilot .hero-facts { display: none; }
.theme-releasepilot .hero-visual::before { border-radius: 32px; background: linear-gradient(145deg,#dbeaff,#fff0df); }
.theme-releasepilot .decision-flow { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; border: 0; }
.theme-releasepilot .decision-flow article { position: relative; display: block; min-height: 360px; padding: 30px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.theme-releasepilot .decision-flow article > span { display: block; margin-bottom: 70px; }
.theme-releasepilot .decision-flow h3 { margin-top: 8px; }
.theme-releasepilot .decision-flow article > p:last-child { margin-top: 18px; }
.theme-releasepilot .privacy { background: var(--soft); }

/* Everyday apps inherit the character of their icons. */
.theme-buta .hero-visual::before { border-radius: 44% 56% 48% 52%; background: #ffcfc2; }
.theme-buta .hero-facts { display: none; }
.theme-buta .phone { background: #fff; }
.theme-buta .decision-flow article { grid-template-columns: 55px minmax(80px,.22fr) minmax(180px,.68fr) minmax(240px,1fr); }
.theme-buta .screens { background: #ffd7c8; }
.theme-buta .screen-grid.catalog { grid-template-columns: repeat(4,1fr); }

.theme-totte .hero { background-image: repeating-linear-gradient(0deg,transparent 0,transparent 43px,rgba(53,139,212,.09) 44px); }
.theme-totte .hero-facts { display: none; }
.theme-totte .hero-visual::before { border-radius: 8px; background: #fff; box-shadow: 10px 12px 0 #dceeff; transform: rotate(-2deg); }
.theme-totte .phone { background: #f8f8f8; }
.theme-totte .screens { background: #dceeff; }
.theme-totte .decision-flow article { grid-template-columns: 55px minmax(80px,.22fr) minmax(180px,.68fr) minmax(240px,1fr); }

.theme-taskmate .site-nav { color: #fff; }
.theme-taskmate .brand-mark { background: #fff; color: #0b1932; }
.theme-taskmate .hero { background: linear-gradient(145deg,#0b1932,#132545); }
.theme-taskmate .hero-visual::before { border-radius: 22px; background: #213a62; }
.theme-taskmate .phone { border-color: rgba(255,255,255,.25); background: #070f20; }
.theme-taskmate .screens { background: #62a7ff; color: #0b1932; }
.theme-taskmate .screens-heading > p,.theme-taskmate .screen-grid figcaption small { color: #203a61; }
.theme-taskmate .privacy { background: #f4f6f9; color: #172238; }
.theme-taskmate .privacy-panel { --line: rgba(23,34,56,.17); }
.theme-taskmate .download { background: #0b1932; }

/* Yomikau is an editorial buying guide rather than another app showcase. */
.theme-yomikau .hero { background: linear-gradient(112deg,#fff4ec 0 58%,#ffd8c4 58%); }
.theme-yomikau .hero-visual::before { border-radius: 50%; background: #f6ad86; }
.theme-yomikau .phone { background: #fff; }
.theme-yomikau .decision-flow article { grid-template-columns: 55px minmax(80px,.22fr) minmax(180px,.68fr) minmax(240px,1fr); gap: clamp(16px,3vw,48px); }
.theme-yomikau .features { background: #fffaf6; }
.theme-yomikau .screens { background: #ffd8c4; }

@media (max-width: 1080px) {
  .hero { grid-template-columns: minmax(310px,.82fr) minmax(430px,1.18fr); }
  .split-heading > div { grid-template-columns: 1fr; }
  .theme-agentgauge .decision-flow { grid-template-columns: 1fr; }
  .screen-grid.four,.screen-grid.catalog { grid-template-columns: repeat(3,1fr); }
  .privacy-panel { grid-template-columns: .3fr 1fr; }
  .privacy-panel > a { grid-column: 2; width: fit-content; }
  .download-inner { grid-template-columns: auto 1fr; }
  .download-actions { grid-column: 2; max-width: none; flex-direction: row; }
  .download-actions .button { width: auto; }
}

@media (max-width: 760px) {
  .site-nav { min-height: 66px; }
  .brand i,.brand strong,.site-nav nav a:not(.nav-download) { display: none; }
  .brand-mark { width: 34px; height: 34px; }
  .site-nav .nav-download { padding: 8px 10px; }
  .hero,.theme-neoneq .hero { display: block; min-height: auto; padding-top: 108px; text-align: left; }
  .theme-neoneq .eyebrow,.theme-neoneq .hero-actions,.theme-neoneq .hero-facts { justify-content: flex-start; }
  .hero h1 { font-size: clamp(2rem,8vw,3.1rem); }
  .hero-lead { margin-right: 0; margin-left: 0; }
  .hero-visual,.theme-neoneq .hero-visual { min-height: 540px; margin: 45px -20px 0; }
  .phone-main { left: 34%; width: min(54%,260px); }
  .phone-left { left: 4%; width: min(39%,190px); }
  .phone-right { right: -3%; width: min(40%,195px); }
  .desktop-showcase,.theme-neoneq .desktop-showcase { inset: 15% 6% auto; min-height: 45%; }
  .hero-product-icon { left: 24%; width: 52%; }
  .app-badge { right: 4%; }
  .split-heading,.split-heading > div,.screens-heading,.privacy-panel,.download-inner { grid-template-columns: 1fr; }
  .decision-flow article,.theme-neoneq .decision-flow article,.theme-salon .decision-flow article,.theme-kintai .decision-flow article,.theme-buta .decision-flow article,.theme-totte .decision-flow article,.theme-yomikau .decision-flow article { grid-template-columns: 45px 1fr; gap: 16px; }
  .decision-flow article .flow-en { display: none; }
  .decision-flow article > p:last-child { grid-column: 2; }
  .theme-revmeter .decision-flow,.theme-agentgauge .decision-flow,.theme-releasepilot .decision-flow { grid-template-columns: 1fr; }
  .theme-revmeter .decision-flow article,.theme-agentgauge .decision-flow article,.theme-releasepilot .decision-flow article { min-height: auto; }
  .theme-revmeter .decision-flow article > span,.theme-agentgauge .decision-flow article > span,.theme-releasepilot .decision-flow article > span { margin-bottom: 25px; }
  .feature-heading { display: block; }
  .feature-heading .section-index { margin-top: 14px; }
  .feature-list article { grid-template-columns: 45px 1fr; }
  .feature-list article > p { grid-column: 2; }
  .screen-grid,.screen-grid.four,.screen-grid.catalog { grid-template-columns: repeat(2,1fr); }
  .screen-grid.one { grid-template-columns: 1fr; }
  .privacy-panel > a,.download-actions { grid-column: 1; }
  .download-inner > img { width: 105px; }
  .download-actions { flex-direction: column; }
  .download-actions .button { width: 100%; }
  footer > div { flex-direction: column; }
}

@media (max-width: 460px) {
  .hero-visual,.theme-neoneq .hero-visual { min-height: 480px; }
  .hero-actions .button { width: 100%; }
  .screen-grid,.screen-grid.four,.screen-grid.catalog { grid-template-columns: 1fr 1fr; gap: 12px; }
  .screen-frame { padding: 6px; border-radius: 22px; }
  .screen-frame img { border-radius: 17px; }
  .screen-grid figcaption { gap: 7px; }
  .screen-grid figcaption b { font-size: .78rem; }
}