/* THE PORTAL LOOK WILL APPROVED ON 4 OCTOBER 2026, applied to the website demo (Venzor Max).
   Copied as written from work/venzor-portal-approved-20261004/code/live-preview.cjs. Do not restyle.
   Only difference: the cut-corner rules skip the tilted hero phone, which has its own corner in website-embed.css. */

  /* the big "This Week" title, a step bigger (Will, 4 Oct) */
  #app .dashboard-page-title{font-size:calc(17.5vw) !important}
  .client-signature-name{padding-right:0 !important;font-size:38px !important;line-height:1.05 !important}
  .client-eyebrow{white-space:nowrap}
  .client-eyebrow .sep{color:rgba(185,135,91,.6);margin:0 .5em}
  .client-eyebrow .plan{color:#D8AF86}
  .mock-logo{position:absolute;bottom:2px;width:112px;height:38px;margin:0;object-fit:contain;filter:brightness(0) invert(1) drop-shadow(0 0 4px rgba(0,0,0,.95)) drop-shadow(0 0 10px rgba(0,0,0,.8));opacity:.96}
  #reader .reader-script-card .card-topic-label{font-size:15px !important;letter-spacing:.2em !important}
  #app .dashboard-nav::before{border-color:transparent !important}
  /* "3 fresh | 0 rated": a little smaller, and a little closer to the tabs under it (Will, 4 Oct) */
  #app .dashboard-page-status{font-size:9.5px !important;position:relative;top:8px;display:inline-flex !important;align-items:center;width:auto !important;padding:7px 0 !important;background:none !important}
  #app .dashboard-page-status i{background:rgba(185,135,91,.6) !important;width:1.5px !important;height:14px !important;opacity:1 !important;margin:0 3px !important}
  /* The tab row is a selector: three equal parts across the width of the card below, each name centred in its part,
     and one blue bar of one size that moves from part to part (Will, 4 Oct). */
  #app .dashboard-nav{grid-template-columns:1fr 1fr 1fr !important;padding-left:1px !important;padding-right:1px !important;overflow:visible !important}
  #app .dashboard-nav::before{left:0 !important;right:0 !important;border-color:transparent !important}
  #app .dashboard-tab{padding-left:0 !important;padding-right:0 !important;justify-content:center !important}
  #app .dashboard-tab+.dashboard-tab::before{left:0 !important}
  #app .dashboard-tab::after{left:7px !important;right:7px !important}
  #app .dashboard-tab span{font-size:min(15px,3.4vw) !important}
  #app .dashboard-tab{gap:4px !important}
  .vsel{margin:6px 0 4px}
  .vsel button{appearance:none;-webkit-appearance:none;margin:0;cursor:pointer}
  .rtop{display:flex;align-items:flex-start;justify-content:space-between}
  /* the "← This week" back button in an open script, a little smaller (Will, 4 Oct) */
  #reader .rback{font-size:9px !important;height:29px !important;min-height:0 !important;padding:0 11px !important;display:inline-flex !important;align-items:center !important;color:#78D2DE !important}
  /* The cut corner's diagonal: one STRAIGHT bar, 2px thick, the same thickness end to end. It sits exactly where the real portal's
     own corner line sits (same position, same thickness). It is made longer than the corner on purpose: the card's own cut trims both ends flush with the top and right
     edges, so the ends are filled and the thin frame lines stop at the bar instead of running past it (Will, 4 Oct). */
  html:not([data-website-example="hero"]) #app .tile.script-preview-card::after, html:not([data-website-example="hero"]) #reader .reader-script-card::after{width:44px !important;height:2px !important;top:11px !important;right:-10px !important;background:rgb(150,111,76) !important;transform:rotate(45deg) !important;transform-origin:center !important;clip-path:polygon(5.32px 0,38.68px 0,40.68px 2px,3.32px 2px) !important}
  /* no overhang: the card's cut is moved in by a hair so it runs exactly along the thick line's outer edge.
     The thin top and side lines then stop at the thick line instead of poking past it. */
  html:not([data-website-example="hero"]) #app .tile.script-preview-card, html:not([data-website-example="hero"]) #reader .reader-script-card{clip-path:polygon(0 0,calc(100% - 24.59px) 0,100% 24.59px,100% 100%,0 100%) !important}
  /* which script is open: "SCRIPT 01" in the script box, on the right, across from HOOK, as on the This Week card (Will, 4 Oct) */
  #reader .reader-script-card .card-topic-head{display:flex !important;align-items:center !important;justify-content:space-between !important}
  .vz-snum{display:flex;align-items:center;gap:6px;pointer-events:none;margin-right:14px}
  .vz-snum span{font:500 9.25px/1 "JetBrains Mono",monospace;letter-spacing:.18em;text-transform:uppercase;color:#D8AF86}
  .vz-snum b{font:italic 400 32px/1 "Cormorant Garamond",Georgia,serif;font-feature-settings:"lnum" 1;color:#D8AF86;margin-top:-4px}
  .tsz{display:flex;align-items:stretch;border:1px solid rgba(185,135,91,.55);border-radius:8px;overflow:hidden;background:rgba(10,12,12,.5)}
  .tsz button{position:relative;appearance:none;-webkit-appearance:none;width:36px;height:32px;margin:0;padding:0 0 1px;background:none;border:0;border-left:1px solid rgba(185,135,91,.3);color:#78D2DE;font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;line-height:1;display:grid;place-items:center;-webkit-tap-highlight-color:transparent}
  .tsz button:first-child{border-left:0}
  .tsz button::after{content:"";position:absolute;left:0;right:0;top:-8px;bottom:-8px}
  .tsz button:nth-child(1){font-size:11px}.tsz button:nth-child(2){font-size:17px}.tsz button:nth-child(3){font-size:25px}
  .tsz button.on{background:#78D2DE;color:#000}
  .tszwrap{display:flex;flex-direction:column;align-items:center;gap:5px}
  .tszlabel{font:500 8px/1 "JetBrains Mono",monospace;letter-spacing:.18em;text-transform:uppercase;color:rgba(216,175,134,.8)}
  #reader.ts2 .reader-script-para, #reader.ts2 .reader-cta-line{font-size:17px !important;line-height:1.55 !important}
  #reader.ts3 .reader-script-para, #reader.ts3 .reader-cta-line{font-size:21px !important;line-height:1.5 !important}
  #reader.ts2 .reader-hook-line{font-size:31px !important;line-height:1.1 !important}
  #reader.ts3 .reader-hook-line{font-size:35px !important;line-height:1.08 !important}

  /* keypad page: the clinic logo, sized as approved */
  .vz-locklogo{display:block;width:206px;height:70px;object-fit:contain;margin:4px auto 0;filter:brightness(0) invert(1);opacity:.96}
  /* a fine bronze line with a small diamond, between his logo and his name */
  .vz-lockrule{position:relative;width:132px;height:1px;margin:10px auto 12px;background:linear-gradient(90deg,rgba(185,135,91,0),rgba(185,135,91,.85) 22%,rgba(185,135,91,.85) 78%,rgba(185,135,91,0))}
  .vz-lockrule::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;transform:rotate(45deg);background:#0B0D0D;border:1px solid #B9875B;box-sizing:border-box}
  body.onlock .lock-subtitle{margin-top:12px !important}
  body.onlock .lock-intro{padding-bottom:0 !important}
  /* first-visit tips */
  .tip-block{position:fixed;inset:0;z-index:8999;touch-action:none}
  .tip-hole{position:fixed;z-index:9000;border-radius:14px;box-shadow:0 0 0 2000px rgba(0,0,0,.78),0 0 0 1px #78D2DE,0 0 18px 2px rgba(120,210,222,.35);pointer-events:none}
  .tip{position:fixed;z-index:9001;left:16px;right:16px;padding:16px 18px 12px;background:#0E1111;border:1px solid rgba(185,135,91,.78);border-radius:12px;box-sizing:border-box}
  .tip .n{font:500 10px/1 "JetBrains Mono",monospace;letter-spacing:.18em;text-transform:uppercase;color:#78D2DE}
  .tip h3{margin:9px 0 5px;font:500 25px/1.08 "Cormorant Garamond",Georgia,serif;letter-spacing:-.4px;color:#F4EEE7}
  .tip p{margin:0;font:400 14px/1.5 Inter,system-ui,sans-serif;color:#E9E2D9}
  .tip .row{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
  .tip button{appearance:none;-webkit-appearance:none;border:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .tip .skip{background:none;padding:14px 14px 14px 0;font:500 10px/1 "JetBrains Mono",monospace;letter-spacing:.16em;text-transform:uppercase;color:rgba(216,175,134,.8)}
  .tip .next{min-width:88px;height:44px;padding:0 20px;border-radius:8px;background:#78D2DE;color:#08181B;font:600 15px/1 Inter,system-ui,sans-serif}
  .tip-caret{position:fixed;z-index:9002;width:14px;height:14px;background:#0E1111;border:1px solid rgba(185,135,91,.78);transform:rotate(45deg)}
  .tip-caret.up{border-right:0;border-bottom:0}.tip-caret.down{border-left:0;border-top:0}
/* bottom of This Week: no "0 of 3 scripts rated" panel; a tidy footer (Will, 4 Oct) */
  #app .dashboard-tuning{display:none !important}
  .vz-foot{margin:26px 15px 0;padding:18px 0 26px;border-top:1px solid rgba(185,135,91,.25)}
  .vz-foot button,.vz-foot a{appearance:none;-webkit-appearance:none;background:none;border:0;margin:0;padding:0;cursor:pointer;text-decoration:none;-webkit-tap-highlight-color:transparent}
  .vz-foot-row{display:flex;align-items:center;justify-content:space-between}
  .vz-fl{display:inline-flex;align-items:center;gap:9px;min-height:44px;font:500 11px/1 "JetBrains Mono",monospace;letter-spacing:.16em;text-transform:uppercase;color:#78D2DE}
  .vz-foot-plan{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:14px;font:500 11px/1 "JetBrains Mono",monospace;letter-spacing:.16em;text-transform:uppercase}
  .vz-foot-plan .plan{color:#D8AF86}
  .vz-foot-plan i{width:1.5px;height:14px;background:rgba(185,135,91,.6)}
  .vz-foot-plan a b{color:#0ff7fb;font-weight:500}
  .vz-foot-plan a{color:#E9E2D9;border-bottom:1px solid rgba(233,226,217,.4);padding-bottom:3px}
  .vz-foot .vz-replay{display:block;margin:22px auto 0;min-height:32px;font:500 9.5px/1 "JetBrains Mono",monospace;letter-spacing:.16em;text-transform:uppercase;color:rgba(216,175,134,.7)}

/* Venzor Max is always blue (never bronze) */
.client-eyebrow .plan.max, .vz-foot-plan .plan.max{color:#0ff7fb}
/* nothing left in the top block of an open script once the hook section is gone */
#reader .reader-head:empty{display:none}

/* ---- Max extras inside an open script: fixes from Will's phone review (4 Oct, evening) ----
   1. "2 more hooks" sits under the hook itself (not squeezed beside SCRIPT 01), and its list opens under it.
   2. The lists of extra hooks and extra endings no longer ride up over the line above them (they had a -6px top margin).
   3. The little arrow is drawn, so it sits level with the words whether the list is open or closed. */
#reader .vz-morehooks{display:flex;justify-content:flex-start;margin:12px 0 0}
#reader .vz-morehooks .reader-toggle{margin-left:0 !important;padding:6px 0 !important;text-align:left !important}
#reader .reader-script-card .reader-disclosure-panel{margin:10px 0 16px !important}
#reader .reader-script-card .vz-morehooks + .reader-disclosure-panel{margin-top:6px !important}
#reader .reader-toggle{position:relative;gap:7px !important}
#reader .reader-toggle::after{content:"";position:absolute;left:-8px;right:-8px;top:-10px;bottom:-10px}   /* finger-sized tap area */
#reader .reader-toggle-arrow, #app .card-hookmore .reader-toggle-arrow{position:relative;display:inline-block;flex:none;width:9px;height:9px;font-size:0 !important;line-height:0 !important}
#app .card-hookmore{gap:7px !important}   /* the same arrow on the Saved cards' "2 more hooks" */
#reader .reader-toggle-arrow::before, #app .card-hookmore .reader-toggle-arrow::before{content:"";position:absolute;left:2px;top:.2px;width:5px;height:5px;box-sizing:border-box;border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;transform:rotate(45deg)}

/* ---- WEBSITE PHONE PICTURES ONLY (Will, 5 Oct): applies only while the demo sits inside a phone picture on venzor.ai
   (html.vz-in-phone). The full-screen demo and the real customer portal are NOT affected.
   Smaller title, name and first-card text, and less gap above "3 fresh", so more of the second script shows. */
html.vz-in-phone #app .dashboard-page-title{font-size:15.5vw !important}
html.vz-in-phone .client-signature-name{font-size:33px !important}
html.vz-in-phone #app .dashboard-identity-slot{margin-bottom:0 !important}
html.vz-in-phone #app .dashboard-page-status{margin-top:-8px !important}
html.vz-in-phone #app .tile.script-preview-card .topic{font-size:25.5px !important;line-height:1.08 !important}
html.vz-in-phone #app .tile.script-preview-card .script-preview{font-size:15px !important;line-height:1.45 !important}
html.vz-in-phone #app .tile.script-preview-card{padding-top:16px !important;padding-bottom:14px !important}
html.vz-in-phone #app .tile.script-preview-card .card-section + .card-section{margin-top:11px !important;padding-top:11px !important}
html.vz-in-phone #app .tile.script-preview-card .acts{margin-top:12px !important;padding-top:12px !important}