/*! Veriquest — Works unit.
    Shared by /works/ and the per-title pages /works/<slug>/.
    Depends on vq.css for tokens and for the nav/footer chrome. */

/* ═══════════════════════════════════════════════════════════════════════
   Veriquest Works — business unit page.

   The shell (tokens, nav, footer, canvases, motion) comes from vq.css. Only
   what is particular to this unit lives here. Works takes the blue middle of
   the brand gradient — which is also vq.css's default --acc, so the block
   below restates it rather than changing it: the page should not depend on
   the shell's choice of default staying put.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --acc:#4D9BFF;
  --acc-line:rgba(46,123,255,.5);
  --acc-glow:rgba(46,123,255,.18);
  /* Per-title art colour. Products re-point it; everything else inherits the
     house blue, so the catalogue furniture works inside and outside a card. */
  --tint:var(--acc);
}

/* ── Unit hero ─────────────────────────────────────────────────────── */
.u-hero{
  position:relative;overflow:hidden;background:transparent;
  padding:clamp(56px,8vh,104px) var(--pad) clamp(44px,6vh,80px);
}
.u-hero .shell{position:relative;z-index:2}
.u-hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(102deg,
    rgba(10,15,26,.66) 0%,rgba(10,15,26,.30) 24%,
    rgba(10,15,26,.06) 42%,transparent 56%);
}
.crumb{
  display:flex;align-items:center;gap:10px;margin:0 0 22px;
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-dim);
}
.crumb a{color:var(--ink-dim);transition:color .2s}
.crumb a:hover{color:var(--ink)}
.crumb span{color:var(--acc)}
.u-name{
  margin:0 0 clamp(14px,2vh,22px);position:relative;
  font-size:min(clamp(38px,7.2vw,98px),13.5vh);line-height:1.0;color:var(--ink);
}
.u-name b,.u-name em{font-family:'Fraunces',serif;font-weight:600;letter-spacing:-.026em}
.u-name em{
  font-style:normal;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.u-name::before{
  content:"";position:absolute;left:-6%;top:-26%;width:86%;height:154%;z-index:-1;
  pointer-events:none;
  background:radial-gradient(56% 52% at 36% 50%,
    rgba(46,123,255,.26) 0%,rgba(122,92,255,.13) 46%,transparent 74%);
  filter:blur(30px);
}
.u-sub{
  margin:0 0 clamp(18px,2.6vh,30px);
  font-family:'Schibsted Grotesk','Zen Kaku Gothic New',sans-serif;
  font-weight:800;font-size:min(clamp(21px,3.1vw,40px),5.4vh);line-height:1.2;
  letter-spacing:-.028em;color:var(--ink);text-wrap:balance;
}
.u-lede{margin:0 0 clamp(26px,3.4vh,40px);max-width:40em;
  font-size:clamp(14.5px,1.5vw,17px);line-height:1.95;color:var(--ink-mid)}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.btn{
  display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:15px;
  color:#06090F;background:var(--grad);border-radius:100px;padding:15px 28px;
  box-shadow:0 12px 38px rgba(46,123,255,.32);
  transition:filter .2s,transform .2s;
}
.btn:hover{filter:brightness(1.1);transform:translateY(-2px)}
.btn-ghost{
  display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-mid);
  border:1px solid var(--line-firm);border-radius:100px;padding:14px 24px;
  transition:color .2s,border-color .2s,background-color .2s;
}
.btn-ghost:hover{color:var(--ink);border-color:var(--acc-line);background:rgba(255,255,255,.04)}

