/* ============================================================
   oria.tools — additions on top of arpia-v2.css (2026-09-08)
   arpia-v2.css carries the tokens, header, footer, buttons and the
   .dp-* deep-page vocabulary. This file adds only what oria.tools
   needs and arpia.ai does not: the Oria wordmark, inline SVG icons
   in place of the ionicons CDN, and the auth pages.
   ============================================================ */

/* ---------- wordmark ----------
   arpia.ai's header logo is an <img>. Here the product name IS the
   identity, so the logo is set in type with ARPIA as the endorsement. */
.ot-logo { display: flex; align-items: baseline; gap: 0.55rem; }
/* The wordmark is set in Helvetica on purpose, so it does NOT inherit
   var(--font). Helvetica ships with macOS and iOS and NOT with Windows or
   Android, so Arial is the fallback that most visitors will actually see: this
   is a Mac-only change in appearance, not a site-wide one.
   700 because both faces ship Regular and Bold only, and a 500 gets matched
   down to Regular, which reads lighter than the nav links beside it. */
.ot-logo .ot-name { color: var(--white); font-family: Helvetica, 'Helvetica Neue', Arial, sans-serif; font-size: 1.32rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1; }
.ot-logo .ot-by { color: var(--mist); font-size: 0.66rem; letter-spacing: 0.18em; font-weight: 500; text-transform: uppercase; }

/* ---------- inline SVG icons ----------
   arpia.ai pulls ionicons from unpkg. A three-page site does not need a
   web-component runtime off a CDN, so the icons ship as a <symbol> sprite
   in the page. These rules stand in for arpia-v2.css's `ion-icon` ones. */
.oi { width: 1.8rem; height: 1.8rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; display: block; }
.dp-mode .oi { color: var(--gold); margin-bottom: 1rem; }
.oi-sm { width: 1.15rem; height: 1.15rem; stroke-width: 1.8; }

/* The play badge and the surface icons: arpia-v2.css sizes those with
   font-size, which does nothing to an <svg>. Same sizes, as geometry. */
.media-ph-video.is-live .oi { width: 3.4rem; height: 3.4rem; color: var(--white); filter: drop-shadow(0 2px 14px rgba(0,0,0,0.7)); transition: transform 0.35s var(--ease); }
.media-ph-video.is-live:hover .oi { transform: scale(1.08); }
.surface .media-ph-video.is-live .oi { width: 2.4rem; height: 2.4rem; }
.surface-body .oi { width: 1.4rem; height: 1.4rem; color: var(--gold); margin-bottom: 0.6rem; }

/* ---------- landing extras ---------- */
/* dp-modes auto-fit resolved to three columns at 1100px, which left the fourth
   card alone on a second row looking like a mistake. Two-up also reads better
   for cards this wordy. (The surfaces strip below uses arpia-v2.css's own
   .surfaces grid, which is already 4/2/1.) */
