danny/hosted
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add IF.TTT explainer page

Browse source
This commit is contained in:
root 2025-12-28 21:41:33 +00:00
parent 6f48def7c1
commit 6369090561
2 changed files with 1078 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

451
ifttt/index.html Normal file
View file

@ -0,0 +1,451 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>IF.TTT — Open Verification for AI Governance</title>
<meta
name="description"
content="IF.TTT (Traceable, Transparent, Trustworthy) is a receipt-first governance layer: bind a source artifact to an output with a verifiable trace, no-login proof links, and optional offline bundles."
/>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<header class="top">
<div class="wrap top__inner">
<a class="brand" href="#top" aria-label="IF.TTT home">
<span class="brand__mark" aria-hidden="true"></span>
<span class="brand__text">
<span class="brand__title">IF.TTT</span>
<span class="brand__sub">Traceable • Transparent • Trustworthy</span>
</span>
</a>
<nav class="nav" aria-label="Primary">
<a href="#how">How It Works</a>
<a href="#trust">Third‑Party Trust</a>
<a href="#verify">Verify</a>
<a href="#verticals">Verticals</a>
<a href="#faq">FAQ</a>
</nav>
</div>
</header>
<main id="top">
<section class="hero">
<div class="wrap hero__grid">
<div class="hero__copy">
<p class="kicker">Open governance, readable by outsiders</p>
<h1>Receipts, not vibes.</h1>
<p class="lede">
IF.TTT is a receipt‑first governance layer. It binds a <strong>source artifact</strong> to an <strong>output</strong> with a
<strong>trace page</strong>, stable <strong>no‑login links</strong>, and optional <strong>offline bundles</strong> anyone can verify.
</p>
<div class="pillrow" role="list" aria-label="Key properties">
<div class="pill" role="listitem">
<span class="pill__k">No‑login</span>
<span class="pill__v">Public proof surface</span>
</div>
<div class="pill" role="listitem">
<span class="pill__k">Offline</span>
<span class="pill__v">Triage bundles</span>
</div>
<div class="pill" role="listitem">
<span class="pill__k">Black/white</span>
<span class="pill__v">What’s verified vs what isn’t</span>
</div>
</div>
<div class="cta">
<a class="btn btn--primary" href="#verify">Try a live trace</a>
<a class="btn" href="#verticals">See vertical fit</a>
</div>
<p class="note">
We don’t claim “compliance”. We support audits by producing <em>verifiable receipts</em> that third parties can check without your
credentials.
</p>
</div>
<aside class="hero__card" aria-label="What a trace page shows">
<div class="card">
<div class="card__hdr">
<div class="badge badge--ok">VERIFIED</div>
<div class="badge">QUANTUM READY (optional)</div>
</div>
<div class="card__body">
<div class="kv">
<div class="kv__k">Source</div>
<div class="kv__v"><code>sha256:…</code></div>
<div class="kv__k">Output</div>
<div class="kv__v"><code>sha256:…</code></div>
<div class="kv__k">Trace</div>
<div class="kv__v"><code>trace_id: …</code></div>
<div class="kv__k">Share</div>
<div class="kv__v"><code>shareId: …</code></div>
</div>
<div class="mini">
<div class="mini__k">What’s the promise?</div>
<div class="mini__v">“Download the output. Hash it. Compare. Optionally verify offline.”</div>
</div>
</div>
</div>
</aside>
</div>
</section>
<section id="how" class="section">
<div class="wrap">
<h2>How It Works (receipt‑first)</h2>
<p class="sub">
This is the sequence third‑party reviewers actually care about. Every step either produces a receipt, or it doesn’t ship.
</p>
<ol class="steps">
<li class="step">
<div class="step__n">1</div>
<div class="step__b">
<div class="step__t">Capture the source bytes</div>
<div class="step__d">We hash the exact artifact (PDF/MD/etc) to produce <code>source_sha256</code>.</div>
</div>
</li>
<li class="step">
<div class="step__n">2</div>
<div class="step__b">
<div class="step__t">Produce the output bytes</div>
<div class="step__d">We hash the final output to produce <code>output_sha256</code> (what the reader sees).</div>
</div>
</li>
<li class="step">
<div class="step__n">3</div>
<div class="step__b">
<div class="step__t">Bind source ↔ output in a trace</div>
<div class="step__d">We create <code>trace_id</code> and publish a trace receipt that links hashes, time, and versioning.</div>
</div>
</li>
<li class="step">
<div class="step__n">4</div>
<div class="step__b">
<div class="step__t">Publish a no‑login proof surface</div>
<div class="step__d">Stable URLs keyed by an unguessable <code>shareId</code> (trace, dossier, pack, source).</div>
</div>
</li>
<li class="step">
<div class="step__n">5</div>
<div class="step__b">
<div class="step__t">Optional: publish offline bundles</div>
<div class="step__d">
For constrained environments, export <strong>triage bundles</strong> (lightweight/standard/full) verifiable without network access.
</div>
</div>
</li>
</ol>
</div>
</section>
<section id="trust" class="section section--alt">
<div class="wrap">
<h2>Third‑Party Trust Requirements (what outsiders demand)</h2>
<p class="sub">This is the “procurement/audit” checklist, stated plainly.</p>
<div class="grid2">
<div class="panel">
<h3>Typical third‑party questions</h3>
<ul class="list">
<li>“Can I verify the output came from this source?”</li>
<li>“Can I verify without your login, VPN, or internal tools?”</li>
<li>“Can I verify later, offline, after a dispute?”</li>
<li>“What does the receipt prove, and what does it not prove?”</li>
<li>“If the evidence is missing, is that visible?”</li>
</ul>
</div>
<div class="panel">
<h3>IF.TTT answers (black/white)</h3>
<div class="bw">
<div class="bw__row">
<div class="bw__k">Proves</div>
<div class="bw__v">Integrity binding (hashes), publication receipts, optional signatures, offline verification artifacts.</div>
</div>
<div class="bw__row">
<div class="bw__k">Does not prove</div>
<div class="bw__v">
Intent, interpretation, or “compliance”. It gives evidence; your process decides what that evidence means.
</div>
</div>
<div class="bw__row">
<div class="bw__k">Default stance</div>
<div class="bw__v">If it’s not verifiable, label it as a gap (do not endorse it).</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="verify" class="section">
<div class="wrap">
<h2>Open Verification (try it yourself)</h2>
<p class="sub">Use the same path your auditors and external reviewers will use.</p>
<div class="verify">
<div class="panel">
<h3>Live example (trace + bundles)</h3>
<div class="links">
<a class="linkrow" href="https://infrafabric.io/static/trace/6qRgcR01kw_qNo63Dbs_ob9n" target="_blank" rel="noreferrer">
<span class="linkrow__t">Example trace page</span>
<span class="linkrow__u">https://infrafabric.io/static/trace/6qRgcR01kw_qNo63Dbs_ob9n</span>
</a>
<a
class="linkrow"
href="https://infrafabric.io/static/hosted/review/trace-bundles/d70ed99a/index.html"
target="_blank"
rel="noreferrer"
>
<span class="linkrow__t">Triage bundle selector (lightweight/standard/full)</span>
<span class="linkrow__u">https://infrafabric.io/static/hosted/review/trace-bundles/d70ed99a/index.html</span>
</a>
<a class="linkrow" href="https://infrafabric.io/static/hosted/iftrace.html" target="_blank" rel="noreferrer">
<span class="linkrow__t">Offline verifier (HTML view)</span>
<span class="linkrow__u">https://infrafabric.io/static/hosted/iftrace.html</span>
</a>
<a class="linkrow" href="https://infrafabric.io/static/hosted/iftrace.py" target="_blank" rel="noreferrer">
<span class="linkrow__t">Offline verifier (download)</span>
<span class="linkrow__u">https://infrafabric.io/static/hosted/iftrace.py</span>
</a>
</div>
<details class="details">
<summary>Public receipt URLs (no-login)</summary>
<p class="fine" style="margin-top: 10px">
Every published output gets a stable share surface keyed by a single <code>shareId</code>.
</p>
<pre class="code"><code>https://infrafabric.io/static/trace/&lt;shareId&gt;
https://infrafabric.io/static/dossier/&lt;shareId&gt;
https://infrafabric.io/static/dossier/&lt;shareId&gt;/download
https://infrafabric.io/static/pack/&lt;shareId&gt;.md
https://infrafabric.io/static/review/&lt;shareId&gt;.md
https://infrafabric.io/static/marketing/&lt;shareId&gt;.md
https://infrafabric.io/static/source/&lt;source_sha256&gt;.pdf</code></pre>
<p class="fine">
HTML views exist for sandboxes that load <code>text/html</code> but reject downloads:
<code>/static/pack/&lt;shareId&gt;</code>, <code>/static/review/&lt;shareId&gt;</code>, <code>/static/marketing/&lt;shareId&gt;</code>.
</p>
</details>
<p class="fine">
Note: some constrained “web fetchers” reject downloadable binaries (e.g., <code>.tar.gz</code>) while still loading HTML. That’s why
HTML views exist for packs and indexes.
</p>
</div>
<div class="panel">
<h3>CLI verification (2 minutes)</h3>
<p class="sub2">Download a bundle from the selector, then:</p>
<pre class="code"><code>curl -fsSL -o iftrace.py 'https://infrafabric.io/static/hosted/iftrace.py'
python3 iftrace.py verify trace_bundle_&lt;id&gt;_standard.tar.gz --expected-sha256 &lt;sha256&gt;</code></pre>
<p class="fine">
<strong>VERIFIED</strong> means the hashes match what the receipt declares. <strong>QUANTUM READY</strong> may be shown when a
post‑quantum signature receipt exists (PQ verification is additive; hash verification still stands).
</p>
</div>
</div>
</div>
</section>
<section id="verticals" class="section section--alt">
<div class="wrap">
<h2>Vertical Fit (what each buyer is actually looking for)</h2>
<p class="sub">Same mechanism, different third‑party pressure.</p>
<div class="cards">
<article class="vcard">
<div class="vcard__icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
<path d="M5 12.5 12 6l7 6.5V20a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7.5Z" />
<path d="M9 22v-7h6v7" />
</svg>
</div>
<h3>B2B SaaS (SOC 2 / ISO)</h3>
<p class="vcard__k">Third party</p>
<p class="vcard__v">Auditors + enterprise procurement</p>
<p class="vcard__k">They want</p>
<p class="vcard__v">Evidence that controls existed at the right time, in the right scope, with receipts.</p>
<p class="vcard__k">IF.TTT helps by</p>
<p class="vcard__v">Publishing no‑login receipts and offline bundles for disputes and audits.</p>
</article>
<article class="vcard">
<div class="vcard__icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
<path d="M4 10h16v10H4z" />
<path d="M6 10V7a6 6 0 0 1 12 0v3" />
<path d="M12 14v4" />
</svg>
</div>
<h3>Fintech / Regulated Finance</h3>
<p class="vcard__k">Third party</p>
<p class="vcard__v">Regulators + model risk + internal audit</p>
<p class="vcard__k">They want</p>
<p class="vcard__v">Non‑repudiation, dispute workflows, and “show your work” provenance.</p>
<p class="vcard__k">IF.TTT helps by</p>
<p class="vcard__v">Binding outputs to sources and creating a defensible, replayable receipt trail.</p>
</article>
<article class="vcard">
<div class="vcard__icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
<path d="M12 3v18" />
<path d="M3 12h18" />
<path d="M7 7h10v10H7z" />
</svg>
</div>
<h3>Healthcare</h3>
<p class="vcard__k">Third party</p>
<p class="vcard__v">Compliance + vendors + incident reviewers</p>
<p class="vcard__k">They want</p>
<p class="vcard__v">Clear boundaries: what’s verified, what’s inferred, and what must be reviewed by humans.</p>
<p class="vcard__k">IF.TTT helps by</p>
<p class="vcard__v">Making evidence legible to outsiders while preserving strict, machine‑verifiable receipts.</p>
</article>
<article class="vcard">
<div class="vcard__icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
<path d="M12 2 20 6v6c0 5-3.4 9.4-8 10-4.6-.6-8-5-8-10V6l8-4Z" />
<path d="M9 12l2 2 4-5" />
</svg>
</div>
<h3>Gov / Defense Contractors</h3>
<p class="vcard__k">Third party</p>
<p class="vcard__v">Assessors + customers + supply‑chain review</p>
<p class="vcard__k">They want</p>
<p class="vcard__v">Offline‑verifiable bundles and unambiguous chain‑of‑custody.</p>
<p class="vcard__k">IF.TTT helps by</p>
<p class="vcard__v">Providing triage bundles that can be verified without trusted network access.</p>
</article>
<article class="vcard">
<div class="vcard__icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
<path d="M8 2h8v4H8z" />
<path d="M6 6h12v10a6 6 0 0 1-6 6 6 6 0 0 1-6-6V6Z" />
<path d="M9 12h6" />
</svg>
</div>
<h3>AI Product Companies</h3>
<p class="vcard__k">Third party</p>
<p class="vcard__v">Enterprise buyers + incident responders</p>
<p class="vcard__k">They want</p>
<p class="vcard__v">Provable provenance for outputs (“why did it say that?”) without internal access.</p>
<p class="vcard__k">IF.TTT helps by</p>
<p class="vcard__v">Making trace receipts shareable, replayable, and dispute‑friendly.</p>
</article>
<article class="vcard">
<div class="vcard__icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
<path d="M10 18a8 8 0 1 1 5.3-14" />
<path d="M21 21l-6-6" />
<path d="M10 12h6" />
<path d="M10 15h4" />
</svg>
</div>
<h3>SecOps / SOC</h3>
<p class="vcard__k">Third party</p>
<p class="vcard__v">Executives + auditors after an incident</p>
<p class="vcard__k">They want</p>
<p class="vcard__v">To verify AI summaries against raw evidence and keep chain‑of‑custody intact.</p>
<p class="vcard__k">IF.TTT helps by</p>
<p class="vcard__v">Binding “what the system said” to “what the system saw” via receipts and bundles.</p>
</article>
<article class="vcard">
<div class="vcard__icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
<path d="M4 20V9l8-5 8 5v11" />
<path d="M9 20v-6h6v6" />
<path d="M6 12h12" />
</svg>
</div>
<h3>Industrial / Supply Chain</h3>
<p class="vcard__k">Third party</p>
<p class="vcard__v">Customers + auditors + insurers</p>
<p class="vcard__k">They want</p>
<p class="vcard__v">Proof of change control and traceability that survives contractor handoffs.</p>
<p class="vcard__k">IF.TTT helps by</p>
<p class="vcard__v">Standardizing receipts so handoffs remain verifiable across organizational boundaries.</p>
</article>
</div>
</div>
</section>
<section id="faq" class="section">
<div class="wrap">
<h2>FAQ</h2>
<div class="faq">
<details>
<summary>What is “VERIFIED”?</summary>
<p>
“VERIFIED” means the hashes on the trace page match the output/source that can be downloaded and hashed independently. It is an
integrity receipt: the bytes match what the trace declares.
</p>
</details>
<details>
<summary>What is “QUANTUM READY”?</summary>
<p>
“QUANTUM READY” is shown when a post‑quantum signature receipt exists for the trace. It means PQ receipts are present now (for future
audit requirements). PQ verification is additive; the hash receipt remains valid either way.
</p>
</details>
<details>
<summary>Do you guarantee compliance?</summary>
<p>
No. IF.TTT produces verifiable artifacts that can support audits and disputes. Compliance is a broader program: scope, policy, human
review, and governance decisions are still required.
</p>
</details>
<details>
<summary>What’s the difference between shareId and trace_id?</summary>
<p>
<code>shareId</code> is the public handle used in URLs. <code>trace_id</code> is the chain‑of‑custody UUID recorded in receipts and
bundles.
</p>
</details>
</div>
<div class="foot">
<div class="foot__row">
<div class="foot__k">Docs</div>
<div class="foot__v">
<a href="https://infrafabric.io/static/hosted/review/ifttt-paper-update/2025-12-28/review-pack.html" target="_blank" rel="noreferrer"
>IF.TTT paper update (review pack)</a
>
</div>
</div>
<div class="foot__row">
<div class="foot__k">Contact</div>
<div class="foot__v"><a href="mailto:trace@infrafabric.io">trace@infrafabric.io</a></div>
</div>
</div>
</div>
</section>
</main>
<footer class="footer">
<div class="wrap footer__inner">
<div class="muted">InfraFabric • IF.TTT receipts are designed to be legible to the governed.</div>
<div class="muted">
<a href="https://infrafabric.io" target="_blank" rel="noreferrer">infrafabric.io</a> ·
<a href="https://red-team.infrafabric.io" target="_blank" rel="noreferrer">red-team.infrafabric.io</a>
</div>
</div>
</footer>
</body>
</html>