/* ── Generic card grid ─────────────────────────────────────────────── */
.grid{display:grid;gap:clamp(14px,1.7vw,22px)}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,232px),1fr))}
.card{
  position:relative;background:rgba(255,255,255,.035);
  border:1px solid var(--line);border-radius:18px;
  padding:clamp(26px,2.7vw,36px) clamp(22px,2.3vw,30px);
  overflow:hidden;isolation:isolate;
  transition:transform .4s cubic-bezier(.2,.7,.2,1),border-color .4s,box-shadow .4s;
}
.card .rail{
  position:absolute;top:0;left:0;right:0;height:3px;
  background-image:var(--grad);background-size:300% 100%;
}
.card:hover{transform:translateY(-7px);border-color:var(--acc-line);
  box-shadow:0 24px 56px rgba(0,0,0,.5),0 0 40px var(--acc-glow)}
.card .idx{
  font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.12em;
  color:var(--acc);display:block;margin-bottom:16px;
}
.card h3{margin:0 0 12px;
  font-family:'Schibsted Grotesk','Zen Kaku Gothic New',sans-serif;
  font-weight:700;font-size:clamp(18px,2vw,23px);line-height:1.34;
  letter-spacing:-.018em;color:var(--ink)}
/* Kinsoku. Chrome's default breaks a heading like 「業務・DXソフトウェア」
   between ウ and ェ, dropping a small kana onto the next line; `strict`
   forbids it. Headings are where it shows, being the narrowest measure. */
h2,h3{line-break:strict}
.card p{margin:0;font-size:13.5px;line-height:1.9;color:var(--ink-mid)}

/* ── Product cards ─────────────────────────────────────────────────── */
/* Each title keeps the accent it already has in its own art (--tint). It is
   deliberately confined to the catalogue number, the pip and the media edge:
   the card chrome stays on the house blue, so three different palettes read
   as one shelf rather than three sites. */
.prod{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr);
  background:rgba(255,255,255,.03);border:1px solid var(--line);
  border-radius:18px;overflow:hidden;isolation:isolate;
  transition:border-color .4s,transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s;
}
.prod:hover{border-color:var(--acc-line);transform:translateY(-6px);
  box-shadow:0 26px 60px rgba(0,0,0,.5),0 0 40px var(--acc-glow)}
.prod-shot{position:relative;aspect-ratio:16/10;overflow:hidden;background:#080C14}
.prod-shot img{width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.prod:hover .prod-shot img{transform:scale(1.045)}
/* A portrait phone capture cropped to the same landscape frame as the others:
   pinned high, where the play field sits, instead of centred on empty board. */
.prod-shot--tall img{object-position:center 26%}
.prod-shot::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--tint),transparent);
}
.prod-body{padding:clamp(22px,2.4vw,30px);display:flex;flex-direction:column}
.prod-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.prod-icon{width:56px;height:56px;flex:none;border-radius:14px;
  border:1px solid var(--line);background:#0B1220}
.cat-no{
  display:flex;align-items:center;gap:8px;
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-dim);
}
.cat-no::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--tint);box-shadow:0 0 9px var(--tint)}
.prod h3{margin:6px 0 0;
  font-family:'Schibsted Grotesk','Zen Kaku Gothic New',sans-serif;
  font-weight:700;font-size:clamp(18px,2vw,24px);line-height:1.3;
  letter-spacing:-.018em;color:var(--ink)}
/* The Logica card is a .card, not a .prod, but wears the same title lockup. */
.prod-head h3{margin:6px 0 0}
.prod h3 small,.prod-head h3 small{display:block;margin-top:4px;font-size:.62em;
  font-weight:500;letter-spacing:0;color:var(--ink-dim)}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 14px;padding:0;list-style:none}
.chips li{font-size:11.5px;color:var(--ink-dim);background:rgba(255,255,255,.05);
  border:1px solid var(--line);border-radius:100px;padding:4px 11px}
/* The raw art colours are too dark to set 11px type on this ground (14番地's
   red lands near 3.9:1), so the chip lifts the hue toward white and leaves the
   pure tint to the pip and the media edge, where contrast is not a factor. */