.dp-modes.ot-2up { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 700px) { .dp-modes.ot-2up { grid-template-columns: 1fr; } }
.ot-shot { border: 1px solid var(--line-dark); border-radius: 14px; overflow: hidden; background: #0F0F0F; }
.ot-shot img { width: 100%; height: auto; display: block; }
.ot-note { color: var(--ink-soft); font-size: 0.85rem; line-height: 1.6; margin-top: 1.2rem; }

/* ---------- the daily-work block ----------
   Sits in the same dark run as the four surfaces. Ten compact chips: the point
   is the breadth, so each one gets a name and a single line, never a card. */
.ot-daily { margin-top: 5.5rem; padding-top: 4.5rem; border-top: 1px solid var(--line-dark); scroll-margin-top: 5.5rem; }   /* the fixed header must not cover the anchor */
.ot-tools { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.1rem; margin-top: 2.6rem; }
.ot-tool { background: #101010; border: 1px solid #262626; border-radius: 10px; padding: 1.4rem 1.2rem; }
.ot-tool .oi { width: 1.3rem; height: 1.3rem; color: var(--gold); margin-bottom: 0.8rem; }
.ot-tool h3 { color: var(--white); font-size: 0.95rem; font-weight: 600; margin-bottom: 0.45rem; }
.ot-tool p { color: var(--mist); font-size: 0.85rem; line-height: 1.55; }
@media (max-width: 1180px) { .ot-tools { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .ot-tools { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .ot-tools { grid-template-columns: 1fr; } }

.ot-daily-split { margin-top: 4rem; }
.ot-daily-h3 { color: var(--white); font-size: 1.75rem; font-weight: 400; letter-spacing: -0.015em; margin-bottom: 1.2rem; }
.ot-daily-h3.is-ink { color: var(--ink); }

/* the film that closes the memory section: centred to match .dp-film above it */
.ot-film-lead { max-width: 900px; margin: 4.5rem auto 1.8rem; text-align: center; }
.ot-film-lead p { color: var(--ink-soft); font-size: 1.05rem; line-height: 1.7; }
/* on paper the dashed placeholder border of .media-ph reads as a mistake */
.dp-content .media-ph-video.is-live { border-color: var(--line-light); }
/* The Cerebro poster opens on its own headline, so the component's label and hint
   landed on top of it. The lead above the film already says both things, so the
   badge carries the affordance alone. The aria-label keeps it named. */
.dp-film .media-ph-label, .dp-film .media-ph-hint { display: none; }

/* Two tiers, not three: arpia-v2.css's .tiers is auto-fit, which stretched two
   cards across the whole wrap and made the pair look like a leftover from a
   third. Fixed at two and centred so it reads as the whole set. */
.tiers.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* two, not auto-fit; full wrap width so the cards line up with the wallet panel below */
@media (max-width: 720px) { .tiers.is-two { grid-template-columns: 1fr; } }
.ot-apps-split { margin-top: 4.5rem; }

/* ---------- the AI Wallet panel ----------
   A dark inset on the paper section. The wallet is half of what a customer
   pays, and as a two-column paragraph under the cards it read like a
   disclaimer. */
.ot-fuel { background: var(--black); border-radius: 16px; padding: 3.2rem 3rem; margin-top: 3.4rem; }
.ot-fuel-head { max-width: 820px; }
.ot-fuel-head h3 { color: var(--white); font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 400; letter-spacing: -0.015em; margin-bottom: 1.1rem; }
.ot-fuel-head p { color: var(--mist); font-size: 1.05rem; line-height: 1.75; }
.ot-fuel-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.8rem 2.6rem; margin-top: 2.6rem; padding-top: 2.4rem; border-top: 1px solid var(--line-dark); }
/* Two by two rather than four across: at this wrap four columns are 194px and
   every point wraps to six lines. */
.ot-fuel-grid .oi { width: 1.4rem; height: 1.4rem; color: var(--gold); margin-bottom: 0.9rem; }
.ot-fuel-grid h4 { color: var(--white); font-size: 0.98rem; font-weight: 600; margin-bottom: 0.5rem; }
.ot-fuel-grid p { color: var(--mist); font-size: 0.9rem; line-height: 1.6; }
.ot-fuel-note { color: #8a8a8a; font-size: 0.9rem; line-height: 1.65; margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid var(--line-dark); }
.ot-fuel-note a { color: var(--mist); text-decoration: underline; }
@media (max-width: 620px) { .ot-fuel { padding: 2.2rem 1.6rem; } .ot-fuel-grid { grid-template-columns: 1fr; } }

/* ============================================================
   AUTH PAGES (/signin, /signup)
   Dark, single column, no marketing chrome competing with the form.
   ============================================================ */
.auth-body { background: var(--black); min-height: 100vh; display: flex; flex-direction: column; }
.auth-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 7rem 1.5rem 4rem; }
.auth-card { width: 100%; max-width: 470px; }
.auth-card.is-wide { max-width: 720px; }
.auth-head { text-align: center; margin-bottom: 2.4rem; }
.auth-head h1 { color: var(--white); font-size: 1.95rem; font-weight: 400; letter-spacing: -0.015em; margin-bottom: 0.7rem; }
.auth-head p { color: var(--mist); font-size: 1rem; line-height: 1.65; }

.auth-panel { background: var(--coal); border: 1px solid var(--line-dark); border-radius: 14px; padding: 2.2rem 2rem; }

.auth-field { margin-bottom: 1.2rem; }
.auth-field label { display: block; color: #cfcfcf; font-size: 0.85rem; font-weight: 500; margin-bottom: 0.5rem; }
.auth-input { width: 100%; padding: 0.9rem 1rem; background: #0E0E0E; border: 1px solid #2f2f2f; border-radius: 8px; color: var(--white); font-family: var(--font); font-size: 1rem; transition: border-color 0.25s; }
.auth-input::placeholder { color: #5c5c5c; }
.auth-input:focus { outline: none; border-color: var(--gold); }
.auth-input:disabled { opacity: 0.5; cursor: not-allowed; }

.auth-btn { display: block; width: 100%; padding: 0.95rem 1.5rem; background: var(--white); color: var(--ink); border-radius: 8px; font-family: var(--font); font-size: 1rem; font-weight: 500; text-align: center; transition: background 0.25s, opacity 0.25s; }
.auth-btn:hover { background: var(--paper); }
.auth-btn[disabled] { opacity: 0.4; cursor: not-allowed; background: var(--white); }
.auth-btn-ghost { display: block; width: 100%; padding: 0.95rem 1.5rem; background: transparent; border: 1px solid #2f2f2f; color: #cfcfcf; border-radius: 8px; font-family: var(--font); font-size: 1rem; font-weight: 500; text-align: center; transition: border-color 0.25s, color 0.25s; }
.auth-btn-ghost:hover { border-color: #4a4a4a; color: var(--white); }

/* inline feedback under the email field. Three states, one element. */
.auth-msg { font-size: 0.86rem; line-height: 1.55; margin-top: 0.6rem; display: none; }
.auth-msg.is-on { display: block; }
.auth-msg.is-info { color: var(--mist); }
.auth-msg.is-warn { color: var(--gold); }
.auth-msg.is-err { color: var(--red); }

.auth-sep { display: flex; align-items: center; gap: 1rem; margin: 1.6rem 0; color: #5c5c5c; font-size: 0.78rem; letter-spacing: 0.12em; }
.auth-sep::before, .auth-sep::after { content: ''; flex: 1; height: 1px; background: var(--line-dark); }

.auth-foot { text-align: center; margin-top: 1.8rem; color: var(--mist); font-size: 0.92rem; }
.auth-foot a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.auth-legal { text-align: center; margin-top: 1.6rem; color: #6e6e6e; font-size: 0.8rem; line-height: 1.6; }
.auth-legal a { color: #9a9a9a; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- SSO buttons ----------
   Google renders its own button into .auth-sso-slot and will not be
   restyled, so the Microsoft button is built to sit beside it at the same
   height and radius rather than to match the rest of this stylesheet.
   NOTE the icon here is an inline <svg> from the sprite: arpia-v2.css sizes
   icons with font-size, which does nothing to an SVG, so the size is
   geometry. */
.auth-sso-slot { min-height: 44px; display: flex; justify-content: center; }
/* Brand marks bring their own colours and must not inherit the stroke-based
   icon rules above. Sized as geometry, not font-size: arpia-v2.css sets icon
   size with font-size and that does nothing to an SVG. */
.oi-brand { fill: initial; stroke: none; width: 20px; height: 20px; flex: 0 0 20px; }
.auth-sso-btn { display: flex; align-items: center; justify-content: center; gap: 0.6rem; width: 100%; margin-top: 0.8rem; padding: 0.8rem 1.5rem; background: #0E0E0E; border: 1px solid #2f2f2f; border-radius: 999px; color: var(--white); font-family: var(--font); font-size: 0.95rem; font-weight: 500; transition: border-color 0.25s, background 0.25s; cursor: pointer; }
.auth-sso-btn:hover { border-color: #4a4a4a; background: #131313; }
.auth-sso-btn .oi { width: 18px; height: 18px; flex: 0 0 18px; color: var(--mist); }

/* ---------- result ----------
   The end of the SSO flow. A held signup uses .is-ok too: waiting for a
   review is not a failure and must not be coloured like one. */
.auth-result { text-align: center; padding: 0.5rem 0; }
.auth-result h2 { color: var(--white); font-size: 1.35rem; font-weight: 600; margin-bottom: 0.8rem; }
.auth-result p { color: var(--mist); font-size: 0.95rem; line-height: 1.65; margin-bottom: 1.6rem; }
.auth-result.is-err h2 { color: var(--red); }
.auth-result .auth-btn { text-decoration: none; }

/* ---------- region choice ----------
   Data residency is a selling point on this product, so it gets real
   estate rather than a hidden field. */
.region-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.region-card { display: block; text-align: left; background: #0E0E0E; border: 1px solid #2f2f2f; border-radius: 12px; padding: 1.6rem 1.5rem; transition: border-color 0.25s, background 0.25s; cursor: pointer; }
.region-card:hover { border-color: #4a4a4a; background: #131313; }
.region-card.is-picked { border-color: var(--gold); background: #14120c; }
.region-card .oi { color: var(--mist); margin-bottom: 0.9rem; }
.region-card.is-picked .oi { color: var(--gold); }
.region-card h3 { color: var(--white); font-size: 1.05rem; font-weight: 600; margin-bottom: 0.35rem; }
.region-card .region-where { color: var(--mist); font-size: 0.86rem; line-height: 1.5; }
.region-card .region-host { color: #6e6e6e; font-size: 0.78rem; margin-top: 0.7rem; font-variant-numeric: tabular-nums; }
@media (max-width: 620px) { .region-grid { grid-template-columns: 1fr; } }

/* ---------- signup steps ---------- */
.auth-steps { display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin-bottom: 2rem; }
.auth-step-dot { width: 7px; height: 7px; border-radius: 50%; background: #2f2f2f; transition: background 0.3s, transform 0.3s; }
.auth-step-dot.is-on { background: var(--gold); transform: scale(1.25); }
.auth-step-dot.is-done { background: #6e6e6e; }
.auth-pane { display: none; }
.auth-pane.is-on { display: block; animation: authIn 0.45s var(--ease) both; }
@keyframes authIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.auth-back { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--mist); font-size: 0.85rem; margin-bottom: 1.4rem; transition: color 0.25s; }
.auth-back:hover { color: var(--white); }
.auth-back .oi { width: 0.95rem; height: 0.95rem; transform: rotate(180deg); }

.auth-review { border: 1px solid var(--line-dark); border-radius: 10px; padding: 1.2rem 1.3rem; margin-bottom: 1.5rem; }
.auth-review-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.4rem 0; }
.auth-review-row dt { color: #6e6e6e; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; }
.auth-review-row dd { color: var(--white); font-size: 0.95rem; text-align: right; word-break: break-all; }

/* the auth pages keep the site header but never the marketing nav links */
.auth-body header nav { padding: 0.9rem 2rem; }

/* ---------- launch pricing on Basic ----------
   The list price struck through beside the founder rate, and the terms on the
   line below. A discount with no end date and no answer to "what happens after"
   reads as a trick, so the number itself carries both.
   .tier-price span is already styled, so these need the parent in the selector
   to win on specificity. Ink on a gold tint rather than gold text: gold on
   white is about 2.2:1 and this is 0.82rem. */
.tier-price .tier-was { font-size: 1.15rem; font-weight: 400; color: var(--ink-soft); text-decoration: line-through; letter-spacing: 0; margin-right: 0.45rem; vertical-align: 0.42em; }
.tier-price .tier-promo { display: block; margin-top: 0.85rem; padding: 0.55rem 0.7rem; border-radius: 6px; background: rgba(217,164,65,0.12); border: 1px solid rgba(217,164,65,0.35); color: var(--ink); font-size: 0.82rem; font-weight: 500; line-height: 1.45; letter-spacing: 0; }

/* Oria Unlimited: the note under the seats for whoever wants the whole organization */
.tiers-unlimited { display: flex; align-items: center; justify-content: space-between; gap: 1.4rem; margin-top: 1.4rem; padding: 1.1rem 1.5rem; border: 1px solid var(--line-light); border-radius: 12px; background: rgba(217,164,65,0.07); }
.tiers-unlimited p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.55; }
.tiers-unlimited strong { color: var(--ink); font-weight: 600; }
.tiers-unlimited a { flex: none; white-space: nowrap; font-weight: 600; font-size: 0.9rem; color: var(--ink); border: 1px solid var(--ink); border-radius: 999px; padding: 0.6rem 1.15rem; text-decoration: none; transition: background 0.25s, color 0.25s; }
.tiers-unlimited a:hover { background: var(--ink); color: var(--paper); }
@media (max-width: 720px) { .tiers-unlimited { flex-direction: column; align-items: flex-start; } }