627
ifttt/style.css Normal file
View file

@ -0,0 +1,627 @@
:root {
--bg: #fffdf7;
--bg-alt: #fff9e6;
--panel: #ffffff;
--text: #111827;
--muted: #6b7280;
--border: #e5e7eb;
--link: #1d4ed8;
--accent: #8b0000;
--ok: #0f5132;
--ok-bg: #e7f6ee;
--shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
--radius: 14px;
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
background: var(--bg);
color: var(--text);
line-height: 1.5;
}
a {
color: var(--link);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
code {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 0.92em;
background: #f3f4f6;
padding: 2px 6px;
border-radius: 8px;
}
pre.code {
background: #0b1020;
color: #e5e7eb;
border-radius: 12px;
padding: 12px;
overflow: auto;
box-shadow: var(--shadow);
border: 1px solid rgba(255, 255, 255, 0.06);
}
pre.code code {
background: transparent;
padding: 0;
border-radius: 0;
font-size: 12px;
line-height: 1.45;
}
.wrap {
max-width: 1120px;
margin: 0 auto;
padding: 0 18px;
}
.top {
position: sticky;
top: 0;
z-index: 20;
background: rgba(255, 253, 247, 0.92);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border);
}
.top__inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 0;
gap: 14px;
}
.brand {
display: inline-flex;
align-items: center;
gap: 12px;
min-width: 220px;
}
.brand__mark {
width: 38px;
height: 38px;
border-radius: 12px;
border: 1px solid rgba(139, 0, 0, 0.25);
background:
radial-gradient(18px 18px at 30% 30%, rgba(139, 0, 0, 0.18), transparent 60%),
radial-gradient(18px 18px at 70% 70%, rgba(29, 78, 216, 0.10), transparent 60%),
#fff;
box-shadow: var(--shadow);
}
.brand__text {
display: flex;
flex-direction: column;
gap: 2px;
}
.brand__title {
font-weight: 800;
letter-spacing: 0.2px;
}
.brand__sub {
font-size: 12px;
color: var(--muted);
}
.nav {
display: flex;
gap: 14px;
flex-wrap: wrap;
justify-content: flex-end;
font-size: 13px;
}
.nav a {
color: var(--muted);
padding: 6px 8px;
border-radius: 10px;
}
.nav a:hover {
color: var(--text);
background: #ffffff;
border: 1px solid var(--border);
text-decoration: none;
}
.hero {
padding: 34px 0 22px;
background:
radial-gradient(650px 260px at 20% 0%, rgba(139, 0, 0, 0.08), transparent 60%),
radial-gradient(700px 300px at 100% 40%, rgba(29, 78, 216, 0.06), transparent 60%),
linear-gradient(#fffdf7, #fff);
}
.hero__grid {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 22px;
align-items: start;
}
.kicker {
font-size: 13px;
color: var(--muted);
margin: 0 0 10px;
}
h1 {
font-size: 40px;
line-height: 1.1;
margin: 0 0 10px;
letter-spacing: -0.4px;
}
.lede {
margin: 0 0 14px;
color: #374151;
max-width: 62ch;
}
.pillrow {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin: 18px 0 16px;
}
.pill {
border: 1px solid var(--border);
background: #ffffff;
border-radius: var(--radius);
padding: 10px 10px;
box-shadow: var(--shadow);
}
.pill__k {
font-size: 12px;
color: var(--muted);
display: block;
}
.pill__v {
font-size: 13px;
font-weight: 600;
margin-top: 2px;
display: block;
}
.cta {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin: 14px 0 10px;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 12px;
border-radius: 12px;
border: 1px solid var(--border);
background: #ffffff;
color: var(--text);
font-weight: 650;
font-size: 13px;
box-shadow: var(--shadow);
text-decoration: none;
}
.btn:hover {
text-decoration: none;
border-color: rgba(17, 24, 39, 0.22);
}
.btn--primary {
background: #111827;
color: #ffffff;
border-color: rgba(0, 0, 0, 0.25);
}
.btn--primary:hover {
border-color: rgba(0, 0, 0, 0.45);
}
.note {
font-size: 12px;
color: var(--muted);
margin: 10px 0 0;
}
.card {
border: 1px solid var(--border);
background: #ffffff;
border-radius: 18px;
box-shadow: var(--shadow);
overflow: hidden;
}
.card__hdr {
padding: 12px 12px;
border-bottom: 1px solid var(--border);
display: flex;
gap: 8px;
flex-wrap: wrap;
background: #f8fafc;
}
.badge {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: 999px;
border: 1px solid var(--border);
font-size: 12px;
color: var(--muted);
background: #ffffff;
white-space: nowrap;
}
.badge--ok {
border-color: rgba(15, 81, 50, 0.25);
background: var(--ok-bg);
color: var(--ok);
font-weight: 700;
}
.card__body {
padding: 14px 12px 12px;
}
.kv {
display: grid;
grid-template-columns: 90px 1fr;
gap: 6px 10px;
font-size: 13px;
}
.kv__k {
color: var(--muted);
}
.kv__v code {
background: #f3f4f6;
}
.mini {
margin-top: 12px;
border-top: 1px dashed var(--border);
padding-top: 10px;
font-size: 13px;
}
.mini__k {
color: var(--muted);
font-weight: 600;
font-size: 12px;
}
.mini__v {
margin-top: 4px;
color: #374151;
}
.section {
padding: 34px 0;
}
.section--alt {
background: var(--bg-alt);
border-top: 1px solid rgba(0, 0, 0, 0.03);
border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}
h2 {
margin: 0 0 8px;
font-size: 22px;
letter-spacing: -0.2px;
}
.sub {
margin: 0 0 18px;
color: var(--muted);
font-size: 14px;
max-width: 80ch;
}
.sub2 {
margin: 0 0 10px;
color: var(--muted);
font-size: 13px;
}
.steps {
display: grid;
gap: 10px;
padding: 0;
margin: 0;
list-style: none;
}
.step {
display: grid;
grid-template-columns: 44px 1fr;
gap: 12px;
padding: 14px 12px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: #ffffff;
box-shadow: var(--shadow);
}
.step__n {
width: 36px;
height: 36px;
border-radius: 12px;
background: rgba(139, 0, 0, 0.06);
border: 1px solid rgba(139, 0, 0, 0.18);
display: grid;
place-items: center;
font-weight: 800;
color: var(--accent);
}
.step__t {
font-weight: 750;
}
.step__d {
color: #374151;
margin-top: 3px;
font-size: 13px;
}
.grid2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.panel {
background: #ffffff;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 14px 14px;
box-shadow: var(--shadow);
}
.panel h3 {
margin: 0 0 8px;
font-size: 15px;
}
.list {
margin: 10px 0 0;
padding-left: 18px;
color: #374151;
font-size: 13px;
}
.bw {
display: grid;
gap: 8px;
font-size: 13px;
}
.bw__row {
display: grid;
grid-template-columns: 130px 1fr;
gap: 10px;
padding: 10px 10px;
border: 1px solid var(--border);
border-radius: 12px;
background: #ffffff;
}
.bw__k {
color: var(--muted);
font-weight: 700;
}
.bw__v {
color: #374151;
}
.verify {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
align-items: start;
}
.links {
display: grid;
gap: 8px;
margin-top: 10px;
}
.linkrow {
display: grid;
gap: 4px;
border: 1px solid var(--border);
border-radius: 12px;
padding: 10px 10px;
background: #ffffff;
box-shadow: var(--shadow);
}
.linkrow:hover {
border-color: rgba(29, 78, 216, 0.35);
text-decoration: none;
}
.linkrow__t {
font-weight: 700;
font-size: 13px;
color: var(--text);
}
.linkrow__u {
font-size: 12px;
color: var(--muted);
overflow-wrap: anywhere;
}
.fine {
margin: 12px 0 0;
color: var(--muted);
font-size: 12px;
}
.cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.vcard {
background: #ffffff;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 14px 14px;
box-shadow: var(--shadow);
}
.vcard__icon {
width: 44px;
height: 44px;
border: 1px solid var(--border);
border-radius: 14px;
background: #f8fafc;
display: grid;
place-items: center;
margin-bottom: 10px;
color: var(--accent);
}
.vcard__icon svg {
width: 22px;
height: 22px;
}
.vcard h3 {
margin: 0 0 10px;
font-size: 15px;
}
.vcard__k {
margin: 0;
font-size: 12px;
color: var(--muted);
font-weight: 700;
}
.vcard__v {
margin: 4px 0 10px;
font-size: 13px;
color: #374151;
}
.faq {
display: grid;
gap: 10px;
}
details {
background: #ffffff;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 12px 12px;
box-shadow: var(--shadow);
}
summary {
cursor: pointer;
font-weight: 750;
list-style: none;
}
summary::-webkit-details-marker {
display: none;
}
details p {
margin: 10px 0 0;
color: #374151;
font-size: 13px;
}
.foot {
margin-top: 18px;
border-top: 1px solid var(--border);
padding-top: 14px;
display: grid;
gap: 8px;
}
.foot__row {
display: grid;
grid-template-columns: 90px 1fr;
gap: 12px;
font-size: 13px;
}
.foot__k {
color: var(--muted);
font-weight: 700;
}
.footer {
border-top: 1px solid var(--border);
padding: 18px 0;
background: #ffffff;
}
.footer__inner {
display: flex;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.muted {
color: var(--muted);
font-size: 12px;
}
@media (max-width: 980px) {
.hero__grid {
grid-template-columns: 1fr;
}
.pillrow {
grid-template-columns: 1fr;
}
.grid2 {
grid-template-columns: 1fr;
}
.verify {
grid-template-columns: 1fr;
}
.cards {
grid-template-columns: 1fr;
}
h1 {
font-size: 34px;
}
}