.chips li.is-genre{
  color:color-mix(in srgb,var(--tint) 62%,#FFFFFF);
  border-color:color-mix(in srgb,var(--tint) 50%,transparent);
}
.prod p{margin:0 0 18px;font-size:13.5px;line-height:1.9;color:var(--ink-mid)}

/* Lead title — same card, two columns once there is room for them. */
@media (min-width:940px){
  .prod--lead{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);align-items:stretch}
  .prod--lead .prod-shot{aspect-ratio:auto;height:100%}
}
.flag{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  margin-bottom:12px;padding:5px 13px;border-radius:100px;
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.12em;
  color:#06090F;background:var(--grad);
}

/* ── Store buttons ─────────────────────────────────────────────────── */
.stores{display:flex;flex-wrap:wrap;gap:10px}
.store{
  display:inline-flex;align-items:center;gap:11px;
  border:1px solid var(--line-firm);border-radius:12px;padding:9px 17px 9px 14px;
  background:rgba(255,255,255,.045);
  transition:border-color .25s,background-color .25s,transform .25s;
}
.store:hover{border-color:var(--acc-line);background:rgba(255,255,255,.08);transform:translateY(-2px)}
.store svg{width:22px;height:22px;flex:none}
.store b{display:block;font-family:'Schibsted Grotesk',sans-serif;font-weight:700;
  font-size:14px;letter-spacing:-.01em;color:var(--ink);line-height:1.25}
.store i{display:block;font-style:normal;font-size:10.5px;letter-spacing:.02em;color:var(--ink-faint)}
.store--test i{color:var(--acc)}

