/*
Theme Name: CVVCode Field Guide
Theme URI: https://cvvcode.com/
Author: CVVCode
Description: An illustrated, accessible field guide to card security codes.
Version: 1.0.2
Text Domain: cvvcode-field-guide
*/

:root{--ink:#12202a;--ink-soft:#233640;--paper:#f7f6f1;--paper-deep:#efeee8;--mint:#b9e7d1;--mint-bright:#cdf5db;--coral:#e7987f;--muted:#66737a;--line:#d8ddd7;--white:#fff;--serif:Georgia,'Times New Roman',serif;--sans:Inter,'Segoe UI',Arial,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:7rem}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
img,svg,video,iframe{max-width:100%;height:auto}
img{display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible{outline:3px solid var(--coral);outline-offset:4px}
.skip-link{position:absolute;left:1rem;top:-4rem;z-index:20;background:var(--mint);color:var(--ink);padding:.8rem 1rem;border-radius:.25rem}
.skip-link:focus{top:1rem}
.site-shell{overflow:hidden}
.site-header{min-height:96px;padding:0 clamp(24px,5vw,88px);display:flex;align-items:center;justify-content:space-between;gap:2rem;background:var(--paper);border-bottom:1px solid var(--line);position:relative;z-index:2}
.brand,.footer-brand{display:inline-flex;align-items:center;gap:13px;flex:none}
.brand-mark{width:38px;height:38px;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:3px;transform:rotate(-10deg)}
.brand-mark span{background:var(--ink);border-radius:2px}.brand-mark span:nth-child(2){background:var(--mint)}.brand-mark span:nth-child(3){grid-column:1 / 3;width:55%;background:var(--coral)}
.brand-word,.footer-brand{font-weight:850;font-size:23px;line-height:1;letter-spacing:-.085em}.brand-word>span,.footer-brand>span{font-weight:450}.brand-word small,.footer-brand small{display:block;margin-top:7px;font-size:8px;font-weight:700;letter-spacing:.14em}
.site-nav{display:flex;align-items:center;gap:clamp(18px,2.7vw,45px);font-size:13px;font-weight:700}.site-nav>a:not(.nav-guide){position:relative}.site-nav>a:not(.nav-guide)::after{content:'';position:absolute;left:0;right:100%;bottom:-7px;height:2px;background:var(--ink);transition:right .2s}.site-nav>a:hover::after{right:0}.nav-guide{padding:12px 17px;border:1px solid var(--ink);border-radius:3px;white-space:nowrap}.nav-guide span{margin-left:9px}.nav-guide:hover{background:var(--ink);color:var(--paper)}
.hero{min-height:690px;display:grid;grid-template-columns:48% 52%;background:var(--paper)}
.hero-copy{padding:clamp(75px,9vw,145px) 5vw 65px clamp(24px,7.1vw,112px);position:relative;z-index:1}
.eyebrow,.section-kicker,.answer-label,.aside-marker{font-size:11px;font-weight:800;letter-spacing:.16em;line-height:1.4}.eyebrow{display:flex;gap:12px;align-items:center;white-space:nowrap}.eyebrow-line{width:28px;height:2px;background:var(--coral)}
h1,h2,h3,p{margin-top:0}.hero h1{font-family:var(--serif);font-size:clamp(70px,7.1vw,112px);font-weight:400;line-height:.94;letter-spacing:-.07em;margin:36px 0 28px;white-space:nowrap}.hero h1 em{font-weight:400;color:#457466}.hero-lead{max-width:525px;font-family:var(--serif);font-size:clamp(20px,2.05vw,27px);line-height:1.38;letter-spacing:-.02em;color:#405159;margin-bottom:32px}.hero-actions{display:flex;align-items:center;gap:28px;flex-wrap:wrap}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:22px;min-height:55px;padding:15px 20px;border-radius:3px;font-size:13px;font-weight:800;transition:transform .18s,background .18s}.button:hover{transform:translateY(-3px)}.button-primary{background:var(--ink);color:var(--white)}.button-primary:hover{background:#36534e}.button-light{background:var(--mint);color:var(--ink)}.button-light:hover{background:#d4f1de}.text-link{font-size:13px;font-weight:800;border-bottom:1px solid var(--ink);padding-bottom:4px}.text-link span{margin-left:5px}.hero-note{display:flex;align-items:center;gap:9px;margin:62px 0 0;font-size:12px;color:var(--muted)}.note-icon{color:#437664;font-size:16px}
.hero-visual{position:relative;min-height:690px;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;isolation:isolate}.hero-visual:before{content:'';position:absolute;inset:0;background-image:linear-gradient(#ffffff09 1px,transparent 1px),linear-gradient(90deg,#ffffff09 1px,transparent 1px);background-size:43px 43px;mask-image:linear-gradient(90deg,transparent,#000 35%,#000)}.visual-orbit{position:absolute;border:1px solid #ffffff1d;border-radius:50%;width:650px;aspect-ratio:1;left:50%;top:50%;transform:translate(-50%,-50%)}.orbit-two{width:490px}.visual-caption{position:absolute;left:8%;right:8%;display:flex;justify-content:space-between;gap:15px;font-size:10px;font-weight:800;letter-spacing:.16em;color:#a4b8b6}.visual-caption-top{top:7%}.visual-caption-bottom{bottom:7%}.caption-number{color:var(--mint)}
.card-demo{position:relative;width:min(69%,510px);aspect-ratio:1.56;z-index:1;filter:drop-shadow(0 30px 40px #071319aa)}.demo-card{height:100%;position:relative;transform:rotate(-8deg);transition:transform .45s ease}.demo-card-face{position:absolute;inset:0;border-radius:17px;overflow:hidden;box-shadow:inset 0 1px #ffffff66}.demo-front{background:linear-gradient(130deg,#d8f2d8,#97c7ba 48%,#5f968d);padding:7%;color:var(--ink);display:none;flex-direction:column;justify-content:space-between}.demo-front:before{content:'';position:absolute;width:90%;aspect-ratio:1;right:-35%;top:-65%;border:1px solid #ffffff99;border-radius:50%;box-shadow:0 0 0 45px #ffffff15,0 0 0 90px #ffffff10}.demo-topline,.demo-bottomline{position:relative;display:flex;justify-content:space-between;align-items:center}.demo-chip{display:grid;grid-template-columns:repeat(2,1fr);width:47px;height:36px;border-radius:7px;background:#d9dccd;border:2px solid #b4bdad;overflow:hidden}.demo-chip i{border:1px solid #a8b1a0}.demo-chip i:nth-child(3){grid-column:1/3}.demo-symbol{font-size:32px;font-weight:300;line-height:1}.demo-card-number{position:relative;font-size:clamp(14px,1.45vw,23px);font-weight:700;letter-spacing:.11em;white-space:nowrap}.demo-bottomline{font-size:8px;letter-spacing:.11em;font-weight:800}.demo-front-code{display:none;position:relative;align-self:flex-end;margin:8% 0 0}.demo-front-code .demo-highlight{display:block;font-size:26px;line-height:1;letter-spacing:.16em}.demo-front-code small{font-size:7px;letter-spacing:.12em;font-weight:800}
.demo-back{background:linear-gradient(125deg,#c9e9d7,#9dcbbd 60%,#6ca697);display:flex;flex-direction:column;justify-content:space-between}.demo-stripe{height:22%;background:#1c3035;margin-top:12%}.demo-signature{margin:0 7% 0 9%;height:20%;background:repeating-linear-gradient(-9deg,#efeee8 0,#efeee8 10px,#e8e8dc 11px,#e8e8dc 12px);display:flex;align-items:center;justify-content:space-between;padding:0 6% 0 3%;font-size:8px;font-weight:800;letter-spacing:.12em;color:#526f6b}.demo-signature strong{background:#f6f6ef;box-shadow:0 0 0 5px #f6f6ef;font-size:23px;color:var(--ink);letter-spacing:.15em}.demo-back-bottom{display:flex;justify-content:space-between;align-items:center;padding:0 8% 5%;font-size:8px;font-weight:800;letter-spacing:.12em}.callout-line{position:absolute;width:90px;height:1px;background:var(--coral);right:-20%;top:50%;transform:rotate(35deg);transform-origin:left}.callout-label{position:absolute;right:-36%;top:67%;color:var(--mint);font-size:9px;font-weight:850;letter-spacing:.1em;white-space:nowrap}.callout-dot{display:inline-block;width:6px;height:6px;background:var(--coral);border-radius:50%;margin-right:6px;vertical-align:2px}
.card-demo[data-view=front] .demo-card,.card-demo[data-view=amex] .demo-card{transform:rotate(5deg)}.card-demo[data-view=front] .demo-front,.card-demo[data-view=amex] .demo-front{display:flex}.card-demo[data-view=front] .demo-back,.card-demo[data-view=amex] .demo-back{display:none}.card-demo[data-view=amex] .demo-front{background:linear-gradient(130deg,#f0c9bb,#e79781 50%,#b56762)}.card-demo[data-view=amex] .demo-front-code{display:block}
.hero-card-controls{position:absolute;bottom:14%;left:50%;transform:translateX(-50%);display:flex;gap:5px;z-index:2;padding:5px;background:#ffffff14;border:1px solid #ffffff27;border-radius:30px}.hero-card-controls button{min-width:64px;min-height:34px;padding:7px 12px;border:0;border-radius:20px;background:transparent;color:var(--paper);font-size:11px;font-weight:800;cursor:pointer}.hero-card-controls button[aria-pressed=true]{background:var(--mint);color:var(--ink)}.hero-card-controls button:hover:not([aria-pressed=true]){background:#ffffff25}
.section-pad{padding:clamp(76px,9vw,145px) clamp(24px,7.1vw,112px)}.section-heading{margin-bottom:52px}.two-col-heading{display:grid;grid-template-columns:1.1fr .9fr;gap:8%;align-items:end}.section-kicker{margin:0 0 27px;color:#517369}.section-kicker span{color:#d17764}.section-heading h2,.safety-title h2,.archive-teaser h2{font-family:var(--serif);font-size:clamp(50px,5vw,78px);line-height:1.04;font-weight:400;letter-spacing:-.055em;margin:0}.two-col-heading>p{font-family:var(--serif);font-size:clamp(19px,1.8vw,24px);line-height:1.45;color:#526169;max-width:520px;margin:0 0 7px}
.finder{background:var(--paper-deep)}.finder-grid{display:grid;grid-template-columns:1.1fr .9fr;border-top:1px solid #bec9c2;border-bottom:1px solid #bec9c2}.view-switch{display:flex;flex-direction:column}.view-switch button{width:100%;min-height:85px;padding:15px 24px 15px 0;border:0;border-bottom:1px solid #bec9c2;background:transparent;display:grid;grid-template-columns:60px 1fr 25px;align-items:center;text-align:left;color:var(--ink);font-size:12px;font-weight:800;cursor:pointer}.view-switch button:last-child{border:0}.view-switch button span:nth-child(1){font-family:var(--serif);font-size:clamp(19px,2vw,27px);font-weight:400;letter-spacing:-.03em}.view-switch button[aria-pressed=true]{color:#397365}.view-switch button[aria-pressed=true] span:nth-child(1){font-weight:700}.view-switch button:hover{color:#397365}.finder-answer{padding:30px 0 30px 12%;border-left:1px solid #bec9c2}.answer-label{display:flex;justify-content:space-between;color:#517369}.finder-answer>p:nth-child(2){font-family:var(--serif);font-size:clamp(24px,2.5vw,34px);line-height:1.32;letter-spacing:-.03em;margin:31px 0}.finder-answer small{font-size:12px;color:var(--muted)}
.basics{background:var(--paper)}.term-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}.term-card{padding:28px 30px 38px;background:var(--paper);min-height:315px}.term-number{display:flex;justify-content:space-between;font-size:12px;font-weight:800;color:#568174}.term-card h3{font-family:var(--serif);font-size:clamp(34px,3.1vw,48px);font-weight:400;letter-spacing:-.05em;margin:62px 0 12px}.term-card p{max-width:300px;margin:0;color:#56636a;font-size:15px;line-height:1.55}.term-card p strong{color:var(--ink)}
.safety{display:grid;grid-template-columns:.85fr 1.15fr;gap:9%;background:var(--mint);padding-top:clamp(75px,8vw,120px);padding-bottom:clamp(75px,8vw,120px)}.safety-title .section-kicker{color:#356d59}.safety-title h2{font-size:clamp(50px,4.9vw,77px)}.safety-title h2 em{font-weight:400;color:#417c6c}.safety-title>p:last-child{font-family:var(--serif);font-size:20px;line-height:1.45;max-width:420px;margin-top:31px;color:#3e6056}.safety-steps{border-top:1px solid #8db9a5}.safety-step{display:grid;grid-template-columns:40px 1fr 26px;gap:18px;padding:26px 0;border-bottom:1px solid #8db9a5}.step-index,.step-symbol{font-size:12px;font-weight:800}.safety-step h3{font-family:var(--serif);font-weight:400;letter-spacing:-.025em;font-size:25px;line-height:1.2;margin:0 0 8px}.safety-step p{font-size:14px;line-height:1.5;margin:0;color:#4a665b;max-width:470px}.step-symbol{text-align:right}
.questions{background:var(--paper)}.question-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.question-grid article{min-height:275px;padding:26px;background:#ebece6;border-radius:3px}.question-grid span{font-size:10px;letter-spacing:.14em;font-weight:850;color:#568174}.question-grid h3{font-family:var(--serif);font-size:25px;line-height:1.23;letter-spacing:-.03em;font-weight:400;margin:52px 0 13px}.question-grid p{font-size:14px;color:#58656b;margin:0}
.archive-teaser{display:flex;align-items:end;justify-content:space-between;gap:35px;background:var(--ink);color:var(--paper)}.archive-teaser .section-kicker{color:var(--mint)}.archive-teaser h2{font-size:clamp(54px,5.4vw,85px)}.archive-teaser p:not(.section-kicker){max-width:550px;font-family:var(--serif);font-size:19px;line-height:1.45;color:#afc0c0;margin:30px 0 0}.archive-teaser .button{margin-bottom:6px;white-space:nowrap}
.sources{background:#e7eae3;padding-top:58px;padding-bottom:64px}.sources h2{font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px}.sources p{font-size:13px;color:var(--muted)}.sources ul{list-style:none;padding:0;margin:25px 0 0;display:flex;gap:16px 32px;flex-wrap:wrap}.sources li a{font-size:12px;text-decoration:underline;text-underline-offset:3px}.sources li a:hover{color:#3f7867}
.site-footer{background:#101b23;color:var(--paper);padding:60px clamp(24px,7.1vw,112px) 25px}.footer-top{display:flex;justify-content:space-between;gap:35px;align-items:start;padding-bottom:70px}.footer-brand{font-size:36px}.footer-brand>span{color:var(--mint)}.footer-brand small{font-size:8px;color:#a8b9b7}.footer-top p{font-family:var(--serif);font-size:20px;line-height:1.4;color:#afc0c0;max-width:320px}.footer-bottom{border-top:1px solid #33434a;padding-top:22px;display:flex;justify-content:space-between;gap:25px;color:#a7b5b4;font-size:11px}.footer-bottom nav{display:flex;gap:25px}.footer-bottom a:hover{color:var(--mint)}
.inner-hero{background:var(--ink);color:var(--paper);padding:80px clamp(24px,7.1vw,112px) 95px;min-height:420px}.breadcrumbs{display:flex;gap:12px;align-items:center;font-size:12px;font-weight:700;color:#9fc9ba;margin-bottom:50px}.breadcrumbs a:hover{text-decoration:underline}.inner-hero .section-kicker{color:var(--mint)}.inner-hero h1{font-family:var(--serif);font-size:clamp(55px,6.8vw,100px);line-height:1.02;letter-spacing:-.065em;font-weight:400;max-width:950px;margin:0 0 20px}.inner-hero>p:last-child{font-family:var(--serif);font-size:21px;color:#b9c8c6;max-width:650px;margin:0}.listing{min-height:350px}.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.post-card{background:#eeefe9;border:1px solid #dde2db;border-radius:3px;padding:25px;min-height:325px;display:flex;flex-direction:column}.post-card-top{display:flex;justify-content:space-between;gap:15px;font-size:10px;font-weight:800;letter-spacing:.12em;color:#5c8172}.post-card h2{font-family:var(--serif);font-size:26px;line-height:1.2;letter-spacing:-.035em;font-weight:400;margin:45px 0 12px}.post-card h2 a:hover{text-decoration:underline;text-decoration-color:var(--coral);text-underline-offset:5px}.post-card p{font-size:14px;line-height:1.5;color:#5e6b70;margin-bottom:22px}.post-card-link{margin-top:auto;font-size:12px;font-weight:800}.post-card-link span{margin-left:6px}.post-card-link:hover{color:#437c66}.pagination{display:flex;flex-wrap:wrap;gap:7px;margin-top:42px}.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;min-height:42px;padding:8px 13px;border:1px solid var(--line);font-size:12px;font-weight:750}.pagination .page-numbers.current,.pagination .page-numbers:hover{background:var(--ink);color:var(--paper)}.no-results{padding:35px 0}.no-results h2{font-family:var(--serif);font-size:45px;font-weight:400}
.article-page{min-height:600px}.article-header{background:var(--ink);color:var(--paper);padding:60px clamp(24px,7.1vw,112px) 85px}.article-header .section-kicker{color:var(--mint)}.article-header h1{font-family:var(--serif);font-size:clamp(48px,6.2vw,88px);line-height:1.05;letter-spacing:-.055em;font-weight:400;max-width:1000px;margin:0}.article-meta{font-size:12px;color:#a9bfba;margin:27px 0 0}.article-layout{padding:75px clamp(24px,7.1vw,112px);display:grid;grid-template-columns:minmax(0,740px) minmax(200px,270px);gap:clamp(40px,7vw,110px);justify-content:space-between}.article-content{min-width:0;font-family:var(--serif);font-size:19px;line-height:1.72;color:#26383f;overflow-wrap:anywhere}.article-content>*:first-child{margin-top:0}.article-content p,.article-content ul,.article-content ol{margin:0 0 1.25em}.article-content h2,.article-content h3,.article-content h4{font-family:var(--sans);line-height:1.2;letter-spacing:-.035em;color:var(--ink);margin:1.8em 0 .7em}.article-content h2{font-size:clamp(29px,3vw,40px)}.article-content h3{font-size:26px}.article-content a{text-decoration:underline;text-decoration-color:#65a58d;text-underline-offset:3px}.article-content a:hover{color:#3e795e}.article-content blockquote{margin:2em 0;padding:20px 28px;border-left:4px solid #75b499;background:#eff1e9}.article-content img{margin:1.5em 0;border-radius:3px}.article-content table{display:block;max-width:100%;overflow:auto;border-collapse:collapse;font-size:15px}.article-content th,.article-content td{border:1px solid var(--line);padding:9px 12px}.article-content iframe{max-width:100%}.article-content pre{max-width:100%;overflow:auto;font-size:14px}.article-content div{max-width:100%}.article-aside{align-self:start;border-top:3px solid var(--mint);padding-top:20px;position:sticky;top:30px}.aside-marker{color:#608e7a}.article-aside p{font-family:var(--serif);font-size:20px;line-height:1.45;margin:23px 0 26px}.article-aside a,.article-footer a{font-size:12px;font-weight:800;text-decoration:underline;text-underline-offset:4px}.article-footer{padding:30px clamp(24px,7.1vw,112px) 80px;border-top:1px solid var(--line)}.post-pages{font-size:15px}.error-hero{min-height:500px}.error-hero>p:nth-of-type(2){font-family:var(--serif);font-size:21px;color:#b9c8c6}.error-hero .button-primary{background:var(--mint);color:var(--ink)}.error-hero .text-link{color:var(--paper);border-color:var(--paper)}
@media(max-width:1100px){.site-nav{gap:18px}.hero{grid-template-columns:50% 50%}.hero-copy{padding-left:5vw}.hero h1{font-size:clamp(59px,7vw,85px)}.callout-label{right:-23%;font-size:8px}.callout-line{right:-13%;width:55px}.card-demo{width:75%}.post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){html{scroll-padding-top:1.5rem}.site-header{min-height:86px;align-items:start;padding-top:20px;padding-bottom:17px;display:block}.brand-word{font-size:21px}.site-nav{margin-top:18px;gap:10px 16px;flex-wrap:wrap;font-size:11px}.nav-guide{padding:8px 10px}.hero{display:flex;flex-direction:column}.hero-copy{padding:65px 24px 55px}.eyebrow{font-size:9px;white-space:normal}.hero h1{font-size:clamp(61px,12vw,91px);margin:26px 0 20px}.hero-lead{font-size:22px}.hero-note{margin-top:36px}.hero-visual{min-height:410px}.hero-card-controls{bottom:15%}.card-demo{width:min(68%,450px)}.visual-orbit{width:540px}.orbit-two{width:360px}.visual-caption{font-size:8px}.callout-line{right:-15%;top:53%}.callout-label{right:-22%;top:73%;font-size:7px}.section-pad{padding:70px 24px}.two-col-heading{display:block}.section-heading{margin-bottom:34px}.section-heading h2,.safety-title h2{font-size:clamp(49px,10vw,69px)}.two-col-heading>p{margin-top:24px;font-size:20px}.finder-grid{display:block}.view-switch button{min-height:70px;grid-template-columns:40px 1fr 23px}.finder-answer{border-left:0;border-top:1px solid #bec9c2;padding:24px 0}.finder-answer>p:nth-child(2){font-size:26px;margin:19px 0}.term-grid{grid-template-columns:1fr}.term-card{min-height:auto;padding:25px}.term-card h3{margin-top:35px}.term-card p{max-width:none}.safety{display:block}.safety-title>p:last-child{font-size:19px;margin-bottom:36px}.question-grid{grid-template-columns:1fr}.question-grid article{min-height:220px}.question-grid h3{margin-top:33px}.archive-teaser{display:block}.archive-teaser .button{margin-top:31px}.footer-top,.footer-bottom{display:block}.footer-top{padding-bottom:40px}.footer-top p{margin:31px 0 0}.footer-bottom nav{margin-top:25px;flex-wrap:wrap}.inner-hero,.article-header{padding:62px 24px 68px;min-height:0}.breadcrumbs{margin-bottom:34px}.inner-hero h1{font-size:clamp(49px,10vw,71px)}.post-grid{grid-template-columns:1fr}.article-header h1{font-size:clamp(46px,9vw,70px)}.article-layout{display:block;padding:55px 24px}.article-aside{position:static;margin-top:45px}.article-content{font-size:18px}.article-footer{padding:25px 24px 65px}}
@media(max-width:430px){.hero h1{font-size:60px}.hero-actions{display:block}.hero-actions .text-link{display:inline-block;margin-top:22px}.hero-visual{min-height:340px}.card-demo{width:75%}.demo-card-face{border-radius:11px}.demo-chip{width:32px;height:25px}.demo-card-number{font-size:13px}.demo-signature strong{font-size:17px}.demo-back-bottom{font-size:5px}.callout-label{right:-16%;font-size:6px}.callout-line{width:35px}.visual-caption{left:6%;right:6%}.sources ul{display:block}.sources li+li{margin-top:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}