/* ── Coming-soon app card ──────────────────────────────────────────── */
.soon{display:grid;gap:clamp(20px,2.4vw,34px);align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.soon-shot{position:relative;border-radius:16px;overflow:hidden;
  border:1px solid var(--line);background:#080C14;max-width:340px}
.soon-shot img{width:100%;height:auto}
.soon-desc{margin-bottom:18px}
.badge-soon{
  display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:11px;
  letter-spacing:.14em;color:var(--acc);border:1px solid var(--acc-line);
  border-radius:100px;padding:5px 14px;
}

/* ── Domain / tech ─────────────────────────────────────────────────── */
.stack{display:flex;flex-wrap:wrap;gap:9px;margin:0;padding:0;list-style:none}
.stack li{
  font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.04em;
  color:var(--ink-mid);background:rgba(255,255,255,.04);
  border:1px solid var(--line);border-radius:8px;padding:8px 14px;
  transition:color .25s,border-color .25s;
}
.stack li:hover{color:var(--ink);border-color:var(--acc-line)}
.note{margin-top:26px;font-size:12.5px;line-height:1.9;color:var(--ink-faint)}
.note a,.faq .a a{color:var(--acc);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--acc-line)}
.note a:hover,.faq .a a:hover{text-decoration-color:var(--acc)}

/* ── Beta recruiting banner ────────────────────────────────────────── */
.beta{
  position:relative;overflow:hidden;isolation:isolate;
  border:1px solid var(--acc-line);border-radius:20px;
  padding:clamp(30px,3.6vw,52px);
  background:
    radial-gradient(120% 140% at 12% 0%,rgba(46,123,255,.17) 0%,transparent 62%),
    rgba(255,255,255,.035);
}
.beta h3{margin:0 0 14px;
  font-family:'Schibsted Grotesk','Zen Kaku Gothic New',sans-serif;
  font-weight:800;font-size:clamp(21px,2.6vw,31px);line-height:1.35;
  letter-spacing:-.022em;color:var(--ink)}
.beta p{margin:0 0 24px;max-width:46em;font-size:13.5px;line-height:1.95;color:var(--ink-mid)}
.beta ol{margin:0 0 26px;padding:0 0 0 1.25em;max-width:46em;
  font-size:13px;line-height:1.95;color:var(--ink-mid)}
.beta ol li{margin-bottom:6px}

/* ── Support links ─────────────────────────────────────────────────── */
.docs{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.doc{
  display:flex;align-items:center;gap:14px;
  border:1px solid var(--line);border-radius:14px;padding:18px 20px;
  background:rgba(255,255,255,.028);
  transition:border-color .3s,background-color .3s,transform .3s;
}
.doc:hover{border-color:var(--acc-line);background:rgba(255,255,255,.05);transform:translateY(-3px)}
.doc b{display:block;font-size:14.5px;font-weight:700;line-height:1.5;color:var(--ink)}
.doc i{display:block;font-style:normal;font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;letter-spacing:.1em;color:var(--ink-faint);margin-top:4px}
.doc span{margin-left:auto;color:var(--acc);font-size:15px}

/* ── FAQ — <details> so it needs no JavaScript at all ──────────────── */
.faq{display:grid;gap:12px}
.faq details{border:1px solid var(--line);border-radius:14px;
  background:rgba(255,255,255,.028);overflow:hidden;transition:border-color .3s}
.faq details[open]{border-color:var(--acc-line)}
.faq summary{
  display:flex;align-items:center;gap:16px;cursor:pointer;list-style:none;
  padding:20px 24px;font-size:15px;font-weight:700;line-height:1.6;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:20px;
  font-weight:400;color:var(--acc);transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary i{font-style:normal;font-family:'IBM Plex Mono',monospace;font-size:12px;
  letter-spacing:.1em;color:var(--acc);flex:none}
.faq .a{padding:0 24px 22px 62px;margin:0;font-size:13.5px;line-height:1.95;color:var(--ink-mid)}

/* ── Support form (type=works) ─────────────────────────────────────── */
.form-wrap{
  background:rgba(255,255,255,.04);border:1px solid var(--line);
  border-radius:20px;padding:clamp(26px,3.2vw,44px);
}
.fields{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.field-full{grid-column:1/-1}
label{display:block}
/* Two-line labels (the email hint) otherwise push their input below the ones
   beside it. Letting the caption take the slack row keeps every input in a
   row sitting on the same baseline. */
.fields label{display:grid;grid-template-rows:1fr auto;height:100%}
.fields .lbl{align-self:start}
.lbl{display:block;margin-bottom:8px;font-family:'IBM Plex Mono',monospace;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:#9CA9BC}
.lbl b{color:var(--acc);font-weight:400}
.lbl em{font-style:normal;text-transform:none;letter-spacing:0;color:var(--ink-faint)}
input,select,textarea{
  width:100%;font-family:'Zen Kaku Gothic New',sans-serif;font-size:15px;line-height:1.7;
  color:var(--ink);background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:13px 15px;
  transition:border-color .18s,background-color .18s;
}
textarea{resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--acc);background:rgba(255,255,255,.08)}
select{appearance:none;cursor:pointer}
.submit{
  margin-top:26px;width:100%;display:inline-flex;align-items:center;justify-content:center;
  gap:10px;font-family:'Zen Kaku Gothic New',sans-serif;font-weight:700;font-size:16px;
  color:#06090F;background:var(--grad);border:none;border-radius:100px;padding:17px 24px;
  cursor:pointer;box-shadow:0 12px 38px rgba(46,123,255,.34);
  transition:filter .2s,transform .2s;
}
.submit:hover{filter:brightness(1.08);transform:translateY(-2px)}
.vq-hp{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden}
.form-note{margin:16px 0 0;font-size:12px;line-height:1.85;color:var(--ink-faint)}

@media (prefers-reduced-motion: no-preference){
  .u-name em,.u-sub em{background-size:230% 100%;animation:vq-hue 9s ease-in-out infinite alternate}
  .u-name::before{animation:vq-halo 6s ease-in-out infinite alternate}
  .u-name .ln i{animation-delay:.14s}
  .u-sub .ln i{animation-delay:.28s}
}

/* ── Catalogue → title page ────────────────────────────────────────── */
/* The whole card is the click target, not a line of text easy to miss. A
   transparent link is layered over everything (.prod already establishes
   the positioning context and a stacking context via isolation:isolate);
   the store buttons are lifted above it so both stay independently
   clickable without nesting an <a> inside an <a>. */
.prod-cover{position:absolute;inset:0;z-index:1}
.prod .stores{margin-top:auto;position:relative;z-index:2}

/* ── Title page — hero ─────────────────────────────────────────────── */
/* A tighter version of the unit hero: icon + name + catch + chips, no
   display-size type. --tint (set inline per page) carries the same accent
   the title already has on its catalogue card. */
.p-hero{
  position:relative;overflow:hidden;background:transparent;
  padding:clamp(52px,7.5vh,92px) var(--pad) clamp(8px,1vh,16px);
}
.p-hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(60% 84% at 14% 0%,var(--acc-glow) 0%,transparent 64%);
}
.p-hero .shell{position:relative;z-index:1}
.p-head{display:flex;align-items:center;gap:20px;margin-bottom:20px}
.p-icon{width:76px;height:76px;flex:none;border-radius:18px;
  border:1px solid var(--line);background:#0B1220}
.p-name{margin:0;
  font-family:'Schibsted Grotesk','Zen Kaku Gothic New',sans-serif;
  font-weight:800;font-size:clamp(26px,4vw,44px);line-height:1.25;
  letter-spacing:-.024em;color:var(--ink)}
.p-name small{display:block;margin-top:6px;font-size:.48em;font-weight:600;
  letter-spacing:0;color:var(--ink-dim)}
.p-catch{margin:0 0 20px;max-width:36em;
  font-size:clamp(14.5px,1.6vw,17px);line-height:1.85;color:var(--ink-mid)}

/* ── Title page — intro row ───────────────────────────────────────── */
.p-intro{display:grid;gap:clamp(24px,3vw,40px);align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.p-intro-text p{margin:0 0 1.3em;font-size:14.5px;line-height:1.95;color:var(--ink-mid)}
.p-intro-text p:last-child{margin-bottom:0}
.p-intro-shot{border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#080C14}
.p-intro-shot img{width:100%;height:auto;display:block}
.p-intro-shot--tall{max-width:300px;margin:0 auto}

/* ── Title page — feature list ────────────────────────────────────── */
.feat-list{margin:0;padding:0;list-style:none;display:grid;gap:12px;max-width:54em}
.feat-list li{position:relative;padding-left:22px;font-size:14px;line-height:1.85;color:var(--ink-mid)}
.feat-list li::before{content:"";position:absolute;left:0;top:.82em;width:9px;height:1px;background:var(--tint)}

/* ── Title page — highlight cards (subset of titles only) ───────────── */
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}

/* ── Title page — screenshot gallery ─────────────────────────────────
   No lightbox: this site ships nothing that needs JS to be readable, and a
   grid of natural-aspect shots is legible enough without one. */
.shots{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.shot{width:100%;height:auto;display:block;border-radius:12px;
  border:1px solid var(--line);background:#080C14}

/* ── Title page — download ───────────────────────────────────────── */
.dl-grid{display:grid;gap:clamp(16px,2vw,24px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));margin-bottom:22px}
.dl-card{border:1px solid var(--line);border-radius:16px;
  padding:clamp(20px,2.2vw,28px);background:rgba(255,255,255,.03)}
.dl-card h3{margin:0 0 14px;
  font-family:'Schibsted Grotesk','Zen Kaku Gothic New',sans-serif;
  font-weight:700;font-size:16px;color:var(--ink)}
.dl-note{margin:0 0 14px;font-size:12.5px;line-height:1.8;color:var(--ink);
  background:rgba(255,255,255,.03);border:1px solid var(--acc-line);
  border-radius:10px;padding:11px 14px}
.p-back{margin-top:4px;font-size:13px}
.p-back a{color:var(--ink-dim);transition:color .2s}
.p-back a:hover{color:var(--ink)}